{ "id": "v1-sk-684b", "long_id": "v1.skeuomorphism.app.s06.p08.t04.u11", "name": "Skeuomorphism app (open ledger on a desk)", "era": { "slug": "skeuomorphism", "code": "sk", "name": "Skeuomorphism", "years": [ 2009, 2013 ], "description": "App-era product sites, 2009 to 2013: pages that imitate materials, with linen and paper textures, bevelled glossy keys, inset wells, stitched edges and engraved text." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1280, "fluid": false }, "summary": "A small web application dressed as the object it replaces, from the years when screens imitated physical materials: a toolbar across the window, and under it a desk on which one bound book lies open, two paper pages side by side with divider tabs standing on the upper edge. It was a common dress for to-do lists, notebooks, address books and ledgers in the browser and on tablets between about 2010 and 2013. The working parts are ordinary (a table, a list, a form) but each is drawn as stationery: ruled lines, index cards held by a clip, labels pasted on bound volumes, sheets that show the pages lying under them.", "url": "https://chrono.skin/s/v1-sk-684b", "preview_url": "https://chrono.skin/s/v1-sk-684b/specimen.html", "files": { "STYLE.md": "# Skeuomorphism app (open ledger on a desk)\n\n## Summary\n\nA small web application dressed as the object it replaces, from the years when screens imitated physical materials: a toolbar across the window, and under it a desk on which one bound book lies open, two paper pages side by side with divider tabs standing on the upper edge. It was a common dress for to-do lists, notebooks, address books and ledgers in the browser and on tablets between about 2010 and 2013. The working parts are ordinary (a table, a list, a form) but each is drawn as stationery: ruled lines, index cards held by a clip, labels pasted on bound volumes, sheets that show the pages lying under them.\n\n## Layout\n\n- Fixed width: `--size-page` is 1000px, the width of the book and of the toolbar's content. The toolbar (`.ds-nav`) and the desk (`.ds-page__desk`, the `--fill-inverse` band) run the full window width; under the desk the page texture shows, with the footer on it.\n- Navigation is the application toolbar, `--size-nav` (58px) high: the `.ds-brand` at the left, then one key per part of the application, each a glyph over a word, the current one pressed into the bar; at the right a search field, a small key and the name of the ledger. It is written once, above the desk, and the footer once below it. There is no other navigation except the divider tabs.\n- Every view is one `.ds-book` on the desk: a cover (`--space-3` of it shows round the paper) holding a `.ds-book__spread` of two `.ds-book__page` halves of equal width and height, the right one `.ds-book__page--right`; a shade down the middle makes the fold. Each page is a column with `--space-5` of margin: its blocks follow one another, a `.ds-book__title` above each block that needs a name, and what is left of the page is filled with ruled lines (`.ds-book__rest`) above the page number (`.ds-book__folio`). Nothing is placed outside the book and no block spans both pages.\n- The home view puts the hero card, the `.ds-stats` totals and the soonest `.ds-list` on the left page, and the `.ds-grid` of shelves, the `.ds-sidebar` of people and one notice on the right page.\n- Inner pages keep the toolbar, the desk and the book. The left page opens with the breadcrumb, then `.ds-page-header` (title and one line, keys at the right, a double rule under it), then the working block: the table with its pagination in a `.ds-book__foot`, the form, an empty well, or running text. The right page holds what belongs to the selection on the left: a `.ds-panel` card of facts with its keys, a list of events or labels, the open dialog. Where a subject has several pages, `.ds-tabs` stand on the top edge of the right page as dividers (the book is then `.ds-book--tabbed`); the current tab is the paper's own colour and a little taller.\n- Views. The specimen is a five-screen application, one `.ds-view` showing at a time. `desk` is the home view: today's card, the totals, what is due soonest, the shelves and who has what. `loans` is the Out now divider: the table of loans with one line marked, pagination, and on the facing page the marked loan's card and the key to the labels. `returned` is the Returned divider: an empty month on the left, last month's list on the right. `loan` is the Open entry divider: one entry as running text with its links, its facts and its history. `settings` is the settings form with its notices and keys, and on the facing page the dialog that the destructive key opens. The toolbar leads to `desk`, `loans` and `settings`; the dividers join `loans`, `returned` and `loan`, and all three keep Loans pressed in the toolbar. Each view needs one `:has()` selector in the navigation rule of `components.css`.\n- Spacing scale: `--space-1` 3px (badge padding, between page keys and tabs), `--space-2` 6px (cell and row padding, between keys), `--space-3` 10px (the cover's rim, form rows, between shelves), `--space-4` 14px (control side padding, card padding), `--space-5` 22px (page margin, above a block title, the pitch of the ruled lines), `--space-6` 30px (above the book), `--space-7` 44px (below the book).\n- Control heights: `--size-pill` 20px (small keys, badges), `--size-control` 28px (keys, fields), `--size-control-large` 38px (the keys of the hero card), `--size-tab` 30px (the current divider). `--size-thumb` 34px is the tile of a list row; `--size-hair` 1px the offset of every highlight.\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- Slate metal and black glass, with one blue; the set is dark. `--color-page` #383a44 is the slate page; `--color-canvas` #454853 the sheet; `--color-surface` #4a4d59 rows and cells, `--color-surface-alt` #424550 alternate rows and wells, `--color-surface-strong` #33353e title strips.\n- `--color-bar` #1a1b1f (black glass, near-white text) is the current menu row, the tab bar, the counters and pressed \"current\" states; `--color-bar-alt` #5a5e6b (brushed steel, pale text) the menu rows, the breadcrumb strip, the table head and the shelf plank; `--color-inverse` #16171b (the black stage, white text) the hero, the alert sheet and the footer band.\n- Text is `--color-text` #cdd0d8, meta `--color-text-muted` #9da2af, headings `--color-heading` #f2f3f5, section, sidebar and panel titles and form labels `--color-heading-alt` #dcdfe3.\n- Links are `--color-link` #74b9f2, lighter on hover (#a8d8ff), lilac when visited (#9aa6d8).\n- `--color-button` #2b84dc (blue, white text) is the one primary action colour; the secondary key is steel `--color-button-secondary` #626675 with near-white text. Fields are wells darker than the sheet (`--color-input` #2c2e36).\n- `--color-accent` #ee8a22 (orange) for badges, `--color-accent-alt` #7a56c2 (violet) for \"new\" markers and the tape of a panel; `--color-success` #18a546, `--color-warning` #b87a10, `--color-danger` #f0553f on `--color-danger-surface` #3d2526. Notices are a dark blue tint, `--color-notice` #33475c with #cfe2f7 text.\n- `--color-fill-1` to `--color-fill-4` (#2b84dc blue, #ee8a22 orange, #18a546 green, #747a88 steel) colour the boxes on the shelf only; white glyphs on all four.\n- One family: `--font-body`, `--font-heading` and `--font-ui` are Lato where installed, then Helvetica Neue, Helvetica and Arial; Lato stands in for the era's commercial humanist sans. `--font-mono` Menlo.\n- Larger than the era's other sets: `--text-base` 14px at `--line-body` 1.5; `--text-small` 12px for meta, badges, table heads and the footer; `--text-ui` 13px at `--weight-ui` 700 for keys, menu rows and tabs; `--text-large` 17px for the lead and the large key.\n- Headings are light, white on dark: `--weight-heading` and `--weight-display` 300; `--text-h3` 15px (bold), `--text-h2` 20px, `--text-h1` 28px, `--text-display` 36px at `--line-display` 1.2. A bold phrase inside the light headline is the only emphasis. No uppercase from this part.\n- Links are not underlined until hovered (`--link-decoration: none`, `--link-decoration-hover: underline`).\n- Woven metal and glass. `--fill-page` is a fine diagonal weave at a 4px pitch with a faint glare over the top 260px. `--fill-bar` is black glass with a hard split at half height. `--fill-bar-alt` is brushed steel and `--fill-inverse` a top-lit black stage, both under 2px horizontal hairlines.\n- Corners: `--radius-control` 6px, `--radius-panel` 6px, `--radius-page` 8px, `--radius-pill` 11px (badges, pagination keys).\n- Keys are chunky: glossy with the same hard split (`--fill-button`), a light inner top edge, and a hard 3px ledge under them with a tight shadow below it (`--shadow-control`); a pressed key sinks onto a 1px ledge (`--shadow-control-pressed`). Sheets and boxes stand on the metal the same way: `--shadow-panel` is a 3px ledge and 0 4px 6px at 45%; `--shadow-dialog` is a dark ring, a 4px ledge and 0 5px 6px. `--shadow-text` is a dark line one pixel above light text. `--fill-input` shades the top 5px of a well. `--transition` is none.\n- Pairings this structure uses: `--color-bar-alt-text` on `--fill-bar-alt` (menu rows, breadcrumb strip, table head); `--color-bar-text` on `--fill-bar` (current menu row, tab bar, counters, the phone's title bar) and on the darkened bar colour of pressed \"current\" states (page, count badge); `--color-inverse-text` on `--fill-inverse` (hero, alert sheet, footer) and on the four `--color-fill-*` boxes; `--color-button-text` on `--fill-button` and `--color-button-secondary-text` on `--fill-button-secondary` (keys, list thumbs, pagination keys, select); `--color-accent-text` on `--fill-accent`, on the success and danger badges and on the danger key; `--color-heading` on the `--color-accent-alt` and `--color-warning` badges; `--color-heading-alt` on `--color-surface-strong` (sidebar title) and on the sheet. On the page texture: `--color-heading`, `--color-text`, `--color-text-muted` and the link colours.\n- One-off values built in `components.css` from tokens: the spotlight of the hero and the glass highlight of the alert sheet (radial gradients of `--color-inverse-text` at 12 to 34%), the phone body (`--color-shadow` mixed with 12 to 30% `--color-inverse-text`) and its corner (`--radius-page` plus `--space-4`), the spine and sheen of a shelf box, the split line of a counter, the notch under the current tab (a `--space-3` square of `--color-canvas` turned 45 degrees, half of it hidden in the part below), the 3 degree tilt and 55% opacity of the tape, the engraving shadow `0 var(--size-hair) 0` of `--color-canvas` at 50 to 70% under text on the page and on light fills, the inset well shadow of fields and the empty state, the gloss gradients of the danger key and the status badges, border colours darkened with `color-mix()` toward `--color-shadow`, the 1px tracking and `uppercase` of sidebar, footer and kicker titles, and `dashed` for the panel's perforation, the empty state and the footer stitching.\n\n- Felt and wood. `--fill-page` is felt: a 6px fleck of dark and light fibres and a pool of light from the top centre. `--fill-inverse` is the same fleck and light over ebony. `--fill-bar` and `--fill-bar-alt` are planks: uneven horizontal grain lines over a top-lit gradient of the bar colour.\n- Keys are polished brass: `--fill-button` runs from 45% lighter at the top through the plain colour to 22% darker, with a bright inner top edge and a soft 0 3px 7px shadow (`--shadow-control`), so they sit padded above the felt. Pressed keys take a 5px inset shade.\n- Sheets are padded cushions lying on the table: `--shadow-panel` is a dark 1px ring and a soft 0 6px 14px at 50%; `--shadow-dialog` a ring and 0 10px 20px. `--fill-panel` is flat felt.\n- Corners are large and soft: `--radius-control` 10px, `--radius-panel` 16px, `--radius-page` 20px, `--radius-pill` 16px. `--fill-accent` is a chip with a highlight across its top.\n- `--shadow-text` is a soft dark shadow one pixel below light text (0 1px 1px at 60%). `--fill-input` shades the top 6px of a well. `--transition` is none.\n\n## Components\n\n- `.ds-page`: on ``. Paints the desk top. `.ds-page__desk` is the band the book lies on and wraps all views; `.ds-page__wrap` a 1000px column for anything else placed on the page texture.\n- `.ds-view`: one screen, a `
` with an id; only the one named in the address shows, and `.ds-view--home` when none is named.\n- `.ds-book`: the open book. `.ds-book--tabbed` when dividers stand on it. `.ds-book__spread` holds the two `.ds-book__page` halves (`.ds-book__page--right` for the second). On a page: `.ds-book__title` names a block (`is-first` when it opens the page), `.ds-book__block` adds the usual gap above a block that has no title, `.ds-book__foot` is the line under a block (pagination or a link left, a count right), `.ds-book__rest` the ruled remainder and `.ds-book__folio` the page number.\n- `.ds-nav`: the toolbar. `.ds-nav__inner` centres it; `.ds-nav__items` holds `.ds-nav__item` keys, each a `.ds-nav__glyph` over a word; the current one is pressed in, by `is-current` or, in the specimen, by one selector per view. `.ds-nav__tools` at the right holds the search field (`.ds-form__input` with `.ds-nav__search`), a small secondary key and `.ds-nav__user`.\n- `.ds-brand`: at the left of the toolbar. `.ds-brand__mark` is a 28px tile dressed as the primary key (`--fill-button`, darkened border, `--radius-control`, `--shadow-control`) holding the mark in `--color-button-text`; `.ds-brand__name` the name in the heading font at 18px, always `--weight-bold`. Both are placeholders for the installing project's own name and logo.\n- `.ds-hero`: an index card at the head of the home view's first page, with an accent rule along its top and a clip: `.ds-hero__kicker` (the date, on a strip in `--fill-bar-alt` across the head of the card), `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__actions` with one large primary key and at most one large secondary key, which wrap under each other when the type is wide. Once, and only on the home view.\n- `.ds-page-header`: the head of an inner page, on the left page under the breadcrumb: `.ds-page-header__copy` with `.ds-page-header__title` (24px bold) and one `.ds-page-header__text` line, `.ds-page-header__actions` with at most two keys, and a double rule beneath.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, lists, `code`, links. `.ds-prose__lead` is a larger opening line.\n- `.ds-link`: text link; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for breadcrumbs, footer and meta links. `.ds-links` is a wrapping row.\n- `.ds-button`: a matte key, 28px high. `.ds-button--secondary` the paper-coloured key; `.ds-button--danger` the key in `--color-danger` for a destructive action; `.ds-button--large` the 38px key of the hero card; `.ds-button--small` a 20px key. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-button__icon` is a 16px glyph. `.ds-buttons` is a row.\n- `.ds-form`: labels above fields. `.ds-form__row` holds a `.ds-form__label` and one control; `.ds-form__pair` sets two rows side by side. `.ds-form__input` and `.ds-form__textarea` are inset fields, `.ds-form__select` a paper key. `is-error` with `.ds-form__error`; `.ds-form__hint`; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` under a rule, where `.ds-form__actions-end` pushes the destructive key to the right edge.\n- `.ds-table`: ledger ruling without a frame: a heavy rule above the `.ds-table__head`, hairlines between rows. `.ds-table__row` with `is-first`, `is-alt` and `is-current` (the marked line, in the notice colour); `.ds-table__cell`, `.ds-table__cell--name` for the bold leading column with a `.ds-table__link`, `is-numeric` for right-aligned figures.\n- `.ds-list`: ruled lines: `.ds-list__item` with an optional `.ds-list__icon` tile, `.ds-list__body` (`.ds-list__title`, `.ds-list__meta`) and a badge at the right.\n- `.ds-panel`: a card pasted on the page: `.ds-panel__title` strip, `.ds-panel__body` with `.ds-panel__text` or a `.ds-panel__facts` list of `.ds-panel__fact` lines (`.ds-panel__term` left, `.ds-panel__value` right), then a row of keys.\n- `.ds-stat`: one total: `.ds-stat__value` (24px bold slab) over a `.ds-stat__label`. Four of them make the `.ds-stats` row, under a heavy rule and over a hairline, parted by hairlines; `is-first` on the first.\n- `.ds-grid`: four `.ds-grid__cell` shelves, two to a line, each a bound volume in `--color-fill-1` (`.ds-grid__cell--2`, `--3`, `--4` for the other fills) with a darker spine at its left. On it a pasted `.ds-grid__label` (`.ds-grid__title` link, `.ds-grid__text`), then `.ds-grid__count` and `.ds-grid__note` in `--color-inverse-text`.\n- `.ds-tabs`: divider tabs, right-aligned on the top edge of the right page: `.ds-tabs__tab`, the `is-current` one in the paper colour.\n- `.ds-badge`: a small label for a count or a word. `.ds-badge--count` is pressed in and grey, `.ds-badge--new` the marker in `--color-accent-alt`. Status labels: `.ds-badge--success`, `.ds-badge--warning` (dark text) and `.ds-badge--danger`. `.ds-badges` is a row.\n- `.ds-sidebar`: an address-book block on a page: `.ds-sidebar__title` over a heavy rule, `.ds-sidebar__list` of ruled `.ds-sidebar__item` lines, each a link at the left and `.ds-sidebar__meta` at the right.\n- `.ds-notice`: a note pasted on the page; `.ds-notice__title` the bold lead-in; `.ds-notice--error` for errors. A link inside a notice takes the notice's own text colour and an underline. `.ds-notices` wraps several.\n- `.ds-pagination`: separate small paper keys, `.ds-pagination__link`; `is-current` takes the bar colour, `is-disabled` is flat.\n- `.ds-breadcrumb`: a small trail at the head of the left page, with `.ds-breadcrumb__sep` and `.ds-breadcrumb__current`.\n- `.ds-dialog`: a sheet with a heavy frame: `.ds-dialog__title` strip, `.ds-dialog__body` with `.ds-dialog__heading` (the question, in the slab face) and `.ds-dialog__text`, and `.ds-dialog__actions` with the confirming key last. `.ds-dialog__backdrop` is the dimmed part of the page it lies on.\n- `.ds-empty`: a well sunk into the paper with `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one secondary key.\n- `.ds-footer`: one line on the page texture under the desk: `.ds-footer__links` at the left, `.ds-footer__note` at the right.\n- `.ds-switch`: glossy sliding ON/OFF switch over a checkbox (`.ds-switch__track`, inset, with a raised knob), set as rows of a `.ds-switches` list (`.ds-switches__row`, `.ds-switches__name`). Here: the Reminders row of the settings form.\n- `.ds-progress`: inset `` bar with a glossy fill and a `.ds-progress__label` line. Here: the facts panel of a loan.\n- `.ds-tooltip`: `?` key with a dark glossy bubble and arrow (`.ds-tooltip__trigger`, `.ds-tooltip__bubble`) shown on hover or focus. Here: on the \"Was due\" term.\n- `.ds-accordion`: `
` help list with glossy bar headings (`.ds-accordion__item`, `__head`, `__body`). Here: the right page of the settings spread.\n- `.ds-menu`: popover list with an arrow, hanging from a toolbar button (`
`, `.ds-menu__button`, `.ds-menu__list`, `.ds-menu__item`). Here: the header toolbar of the loans page.\n\n## Never\n\n- `content-width <= 1000px`: everything stays inside the book.\n- `row-gap <= 10px`: lines of a list or a table touch.\n- `font-size <= 36px`: the hero headline is the largest text.\n- `font-size >= 12px`: meta text is the smallest.\n- `font-weight >= 300`: light headlines stop at 300.\n- `font-families <= 2`: one sans-serif and a monospace.\n- `line-height <= 1.55`: body text is set at 1.5.\n- `underlined-links <= 10%`: links are coloured, not underlined, until hovered.\n- `letter-spacing <= 1px`: only small capital titles are tracked.\n- `border-radius <= 20px`: the largest containers are 20px; nothing is rounder than the first structure's large key.\n- `border-width <= 1px`: every edge is a hairline.\n- `box-shadow-blur <= 20px`: the dialog's 20px shadow is the widest.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. New content is a block on one of the two pages, under a `.ds-book__title`; if a page is full, the subject gets another divider and another view, never a third column or a block outside the book. A thing pasted on the paper (a card, a label, a note) takes `--color-surface` or `--color-notice`, `--radius-panel` and `--shadow-panel`; a thing ruled on the paper (a list, a table, totals) takes hairlines in `--color-border` and one heavy rule above. Keys stay matte. Do not add glossy two-tone gradients, wide soft shadows, large radii, a third type family or new colours.\n", "components.css": ":root {\n --size-page: 1000px;\n --size-nav: 58px;\n --size-search: 190px;\n --size-pill: 20px;\n --size-control: 28px;\n --size-control-large: 38px;\n --size-icon: 16px;\n --size-glyph: 22px;\n --size-tab: 30px;\n --size-thumb: 34px;\n --size-well: 44px;\n --size-dialog: 320px;\n --size-hair: 1px;\n --space-1: 3px;\n --space-2: 6px;\n --space-3: 10px;\n --space-4: 14px;\n --space-5: 22px;\n --space-6: 30px;\n --space-7: 44px;\n}\n\n/* shell: a toolbar across the window, under it the desk with one open book on it, the page texture below */\n.ds-page {\n min-width: var(--size-page);\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after { box-sizing: border-box; }\n.ds-page__wrap {\n width: var(--size-page);\n margin: 0 auto;\n}\n.ds-page__desk {\n padding: var(--space-6) 0 var(--space-7);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse) 55%, var(--color-shadow));\n background: var(--fill-inverse);\n box-shadow: inset 0 var(--space-2) var(--space-2) calc(var(--space-2) * -1) color-mix(in srgb, var(--color-shadow) 70%, transparent), 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\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/* book: a cover with two pages lying open on it; divider tabs stand on the top edge of the right page */\n.ds-book {\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 22%, var(--color-shadow));\n border-radius: var(--radius-page);\n background: color-mix(in srgb, var(--color-inverse) 62%, var(--color-shadow));\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 18%, transparent), var(--shadow-dialog);\n}\n.ds-book--tabbed { padding-top: var(--space-2); }\n.ds-book__spread {\n display: flex;\n align-items: stretch;\n}\n.ds-book__page {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n min-width: 0;\n padding: var(--space-5);\n border-radius: var(--radius-panel) 0 0 var(--radius-panel);\n background: linear-gradient(to left, color-mix(in srgb, var(--color-shadow) 12%, transparent) 0, transparent var(--space-5)), var(--color-canvas);\n box-shadow: var(--shadow-panel);\n}\n.ds-book__page--right {\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 24%, var(--color-canvas));\n border-radius: 0 var(--radius-panel) var(--radius-panel) 0;\n background: linear-gradient(to right, color-mix(in srgb, var(--color-shadow) 12%, transparent) 0, transparent var(--space-5)), var(--color-canvas);\n}\n.ds-book__page > * { flex: 0 0 auto; }\n.ds-book__title {\n margin: var(--space-5) 0 var(--space-2);\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-book__title.is-first { margin-top: 0; }\n.ds-book__block { margin: var(--space-4) 0 0; }\n.ds-book__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-book__rest {\n flex: 1 1 auto;\n min-height: var(--space-5);\n margin: var(--space-5) 0 0;\n background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--space-5) - var(--size-hair)), var(--color-border) calc(var(--space-5) - var(--size-hair)), var(--color-border) var(--space-5));\n}\n.ds-book__folio {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n text-align: center;\n}\n\n/* nav: the application toolbar, a glyph over a word for each part, the current one pressed in */\n.ds-nav {\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n background: var(--fill-bar);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n color: var(--color-bar-text);\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n width: var(--size-page);\n height: var(--size-nav);\n margin: 0 auto;\n}\n.ds-brand {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-bar-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n padding: var(--space-1);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 60%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n text-transform: var(--heading-transform);\n}\n.ds-nav__items {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__item {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-1);\n min-width: calc(var(--size-nav) + var(--space-4));\n height: calc(var(--size-nav) - var(--space-3));\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__glyph {\n flex: 0 0 auto;\n width: var(--size-glyph);\n height: var(--size-glyph);\n}\n.ds-nav__item:hover,\n.ds-nav__item.is-hover { background: color-mix(in srgb, var(--color-bar-text) 14%, transparent); }\n.ds-nav__item.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__item[href=\"#desk\"],\n.ds-page:has(#desk:target) .ds-nav__item[href=\"#desk\"],\n.ds-page:has(#loans:target) .ds-nav__item[href=\"#loans\"],\n.ds-page:has(#returned:target) .ds-nav__item[href=\"#loans\"],\n.ds-page:has(#loan:target) .ds-nav__item[href=\"#loans\"],\n.ds-page:has(#settings:target) .ds-nav__item[href=\"#settings\"] {\n border-color: color-mix(in srgb, var(--color-shadow) 40%, transparent);\n background: color-mix(in srgb, var(--color-shadow) 26%, transparent);\n box-shadow: var(--shadow-control-pressed), 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n}\n.ds-nav__item:focus-visible,\n.ds-nav__item.is-focus { outline: var(--focus-ring); }\n.ds-nav__tools {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 0 auto;\n}\n.ds-nav__search { width: var(--size-search); }\n.ds-nav__user {\n white-space: nowrap;\n color: var(--color-bar-text);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__user:hover,\n.ds-nav__user.is-hover { text-decoration: var(--link-decoration-hover); }\n\n/* hero: an index card clipped to the head of the first page: a ruled top, title, one line, the main key */\n.ds-hero {\n position: relative;\n padding: var(--space-5) var(--space-5) var(--space-4);\n border-top: var(--border-width-strong) var(--border-style) var(--color-accent);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-hero::before {\n content: \"\";\n position: absolute;\n top: calc(var(--space-3) * -1);\n right: var(--space-6);\n width: var(--space-3);\n height: var(--space-6);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n box-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-shadow) 25%, transparent);\n}\n.ds-hero__kicker {\n margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);\n padding: var(--space-1) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-hero__title {\n margin: 0 0 var(--space-2);\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}\n.ds-hero__lead {\n margin: 0 0 var(--space-4);\n color: var(--color-text);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* page header: the head of an inner page of the book, title and one line, keys at the right, a double rule under it */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4);\n margin: var(--space-2) 0 var(--space-4);\n padding: 0 0 var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n box-shadow: 0 var(--space-1) 0 calc(var(--size-hair) * -1) var(--color-canvas), 0 var(--space-1) 0 var(--color-border-strong);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* stats: the totals of the ledger, four figures in one ruled box, two to a line */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n margin: var(--space-5) 0 0;\n padding: 0;\n border-top: var(--border-width-strong) var(--border-style) var(--color-heading);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n list-style: none;\n}\n.ds-stat {\n min-width: 0;\n padding: var(--space-3);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat.is-first {\n border-left: 0;\n padding-left: 0;\n}\n.ds-stat__value {\n display: block;\n color: var(--color-heading);\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}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* grid: four shelves as bound volumes, each a block of colour with a paper label pasted on */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-fill-1) 60%, var(--color-shadow));\n border-radius: var(--radius-control) var(--radius-page) var(--radius-page) var(--radius-control);\n background-color: var(--color-fill-1);\n background-image: linear-gradient(to right, color-mix(in srgb, var(--color-shadow) 30%, transparent) 0, color-mix(in srgb, var(--color-shadow) 30%, transparent) var(--space-2), color-mix(in srgb, var(--color-canvas) 22%, transparent) var(--space-2), transparent var(--space-3), transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-canvas) 14%, transparent) 0, transparent 50%, color-mix(in srgb, var(--color-shadow) 14%, transparent) 100%);\n box-shadow: var(--shadow-control);\n color: var(--color-inverse-text);\n}\n.ds-grid__cell--2 {\n border-color: color-mix(in srgb, var(--color-fill-2) 60%, var(--color-shadow));\n background-color: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n border-color: color-mix(in srgb, var(--color-fill-3) 60%, var(--color-shadow));\n background-color: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n border-color: color-mix(in srgb, var(--color-fill-4) 60%, var(--color-shadow));\n background-color: var(--color-fill-4);\n}\n.ds-grid__label {\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 30%, var(--color-surface));\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-shadow) 30%, transparent);\n}\n.ds-grid__title {\n display: block;\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__title:hover,\n.ds-grid__title.is-hover { color: var(--color-link-hover); }\n.ds-grid__text {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-grid__count {\n margin: var(--space-3) 0 0;\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 text-shadow: var(--shadow-text);\n}\n.ds-grid__note {\n font-size: var(--text-small);\n opacity: 0.85;\n text-shadow: var(--shadow-text);\n}\n\n/* list: ledger lines, a thumb tile, title and meta, a label at the right */\n.ds-list {\n margin: 0;\n padding: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__icon {\n flex: 0 0 auto;\n width: var(--size-thumb);\n height: var(--size-thumb);\n padding: var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-heading);\n font-size: var(--text-h3);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover { color: var(--color-link-hover); }\n.ds-list__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* table: ledger ruling, a heavy rule above the head, hairlines between entries, no frame */\n.ds-table {\n width: 100%;\n border-top: var(--border-width-strong) var(--border-style) var(--color-heading);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n border-collapse: separate;\n border-spacing: 0;\n}\n.ds-table__head {\n padding: var(--space-2) var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-align: left;\n text-transform: var(--ui-transform);\n}\n.ds-table__cell {\n padding: var(--space-2) var(--space-2);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface);\n color: var(--color-text);\n vertical-align: middle;\n}\n.ds-table__row.is-first .ds-table__cell { border-top: 0; }\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__row.is-current .ds-table__cell { background: var(--color-notice); color: var(--color-notice-text); }\n.ds-table__cell--name { color: var(--color-heading); font-weight: var(--weight-bold); }\n.ds-table__row.is-current .ds-table__cell--name { color: var(--color-notice-text); }\n.ds-table__link {\n color: inherit;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table__link:hover,\n.ds-table__link.is-hover { color: var(--color-link-hover); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n\n/* panel: a card pasted onto the page, a title strip and ruled lines of fact */\n.ds-panel {\n margin: 0;\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n}\n.ds-panel__body { padding: var(--space-4); }\n.ds-panel__text { margin: 0 0 var(--space-3); }\n.ds-panel__facts {\n margin: 0 0 var(--space-4);\n padding: 0;\n}\n.ds-panel__fact {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__term { color: var(--color-text-muted); }\n.ds-panel__value {\n margin: 0;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n\n/* tabs: divider tabs standing on the top edge of the right page */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n gap: var(--space-1);\n height: var(--size-tab);\n margin: 0;\n padding: 0 var(--space-5);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n height: calc(var(--size-tab) - var(--space-2));\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 35%, var(--color-bar-alt));\n border-bottom: 0;\n border-radius: var(--radius-page) var(--radius-page) 0 0;\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 50%, transparent);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: calc(var(--size-tab) - var(--space-2));\n text-decoration: none;\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { color: var(--color-link-hover); }\n.ds-tabs__tab.is-current {\n height: var(--size-tab);\n border-color: color-mix(in srgb, var(--color-shadow) 24%, var(--color-canvas));\n background: var(--color-canvas);\n color: var(--color-heading);\n line-height: var(--size-tab);\n}\n\n/* sidebar: an address-book block, a small heading and ruled names */\n.ds-sidebar { margin: var(--space-5) 0 0; }\n.ds-sidebar__title {\n margin: 0;\n padding: 0 0 var(--space-1);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-heading-alt);\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}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-align: right;\n}\n\n/* pagination: page numbers as plain keys, the current one inked in */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: block;\n min-width: calc(var(--size-pill) + var(--space-1));\n height: calc(var(--size-pill) + var(--space-1));\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: calc(var(--size-pill) + var(--space-1) - var(--border-width) - var(--border-width));\n text-align: center;\n text-decoration: none;\n}\n.ds-pagination__link--prev, .ds-pagination__link--next { display: grid; place-items: center; }\n.ds-pagination__link--prev::before, .ds-pagination__link--next::before { content: \"\"; box-sizing: border-box; width: calc(var(--text-small) * 0.5); height: calc(var(--text-small) * 0.5); border-right: max(var(--border-width), calc(var(--text-small) * 0.12)) solid currentColor; border-bottom: max(var(--border-width), calc(var(--text-small) * 0.12)) solid currentColor; transform: translateX(-25%) rotate(-45deg); }\n.ds-pagination__link--prev::before { transform: translateX(25%) rotate(135deg); }\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { color: var(--color-link-hover); }\n.ds-pagination__link.is-current {\n border-color: color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n background: var(--color-bar);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-bar-text);\n}\n.ds-pagination__link.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n\n/* form: labels above the fields, fields the width of the page */\n.ds-form { margin: 0; }\n.ds-form__row { margin: 0 0 var(--space-3); }\n.ds-form__pair {\n display: flex;\n gap: var(--space-4);\n}\n.ds-form__pair .ds-form__row {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__label {\n display: block;\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n display: block;\n width: 100%;\n margin: 0;\n padding: var(--space-1) var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-top-color: color-mix(in srgb, var(--color-input-border) 70%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-input);\n box-shadow: inset 0 var(--size-hair) var(--space-1) color-mix(in srgb, var(--color-shadow) 10%, transparent);\n color: var(--color-input-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-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__select {\n border-color: var(--color-border-strong);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-form__textarea {\n height: calc(var(--size-control) * 2 + var(--space-3));\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder { color: var(--color-disabled-text); opacity: 1; }\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\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-error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n}\n.ds-form__error {\n margin: var(--space-1) 0 0;\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-form__checkbox { margin: 0; }\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: var(--space-4) 0 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-button.ds-form__actions-end { margin-left: auto; }\n\n/* dialog: a sheet of paper with a title strip, lying on a dimmed part of the page */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-5) var(--space-4);\n border-radius: var(--radius-panel);\n background: var(--color-overlay);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n border: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-shadow) 45%, var(--color-bar-alt));\n border-radius: var(--radius-page);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: calc(var(--radius-page) - var(--border-width-strong)) calc(var(--radius-page) - var(--border-width-strong)) 0 0;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n}\n.ds-dialog__body { padding: var(--space-4); }\n.ds-dialog__heading {\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-bold);\n line-height: var(--line-heading);\n}\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 0 0 calc(var(--radius-page) - var(--border-width-strong)) calc(var(--radius-page) - var(--border-width-strong));\n background: var(--color-surface-alt);\n}\n\n/* footer: on the page texture under the desk, links left, a note right */\n.ds-footer {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-5);\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-5) 0 var(--space-6);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-footer__links {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__note { margin: 0; }\n\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 { margin-top: 0; font-size: var(--text-h1); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); }\n.ds-prose > :first-child { margin-top: 0; }\n.ds-prose > :last-child { margin-bottom: 0; }\n.ds-prose p { margin: 0 0 var(--space-3); }\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-3);\n padding: 0 0 0 var(--space-5);\n}\n.ds-prose li { margin: 0 0 var(--space-1); }\n.ds-prose strong { color: var(--color-heading); font-weight: var(--weight-bold); }\n.ds-prose a { color: var(--color-link); text-decoration: var(--link-decoration); }\n.ds-prose a:hover { color: var(--color-link-hover); text-decoration: var(--link-decoration-hover); }\n.ds-prose code {\n padding: 0 var(--space-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-control) - var(--size-hair));\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose__lead {\n color: var(--color-heading);\n font-size: var(--text-large);\n}\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n}\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 { color: var(--color-link-visited); }\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 { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n\n/* buttons: convex keys with a bright upper edge, text engraved */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n}\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 60%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: linear-gradient(var(--color-button), var(--color-button));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button--secondary {\n border-color: var(--color-border-strong);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: color-mix(in srgb, var(--color-border-strong) 70%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: linear-gradient(var(--color-button-secondary), var(--color-button-secondary)); }\n.ds-button--danger {\n border-color: color-mix(in srgb, var(--color-danger) 60%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 70%, var(--color-canvas)) 0, var(--color-danger) 60%, color-mix(in srgb, var(--color-danger) 84%, var(--color-shadow)) 100%);\n color: var(--color-accent-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 60%, var(--color-canvas)) 0, color-mix(in srgb, var(--color-danger) 92%, var(--color-canvas)) 60%, var(--color-danger) 100%);\n color: var(--color-accent-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: linear-gradient(var(--color-danger), var(--color-danger)); }\n.ds-button--large {\n height: var(--size-control-large);\n padding: 0 var(--space-5);\n border-radius: calc(var(--radius-control) + var(--space-1));\n font-size: var(--text-large);\n}\n.ds-button--small {\n height: var(--size-pill);\n padding: 0 var(--space-3);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border-strong);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n cursor: default;\n}\n.ds-button__icon {\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n\n/* badge: a small label, glossy, in a status colour where it marks a state */\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-badge {\n display: inline-block;\n min-width: var(--size-pill);\n padding: 0 var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-accent-text) 35%, transparent), 0 var(--size-hair) var(--size-hair) color-mix(in srgb, var(--color-shadow) 35%, transparent);\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 line-height: var(--line-body);\n text-align: center;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n}\n.ds-badge--count {\n background: color-mix(in srgb, var(--color-bar-alt) 80%, var(--color-shadow));\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-bar-text);\n}\n.ds-badge--new {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-canvas)) 0, var(--color-accent-alt) 100%);\n color: var(--color-heading);\n text-shadow: none;\n}\n.ds-badge--success {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-success) 72%, var(--color-canvas)) 0, var(--color-success) 70%, color-mix(in srgb, var(--color-success) 88%, var(--color-shadow)) 100%);\n}\n.ds-badge--warning {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-warning) 72%, var(--color-canvas)) 0, var(--color-warning) 70%, color-mix(in srgb, var(--color-warning) 88%, var(--color-shadow)) 100%);\n color: var(--color-heading);\n text-shadow: none;\n}\n.ds-badge--danger {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 72%, var(--color-canvas)) 0, var(--color-danger) 70%, color-mix(in srgb, var(--color-danger) 88%, var(--color-shadow)) 100%);\n}\n\n/* notice */\n.ds-notices { margin: 0; }\n.ds-notice {\n margin: 0 0 var(--space-3);\n padding: var(--space-2) var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice) 78%, var(--color-notice-text));\n border-radius: var(--radius-control);\n background: var(--color-notice);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n color: var(--color-notice-text);\n}\n.ds-notices > .ds-notice:last-child { margin-bottom: 0; }\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice .ds-link {\n color: inherit;\n text-decoration: underline;\n}\n.ds-notice--error {\n border-color: color-mix(in srgb, var(--color-danger-surface) 60%, var(--color-danger));\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n\n/* breadcrumb: a small trail at the head of a page of the book */\n.ds-breadcrumb {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__sep { color: var(--color-text-muted); }\n.ds-breadcrumb__current { color: var(--color-heading); font-weight: var(--weight-bold); }\n\n/* empty state: a well sunk into the paper */\n.ds-empty {\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top-color: var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n box-shadow: inset 0 var(--size-hair) var(--space-1) color-mix(in srgb, var(--color-shadow) 12%, transparent), 0 var(--size-hair) 0 var(--color-canvas);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-well);\n height: var(--size-well);\n margin: 0 0 var(--space-1);\n color: var(--color-border-strong);\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 line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* Period components: switch, progress, tooltip, carousel, avatar, accordion, menu. Tokens only. */\n.ds-switch { display: inline-flex; flex: none; align-items: center; cursor: pointer; }\n.ds-switch input { position: absolute; opacity: 0; width: var(--size-hair); height: var(--size-hair); }\n.ds-switch__track { position: relative; display: block; flex: none; width: calc(var(--size-control) * 2); height: var(--size-pill); background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); }\n.ds-switch__track::before { content: \"OFF\"; position: absolute; top: 0; right: var(--space-2); line-height: var(--size-pill); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-text-muted); }\n.ds-switch__track::after { content: \"\"; position: absolute; top: var(--size-hair); left: var(--size-hair); width: var(--size-control); height: var(--size-icon); background: var(--fill-button-secondary); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-switch input:checked + .ds-switch__track { background: var(--fill-button); border-color: var(--color-button); }\n.ds-switch input:checked + .ds-switch__track::before { content: \"ON\"; left: var(--space-3); right: auto; color: var(--color-button-text); text-shadow: var(--shadow-text); }\n.ds-switch input:checked + .ds-switch__track::after { left: calc(var(--size-control) + var(--space-1)); }\n.ds-switch input:focus-visible + .ds-switch__track { outline: var(--focus-ring); }\n.ds-switches { width: 100%; max-width: calc(var(--size-control) * 11); margin: var(--space-2) 0; padding: 0; list-style: none; background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }\n.ds-switches__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: calc(var(--size-control) + var(--space-2)); padding: var(--space-1) var(--space-3); }\n.ds-switches__row + .ds-switches__row { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-switches__name { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-bold); color: var(--color-text); }\n\n.ds-progress { display: block; width: 100%; max-width: calc(var(--size-control) * 10); height: var(--size-icon); margin: var(--space-2) 0 var(--space-1); padding: 0; appearance: none; -webkit-appearance: none; background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); overflow: hidden; }\n.ds-progress::-webkit-progress-bar { background: var(--fill-input); box-shadow: var(--shadow-control-pressed); }\n.ds-progress::-webkit-progress-value { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress::-moz-progress-bar { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress__label { display: block; margin: 0; font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); color: var(--color-text-muted); }\n\n.ds-tooltip { position: relative; display: inline-flex; flex: none; align-items: center; margin-left: var(--space-1); vertical-align: middle; }\n.ds-tooltip__trigger { display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon); height: var(--size-icon); padding: 0; background: var(--fill-button-secondary); color: var(--color-button-secondary-text); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); line-height: 1; cursor: help; }\n.ds-tooltip__bubble { position: absolute; left: 50%; bottom: calc(100% + var(--space-3)); z-index: 5; width: max-content; max-width: calc(var(--size-control) * 8); padding: var(--space-2) var(--space-3); transform: translateX(-50%); visibility: hidden; opacity: 0; background: var(--fill-inverse); color: var(--color-inverse-text); border-radius: var(--radius-control); box-shadow: var(--shadow-control), var(--shadow-dialog); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); line-height: var(--line-body); letter-spacing: 0; text-align: left; text-transform: none; text-shadow: var(--shadow-text); white-space: normal; }\n.ds-tooltip__bubble::after { content: \"\"; position: absolute; left: 50%; top: 100%; width: var(--space-3); height: var(--space-3); margin: calc(var(--space-3) / -2) 0 0 calc(var(--space-3) / -2); transform: rotate(45deg); background: var(--color-inverse); }\n.ds-tooltip:hover .ds-tooltip__bubble, .ds-tooltip:focus-within .ds-tooltip__bubble { visibility: visible; opacity: 1; }\n\n.ds-accordion { margin: var(--space-3) 0 0; border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-control); overflow: hidden; }\n.ds-accordion__item + .ds-accordion__item { border-top: var(--border-width) var(--border-style) var(--color-border-strong); }\n.ds-accordion__head { display: block; padding: var(--space-2) var(--space-3); background: var(--fill-bar-alt); color: var(--color-bar-alt-text); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-bold); cursor: pointer; list-style: none; text-shadow: var(--shadow-text); }\n.ds-accordion__head::-webkit-details-marker { display: none; }\n.ds-accordion__head::before { content: \"\"; display: inline-block; width: 0; height: 0; margin-right: calc(var(--space-4) - calc(var(--text-ui) * 0.4)); border: calc(var(--text-ui) * 0.3) solid transparent; border-left: calc(var(--text-ui) * 0.4) solid currentColor; border-right-width: 0; vertical-align: calc(var(--text-ui) * 0.05); }\n.ds-accordion__item[open] > .ds-accordion__head::before { transform: rotate(90deg); }\n.ds-accordion__item[open] > .ds-accordion__head { border-bottom: var(--border-width) var(--border-style) var(--color-border-strong); }\n.ds-accordion__body { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-control-pressed); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--line-body); }\n\n.ds-menu { position: relative; display: inline-block; flex: none; }\n.ds-menu__button { display: inline-flex; align-items: center; height: var(--size-control); padding: 0 var(--space-3); background: var(--fill-button-secondary); color: var(--color-button-secondary-text); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-control); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-ui); cursor: pointer; list-style: none; }\n.ds-menu__button::-webkit-details-marker { display: none; }\n.ds-menu__button::after { content: \"\"; flex: none; width: 0; height: 0; border: calc(var(--text-ui) * 0.3) solid transparent; border-top: calc(var(--text-ui) * 0.36) solid currentColor; border-bottom-width: 0; margin-left: var(--space-2); }\n.ds-menu__button:hover { box-shadow: var(--shadow-control-hover); }\n.ds-menu[open] > .ds-menu__button { box-shadow: var(--shadow-control-pressed); }\n.ds-menu__list { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 6; min-width: calc(var(--size-control) * 6); margin: 0; padding: var(--space-1) 0; list-style: none; background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-dialog); text-align: left; }\n.ds-menu__list::before { content: \"\"; position: absolute; right: var(--space-4); bottom: 100%; width: var(--space-3); height: var(--space-3); margin-bottom: calc(var(--space-3) / -2 + var(--size-hair)); transform: rotate(45deg); background: var(--color-surface); border-top: var(--border-width) var(--border-style) var(--color-border-strong); border-left: var(--border-width) var(--border-style) var(--color-border-strong); }\n.ds-menu__item { position: relative; display: block; padding: var(--space-2) var(--space-4); color: var(--color-text); font-family: var(--font-ui); font-size: var(--text-ui); text-decoration: none; white-space: nowrap; }\n.ds-menu__item:hover, .ds-menu__item:focus { background: var(--fill-button); color: var(--color-button-text); text-shadow: var(--shadow-text); }\n", "specimen.html": "\n\n\n\nchronoskin, skeuomorphism lending ledger specimen\n\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n \n Find\n Marta’s ledger\n
\n
\n
\n\n
\n\n
\n
\n
\n
\n
\n

Tuesday, 14 May

\n

Three things are due back this week.

\n

Fourteen of your things are out with nine neighbours. One is a fortnight late.

\n
\n See what is out\n Open the late one\n
\n
\n
    \n
  • 14Out now
    • \n
  • 3Due this week
    • \n
  • 1Overdue
    • \n
  • 212Came back
    • \n
\n

Due back soonest

\n \n
\n All fourteen loans\n 4 of 14\n
\n
\n

1

\n
\n
\n

The shelves

\n
    \n
  • \n
    BooksCookery, gardens, maps
    \n 386 out with neighbours\n
    • \n
  • \n
    ToolsShed and workbench
    \n 244 out, 1 overdue\n
    • \n
  • \n
    KitchenPans, moulds, the mill
    \n 173 out with neighbours\n
    • \n
  • \n
    GardenPlanters, nets, canes
    \n 111 out with a neighbour\n
    • \n
\n
\n

Who has what

\n \n
\n

Reminders go out on Mondays. Change the day in settings.

\n
\n

2

\n
\n
\n
\n
\n\n
\n
\n \n
\n
\n
    \n
  1. Desk
    2. \n
  2. ›
    3. \n
  3. Loans
    4. \n
\n
\n
\n

Out now

\n

Fourteen things, the latest lent first.

\n
\n
\n
More
\n Print\n Remind all\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
ThingWithStateDays out
Bulb planterTobiasNew5
Jam pan, the large oneMargitDue soon8
A year of preservesOdileDue soon12
Apple pressOdileIn hand19
Maps of the north coastMargitIn hand23
Hedge trimmerAnselmOverdue32
\n
\n
    \n
    • \n
  • 1
    • \n
  • 2
    • \n
  • 3
    • \n
    • \n
\n 1 to 6 of 14\n
\n
\n

3

\n
\n
\n

The marked line

\n
\n

Hedge trimmer

\n
\n
\n
With
Anselm, at the mill
\n
Lent on
12 April
\n
Was due
30 April
\n
Reminders sent
2
\n
\n
\n Mark as returned\n Open the entry\n
\n
\n
\n

What the labels mean

\n
    \n
  • In handOut, and not due for a week or more
    In hand
    • \n
  • Due soonDue back within seven days
    Due soon
    • \n
  • OverduePast its day; a reminder goes each Monday
    Overdue
    • \n
\n
\n
\n 14\n Lent today\n In hand\n Due soon\n Overdue\n
\n
\n
\n

4

\n
\n
\n
\n
\n\n
\n
\n \n
\n
\n
    \n
  1. Desk
    2. \n
  2. ›
    3. \n
  3. Loans
    4. \n
  4. ›
    5. \n
  5. Returned
    6. \n
\n
\n
\n

Returned in May

\n

What has come back since the first of the month.

\n
\n
\n See what is out\n
\n
\n
\n \n

Nothing has come back yet

\n

Three things are due this week. When one comes home, mark it and it is written here.

\n Mark something as returned\n
\n
\n

5

\n
\n
\n

Came back in April

\n
    \n
  • \n \n
    Bread tins, a pairOdile · out 9 days · back 27 April
    \n Returned\n
    • \n
  • \n \n
    The orchard yearTobias · out 30 days · back 21 April
    \n Returned\n
    • \n
  • \n \n
    Spirit levelMargit · out 4 days · back 11 April
    \n Returned\n
    • \n
  • \n \n
    Fruit nettingAnselm · out 41 days · back 3 April
    \n Late\n
    • \n
\n
\n Earlier months\n 4 of 212 since the first page\n
\n
\n

6

\n
\n
\n
\n
\n\n
\n
\n \n
\n
\n
    \n
  1. Desk
    2. \n
  2. ›
    3. \n
  3. Loans
    4. \n
  4. ›
    5. \n
  5. Hedge trimmer
    6. \n
\n
\n
\n

Hedge trimmer

\n

With Anselm since 12 April. Fourteen days late.

\n
\n
\n Mark as returned\n
\n
\n
\n

The entry

\n

Lent over the wall on a Saturday, with the long lead and the blade guard. Anselm meant to do the mill hedge the same week; the rain had other plans. The other things he has are not late.

\n

What went with it

\n
    \n
  • The long lead, on its reel
    • \n
  • The blade guard
    • \n
  • A pair of gauntlets, which are his to keep
    • \n
\n

How to tell it is yours

\n

The number scratched under the handle is HT-2204, and the lead has a blue plug.

\n
\n
\n

\n All loans\n Returned\n Who has what\n Reminder day\n Print this entry\n

\n
\n
\n

7

\n
\n
\n

The facts

\n
\n

Tools, shelf two

\n
\n
\n
With
Anselm, at the mill
\n
Lent on
12 April
\n
Was dueA thing is due a fortnight after it is lent.
30 April
\n
State
Overdue
\n
\n 66%

Second of three reminders sent

\n
\n Remind him today\n Give a week more\n
\n
\n
\n

What has happened

\n
    \n
  • Second reminder sentMonday 13 May, by letter
    2
    • \n
  • First reminder sentMonday 6 May, by letter
    1
    • \n
  • Due date passedTuesday 30 April
    Overdue
    • \n
  • Lent to AnselmSaturday 12 April, for eighteen days
    Lent
    • \n
\n
\n

8

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Desk
    2. \n
  2. ›
    3. \n
  3. Settings
    4. \n
\n
\n
\n

Settings

\n

How the ledger is kept and when it writes to people.

\n
\n
\n Back to the desk\n
\n
\n
\n

Reminders are on. One letter each Monday for anything past its day.

\n

Not saved. Check the address below and try again.

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

This address is missing its ending.

\n
\n
\n \n \n

Kept short. The list of things is added under it.

\n
\n
\n \n
\n
\n Reminders\n
  • Send reminders
  • By post as well
\n
\n
\n \n Cancel\n \n \n
\n
\n
\n

9

\n
\n
\n

Empty the ledger

\n
\n

The key on the facing page strikes out every entry, in hand or returned. It asks once first.

\n
\n
\n
\n

Empty the ledger

\n
\n

Strike out all 226 entries?

\n

Fourteen things are still out. Their lines go too, and nobody is reminded again.

\n
\n
\n Keep the ledger\n Empty it\n
\n
\n
\n
\n

Lately changed

\n \n
\n

Questions

\n
Does it work offline?

Yes. Everything is kept on your own machine.

Can I move to another computer?

Copy the library folder across and open it there.

How do I get help?

Write to us from the support page; we answer in a day.

\n
\n

10

\n
\n
\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.skeuomorphism.app.s06.p08.t04.u11\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"skeuomorphism\",\n \"years\": [\n 2009,\n 2013\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-sk-684b\",\n \"short\": \"v1-sk-684b\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #d9dab9;\n --color-canvas: #fdfbdc;\n --color-surface: #fffef0;\n --color-surface-alt: #f6f3d2;\n --color-surface-strong: #ece7b7;\n --color-bar: #505820;\n --color-bar-text: #fdfbdc;\n --color-bar-alt: #dad58c;\n --color-bar-alt-text: #3b3d12;\n --color-inverse: #402000;\n --color-inverse-text: #fbf3d0;\n --color-text: #4a4a30;\n --color-text-muted: #7f7e58;\n --color-heading: #2c2d10;\n --color-heading-alt: #46501a;\n --color-link: #7a1436;\n --color-link-quiet: #66673c;\n --color-link-visited: #6b3a55;\n --color-link-hover: #a81e4a;\n --color-link-active: #4c0a20;\n --color-border: #e0dcae;\n --color-border-strong: #bdb97c;\n --color-border-muted: #efecc8;\n --color-accent: #8a8a08;\n --color-accent-text: #ffffff;\n --color-accent-alt: #e0c400;\n --color-fill-1: #505820;\n --color-fill-2: #7a1436;\n --color-fill-3: #8a6a14;\n --color-fill-4: #5d3a1a;\n --color-button: #7a1436;\n --color-button-text: #ffffff;\n --color-button-hover-text: #fff6c8;\n --color-button-secondary: #ece8b8;\n --color-button-secondary-text: #3b3d12;\n --color-input: #fffffa;\n --color-input-text: #2c2d10;\n --color-input-border: #bdb97c;\n --color-disabled: #e6e3c2;\n --color-disabled-text: #a09e78;\n --color-danger: #c0281c;\n --color-danger-surface: #fbe6da;\n --color-success: #5f8a1e;\n --color-warning: #e0a800;\n --color-notice: #fff6a6;\n --color-notice-text: #4a4420;\n --color-focus: #c9a400;\n --color-shadow: #2a2000;\n --color-overlay: rgba(42, 32, 0, 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-ui: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: Menlo, Monaco, Consolas, monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 17px;\n --text-display: 36px;\n --text-h1: 28px;\n --text-h2: 20px;\n --text-h3: 15px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 300;\n --weight-display: 300;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\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: 1px;\n --border-style: solid;\n --radius-control: 10px;\n --radius-panel: 16px;\n --radius-pill: 16px;\n --radius-page: 20px;\n --shadow-panel: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 22%, transparent), 0 6px 14px color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 40%, transparent), 0 3px 7px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 60%, transparent), 0 4px 9px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-control-pressed: inset 0 2px 5px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 45%, transparent), 0 10px 20px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-text: 0 1px 1px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --fill-page: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h1v1H0zM3 1h1v1H3zM5 3h1v1H5zM1 4h1v1H1zM4 5h1v1H4z' fill='black' fill-opacity='.14'/%3E%3Cpath d='M2 0h1v1H2zM5 1h1v1H5zM1 2h1v1H1zM3 3h1v1H3zM0 5h1v1H0z' fill='white' fill-opacity='.06'/%3E%3C/svg%3E\"), radial-gradient(ellipse 65% 100% at 50% 0, color-mix(in srgb, white 20%, transparent) 0, transparent 100%) 0 0 / 100% 640px no-repeat, var(--color-page);\n --fill-bar: repeating-linear-gradient(0deg, color-mix(in srgb, black 10%, transparent) 0, transparent 2px, color-mix(in srgb, white 5%, transparent) 3px, transparent 5px, color-mix(in srgb, black 7%, transparent) 7px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 22%) 0, var(--color-bar) 45%, color-mix(in srgb, var(--color-bar), black 26%) 100%);\n --fill-bar-alt: repeating-linear-gradient(0deg, color-mix(in srgb, black 8%, transparent) 0, transparent 2px, color-mix(in srgb, white 7%, transparent) 4px, transparent 6px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 20%) 0, var(--color-bar-alt) 50%, color-mix(in srgb, var(--color-bar-alt), black 18%) 100%);\n --fill-inverse: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h1v1H0zM3 1h1v1H3zM5 3h1v1H5zM1 4h1v1H1zM4 5h1v1H4z' fill='black' fill-opacity='.16'/%3E%3Cpath d='M2 0h1v1H2zM5 1h1v1H5zM1 2h1v1H1zM3 3h1v1H3zM0 5h1v1H0z' fill='white' fill-opacity='.06'/%3E%3C/svg%3E\"), radial-gradient(ellipse 60% 130% at 50% 0, color-mix(in srgb, white 18%, transparent) 0, transparent 100%), var(--color-inverse);\n --fill-accent: radial-gradient(ellipse 80% 60% at 50% 0, color-mix(in srgb, white 35%, transparent) 0, transparent 100%), var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 45%) 0, color-mix(in srgb, var(--color-button), white 10%) 35%, var(--color-button) 70%, color-mix(in srgb, var(--color-button), black 22%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 58%) 0, color-mix(in srgb, var(--color-button), white 22%) 35%, color-mix(in srgb, var(--color-button), white 8%) 70%, color-mix(in srgb, var(--color-button), black 12%) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 22%) 0, var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary), black 20%) 100%);\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 30%) 0, var(--color-input) 6px);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }