{ "id": "v1-nm-4555-dr", "long_id": "v1.neumorphism.app.s04.p05.t05.u05.dr", "name": "Neumorphism tiles", "era": { "slug": "neumorphism", "code": "nm", "name": "Neumorphism", "years": [ 2019, 2021 ], "description": "Soft UI, 2019 to 2021: controls pressed out of, or into, a single pale surface by a pair of light and dark blurred shadows, with low contrast and very round corners." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "density": "roomy", "summary": "Neumorphism, or soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes only from a pair of blurred shadows, light towards the top left and dark towards the bottom right. This pack is its overview screen, the kind drawn for fitness, banking and habit apps of those years: a page built entirely from large raised tiles in rows of changing proportions, each holding one thing, a ring gauge, a set of bar meters, a small week chart or a short list. It follows the component-library form of the style: a pale blue-grey surface, near-black text in a plain grotesque at 16px with light weights, one bright blue accent, small 8px corners on controls and shallow wells.", "url": "https://chrono.skin/s/v1-nm-4555-dr", "preview_url": "https://chrono.skin/s/v1-nm-4555-dr/specimen.html", "files": { "STYLE.md": "# Neumorphism tiles\n\n## Summary\n\nNeumorphism, or soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes only from a pair of blurred shadows, light towards the top left and dark towards the bottom right. This pack is its overview screen, the kind drawn for fitness, banking and habit apps of those years: a page built entirely from large raised tiles in rows of changing proportions, each holding one thing, a ring gauge, a set of bar meters, a small week chart or a short list. It follows the component-library form of the style: a pale blue-grey surface, near-black text in a plain grotesque at 16px with light weights, one bright blue accent, small 8px corners on controls and shallow wells.\n\n## Layout\n\n- One centred column, `--size-page` (1200px) with `--space-5` (24px) side padding. Inside it the page is a stack of tile rows, and every gap, between rows and between tiles, is `--space-6` (32px). There is no page sidebar and nothing sits on the bare page except the navigation row and the head of an inner page.\n- Navigation: `.ds-nav` is a row `--size-nav` (64px) high on the bare page: the brand at the left, a raised capsule of links with icons in the middle, and a secondary button and the account disc at the right. The current link is a pill filled with the accent.\n- A row of tiles is `.ds-bento`; the modifier sets the proportions: none for two equal tiles, `.ds-bento--lead` 2 to 1, `.ds-bento--three` 5 to 4 to 3, `.ds-bento--text` 7 to 5, `.ds-bento--form` 1 to 2; `.ds-bento--start` lets the columns keep their own heights. Tiles in a row stretch to the same height. `.ds-stat` (three tiles) and `.ds-grid` (four tiles) are rows of their own.\n- Home page, top to bottom: `.ds-bento--lead` with the `.ds-hero` tile (text left, the `.ds-ring` right) beside a panel of `.ds-progress` bars; the `.ds-stat` row; the `.ds-grid` row; `.ds-bento--three` with the `.ds-list` tile, a stack of notices and a note panel, and the `.ds-sidebar` tile.\n- Inner pages have no hero. On the bare page come the `.ds-breadcrumb`, the `.ds-page-header` (title at `--text-h1` left, actions right) and, on a list page, the `.ds-tabs` capsule, in one block; then one row of two columns that keep their own heights, `.ds-bento--text` with `.ds-bento--start`: the main tile or a `.ds-page__stack` (table, pagination, a meter tile; the form; the prose) in the wide left column and a `.ds-page__stack` of smaller tiles (dialog, list, empty state, notes) in the right. `.ds-bento--form` (1 to 2) is the same with a narrow form on the left. A wide form sets pairs of short fields side by side with `.ds-form__row`.\n- Views. The specimen is one site with four views, each `
` inside `.ds-page__inner`; the navigation row and the footer stand outside them and one view shows at a time. `today` is the home view: the hero tile beside today's meters, the stat row, the week charts, then the session list, notices with the coach's note, and the plans sidebar. `sessions` is the list page: tabs, the table with pagination and the week's meters on the left, the dialog that deletes a session and the coming days on the right. `log` is the form page: the form tile on the left, small tiles and a notice on the right. `plan` is the text page: how the plan is scored, beside the empty state for races and two small tiles. The capsule fills the link of the current view with the accent, by one `:has()` rule per view next to `.ds-nav__link.is-current`; `log` marks Sessions.\n- Spacing scale: `--space-1` 4px (between links in a capsule, dot to text), `--space-2` 8px (label to control, capsule padding, between chart bars), `--space-3` 12px (ring rim, chart padding, icon to text), `--space-4` 16px (between buttons, ring to figure in a stat tile, row padding), `--space-5` 24px (tile padding, between meters, between form fields), `--space-6` 32px (every gutter, hero tile padding), `--space-7` 48px (dialog backdrop padding), `--space-8` 64px (above the footer).\n- Other sizes: `--size-ring` 208px and `--size-ring-small` 72px, `--size-bars` 80px (height of a week chart), `--size-day` 48px (the day well of a list row), `--size-brand` 36px, `--size-dialog` 440px.\n- A tile holds wells, rules, flat rows and controls, never another raised panel. The ring is the one raised thing inside a tile, and it is a control-sized knob (`--shadow-control`).\n- `--size-rule` (1px) is the weight of the rules between table and list rows; it stays when a surface part sets `--border-width` to 0.\n- Below 900px every row stacks, the grid drops to two columns, and the navigation becomes two lines: brand and tools, then the capsule across the full width. Below 560px the side padding drops to `--space-4`, the gutters to `--space-5`, the hero title takes `--text-h1`, form rows stack, and table columns marked `.ds-table__opt` are hidden so that the table never scrolls sideways. On a phone (560px and below) the capsule `.ds-nav__list` stays a full-width row of centred `.ds-nav__link` items under the brand and `.ds-nav__tools`, the current one filled with the accent, and tabs wrap and centre. In `.ds-nav__tools` a `.ds-menu` loses its caret (`.ds-menu__caret`) and its toggle shrinks to the avatar or icon.\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- Two families: `--font-heading` is a rounded geometric face (Quicksand, then Varela Round, Century Gothic and Trebuchet MS) for the brand, titles and every figure; `--font-body` and `--font-ui` are one humanist sans (Open Sans, then Segoe UI and Tahoma) for text, controls and labels. `--font-mono` is for code only.\n- Sizes: `--text-base` 15px, `--text-ui` 14px (buttons, inputs, navigation, table cells, notices, amounts), `--text-small` 12px (meta text, labels, badges, key captions), `--text-large` 18px (lead text, the card number), `--text-h3` 17px (panel and sidebar titles, pot figures), `--text-h2` 22px (stat figures, dialog title), `--text-h1` 30px (page title), `--text-display` 44px for the balance only.\n- Weights: `--weight-body` 400, `--weight-bold` and `--weight-ui` 600, `--weight-heading` and `--weight-display` 700. `--line-body` 1.5, `--line-heading` 1.35, `--line-display` 1.15.\n- Uppercase appears only on table head cells, written in the component. No tracking.\n- One surface: `--color-page`, `--color-canvas`, `--color-surface`, `--color-bar`, `--color-input` and `--color-button-secondary` are the same periwinkle (209 216 236). `--color-surface-alt` and `--color-notice` (216 224 240) are a step lighter, for hovered rows and links and for notices; `--color-surface-strong` (200 208 224) a step darker, for inline code, quiet and status badges and disabled controls.\n- The relief pair: `--color-shadow` (178 184 201) is the dark side and `--color-border-muted` (240 248 255, a bluish white) the light side of every shadow. `--color-border-muted` is used for nothing else.\n- Text is `--color-text` (50 48 52) with slate blue `--color-text-muted` and `--color-heading-alt` (53 64 104) for meta text, lead text, labels and panel titles; `--color-heading` (39 55 76) for titles and figures.\n- Each text token goes with its own fill and no other: `--color-bar-text` on `--fill-bar` (shelf, table head), `--color-bar-alt-text` on `--fill-bar-alt` (footer), `--color-inverse-text` on `--fill-inverse` (the drawn card, a code block), `--color-accent-text` on `--fill-accent` (count badge, current page), `--color-button-text` on `--fill-button` (primary button, brand key, the first round key), `--color-button-secondary-text` on `--fill-button-secondary` (secondary button, round keys, pagination keys, the current tab), `--color-input-text` on `--fill-input` (controls, stat wells, the tab groove, list initials, empty state), `--color-notice-text` on `--color-notice`, `--color-danger` on `--color-danger-surface`, `--color-text` on `--color-surface-alt` and `--color-surface-strong`.\n- `--color-accent` and `--color-button` are one magenta (203 12 159) with white text: the navigation marker, meter bars, the count badge, the current page, switches that are on. `--color-link` is violet (121 40 202), turning magenta on hover; `--color-accent-alt` (blue, 33 82 255) only marks \"scheduled\" or \"new\" as a dot.\n- `--color-fill-1` to `--color-fill-4` (magenta, blue, green, slate) colour the chip and the bar of the four pot tiles and nothing else; no text is set on them.\n- Status: `--color-success` 23 173 55, `--color-warning` 233 130 12, `--color-danger` 234 6 6, as 8px dots; `--color-success` is also the text of an amount that came in, and `--color-danger` the text of errors and of the destructive button.\n- Surface: `--border-width` is 0; `--border-width-strong` (2px) is the focus and error ring. Controls are pills: `--radius-control` and `--radius-pill` 30px; panels are tighter, `--radius-panel` 16px, and the balance card, the drawn card and the dialog take `--radius-page` 24px. `--shadow-control` is 3px offset and 6px blur, `--shadow-control-hover` 6px and 12px, `--shadow-panel` 12px and 24px, `--shadow-control-pressed` 3px and 7px inset, `--shadow-dialog` a 20px offset 60px blur dark side with a 12px light side. Two fills are gradients running to the top left: `--fill-button` (the button colour from 20% darker to 14% lighter) and `--fill-inverse` (the inverse colour to 28% lighter); every other fill is flat. `--shadow-text` is `none`. Transitions run 0.25s.\n- One-off values with no token: discs use `border-radius: 50%`; the tab groove's radius is `--radius-control` plus `--space-1`; inline code uses half of `--radius-control`; a checkbox corner is a quarter of `--size-check` at most; navigation links that are not current, card labels and stat labels are set at opacity 0.7 to 0.8 of their own text token; placeholders are `--color-input-text` at opacity 0.55; the card chip is `--color-inverse-text` at opacity 0.4.\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``; paints the surface and sets the base type. `.ds-page__inner` is the centred column; `.ds-page__stack` stacks tile rows, or tiles inside one cell of a row, 32px apart; `.ds-page__section` stacks an inner page the same way. `.ds-view` is one screen of the specimen (see Layout).\n- `.ds-bento`: one row of tiles with 32px gutters; `--lead`, `--three`, `--text` and `--form` set the proportions as listed under Layout.\n- `.ds-brand`: the site's mark and name, at the left of the navigation row, linking to the home page: `.ds-brand__mark` is a small raised key (`--size-brand`, 36px) dressed like the primary button (`--fill-button`, `--color-button-text` for the mark, the hairline from `--border-width`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG painted with `currentColor`; `.ds-brand__name` is the name in the heading font at `--text-h3`, in `--color-heading` because it stands on the bare page. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own name and logo and keep the key.\n- `.ds-nav`: the top row. `.ds-nav__inner` holds the brand, the raised capsule `.ds-nav__list` of `.ds-nav__link` items (each with a 16px `.ds-nav__glyph` icon) and `.ds-nav__tools` with one button and the account `.ds-menu`. The current link (`is-current`) is filled with the accent; `is-hover` tints a link.\n- `.ds-hero`: the lead tile of the home page: on the left a `.ds-hero__date` line, `.ds-hero__title` at the display size, `.ds-hero__lead` and `.ds-hero__actions`; on the right one large `.ds-ring`. Once per page.\n- `.ds-ring`: a gauge: a raised knob holding `.ds-ring__arc` (68% by default; `--25`, `--50` and `--90` set other readings) and the sunk `.ds-ring__face` with a `.ds-ring__figure` and, in the large size, a `.ds-ring__caption`. `.ds-ring--small` (72px) carries only a two-digit figure and stands at the left of a stat tile.\n- `.ds-progress`: a stack of `.ds-progress__row` items, each a `.ds-progress__label` (name left, reading in a `span` right) over a sunk `.ds-progress__track` with an accent `.ds-progress__bar` (50% wide by default; `--30`, `--65`, `--85`). `.ds-progress--fill` spreads the rows over the height of a stretched tile.\n- `.ds-page-header`: head of an inner page instead of the hero: `.ds-page-header__text` with `.ds-page-header__title` and one line of `.ds-page-header__lead`; `.ds-page-header__actions` at the right with at most one primary button. Breadcrumb directly above, tabs directly below.\n- `.ds-prose`: running text: h1 to h3, paragraphs, lists, inline `code`; `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a dark code block. Put prose inside a `.ds-panel`.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for undecorated links in tables and titles. `.ds-link__sample` lays out a row of links.\n- `.ds-button`: primary, blue, 40px high, raised; `is-hover` lifts it, `is-active` sinks it. `.ds-button--secondary` is the same key in the surface colour. `.ds-button--danger` is the destructive action, a surface-coloured key with `--color-danger` text, used once and last in a group. `.ds-button--large` (52px) for the hero. `disabled` or `is-disabled` is flat. `.ds-button__row` spaces a group.\n- `.ds-form`: a vertical stack of `.ds-form__field` (a `.ds-form__label` and a control): `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (in `.ds-form__select-wrap` with `.ds-form__chevron`), `.ds-form__range`. `.ds-form__check` is a label row with a `.ds-form__checkbox` or a `.ds-switch`. `is-error` on an input gives a 2px danger ring and is followed by `.ds-form__error`; `.ds-form__hint` is help text; `.ds-form__actions` holds the buttons. Text controls are wells: `--shadow-control-pressed`. On an inner page the form is the narrow left tile.\n- `.ds-table`: one raised sheet with a small uppercase head and 1px rules between rows. `.ds-table__num` right-aligns numbers, `.ds-table__meta` is muted, `is-hover` on a row lightens it.\n- `.ds-list`: a tile of rows divided by rules. Each `.ds-list__item` starts with a sunk `.ds-list__day` well holding a day number, then `.ds-list__body` with `.ds-list__title` and a `.ds-list__meta` line led by a `.ds-list__dot` (green done, `--off` a problem, `--new` planned), then a `.ds-list__value` at the right.\n- `.ds-panel`: the basic tile, with `--radius-page`: `.ds-panel__title` (a badge may sit at its right) and `.ds-panel__body`; `.ds-panel__body--grow` lets the body fill a stretched tile.\n- `.ds-grid`: a row of four tiles. Each `.ds-grid__cell` (`--1` to `--4` pick the chart colour) holds a `.ds-grid__label`, a `.ds-grid__value`, a sunk `.ds-grid__bars` chart of seven `.ds-grid__bar` items (20% high by default; `--2` to `--5` are 40% to 100%) and a `.ds-grid__meta` line.\n- `.ds-stat`: the row of three summary tiles; each `.ds-stat__item` is one figure, a small ring at the left and `.ds-stat__text` at the right with a `.ds-stat__label` over a `.ds-stat__value` and its `.ds-stat__meta` line.\n- `.ds-tabs`: a raised capsule holding `.ds-tabs__tab` items; the current one (`is-current`) is a well pressed into it. Left-aligned under the page header as the view switch.\n- `.ds-badge`: pill for counts, filled with the accent (`--color-accent-text` on `--fill-accent`). `.ds-badge--quiet` is a flat pill in `--color-surface-strong` with `--color-text`, for neutral counts; it has no shadow, because a well is too deep for a pill this small. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: the same flat pill with a leading 8px dot in the status colour. Never colour the whole pill.\n- `.ds-sidebar`: a tile of links in the narrow cell of a row: `.ds-sidebar__heading`, `.ds-sidebar__list`, `.ds-sidebar__link` with an optional count badge at the right; the current link is pressed in.\n- `.ds-notice`: a message sunk into the surface, with `.ds-notice__icon` and `.ds-notice__title`; `.ds-notice--error` takes `--color-danger`. `.ds-notice__stack` stacks several.\n- `.ds-pagination`: raised 40px keys, `.ds-pagination__link`, left-aligned under the table; the current page is flat and filled with the accent.\n- `.ds-breadcrumb`: small muted trail, `.ds-breadcrumb__item` separated by slashes, `.ds-breadcrumb__link` for linked levels.\n- `.ds-dialog`: a tinted sheet (`--color-overlay`) with a centred `.ds-dialog__box`, at most 440px wide, raised by `--shadow-dialog`: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions` right-aligned.\n- `.ds-empty`: a sunk well with a raised `.ds-empty__icon` disc, `.ds-empty__title`, `.ds-empty__text` and one primary button.\n- `.ds-footer`: full-width flat band in `--fill-bar-alt`: one line with the site name at the left and `.ds-footer__links` with `.ds-footer__link` at the right, inside `.ds-footer__inner`.\n- `.ds-tooltip`: a hint on hover or focus. Wrap the trigger and follow it with `.ds-tooltip__tip` (`role=\"tooltip\"`), a small label in `--fill-inverse`; `--below` drops it under the trigger, `--end` lines it up with the trigger's right edge. Use it for an icon key or a short badge whose meaning needs a word; never force it open.\n- `.ds-avatar`: a person as initials on a raised disc (`.ds-avatar__pic`, `--size-avatar`, `--shadow-control`), with an optional `.ds-avatar__text` holding `.ds-avatar__name` and `.ds-avatar__meta`. Use it wherever a person is named.\n- `.ds-accordion`: one raised sheet of `
` sections; `.ds-accordion__head` is the summary with a round `.ds-accordion__chevron` that is pressed while open, `.ds-accordion__body` the answer. Use it for questions and grouped settings in a side column.\n- `.ds-menu`: the account menu, a `
`: `.ds-menu__toggle` is a sunk well holding the `.ds-avatar` and a `.ds-menu__caret`, `.ds-menu__list` the raised list of `.ds-menu__link` items (`--danger` for signing out) that opens under it.\n\n## Never\n\n- `row-gap <= 5px`: rows of a table or list touch and are divided by a rule.\n- `block-gap <= 80px`: every gutter is 32px; 64px above the footer is the largest gap.\n- `content-width <= 1200px`: everything stays in the centred column.\n- `font-size <= 44px`: the balance is the largest text.\n- `font-size >= 12px`: meta text and badges are the smallest text.\n- `font-weight <= 700`: titles and figures are bold, never black.\n- `font-families <= 3`: a display face, a text face and one monospace for code.\n- `line-height <= 1.55`: body text is set at 1.5.\n- `letter-spacing = 0`: no tracking on any text.\n- `underlined-links <= 10%`: links are marked by colour and weight; underline is a hover state.\n- `uppercase-text <= 5%`: uppercase is for table heads only.\n- `border-width <= 2px`: there are no outlines; the only lines are 1px rules between rows and a 2px focus or error ring.\n- `border-radius <= 30px`: panels are 16px, the large cards 24px, controls 30px pills; only discs go higher.\n- `box-shadow-blur <= 60px`: controls blur 6px, panels 24px; only the balance card and the dialog reach 60px.\n- `text-shadow = none`: text is flat; only boxes have relief.\n- `gradient-fills <= 15%`: only primary keys and the drawn card are gradients.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. A new piece of the overview is a new tile: start from `.ds-panel` (fill, `--radius-page` and `--shadow-panel` together), give it one subject, and place it in a `.ds-bento` row whose tiles add up to the full width; never leave a tile alone on a row beside empty space, and never put a raised tile inside a tile. Inside a tile, a reading is a `.ds-ring`, a `.ds-progress` or a sunk chart well; something to fill in starts from `.ds-form__input`; something to press starts from `.ds-button--secondary`. Keep every fill equal to the surface behind it, use each shadow token alone as the whole `box-shadow` value (a token may be `none`), and write outlines as `var(--border-width) var(--border-style)` with a border colour token. Use tokens only; for a size with no token use `calc()` over `--space-*` or `--size-*`. Keep each text token on the fill it belongs to and the accent to rings, bars and the one current item.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1200px;\n --size-ring: 208px;\n --size-ring-small: 72px;\n --size-bars: 80px;\n --size-day: 48px;\n --size-dialog: 440px;\n --size-nav: 64px;\n --size-brand: 36px;\n --size-control: 40px;\n --size-control-large: 52px;\n --size-icon: 16px;\n --size-dot: 8px;\n --size-thumb: 20px;\n --size-avatar: 36px;\n --size-track: 8px;\n --size-check: 20px;\n --size-rule: 1px;\n --space-1: 5px;\n --space-2: 10px;\n --space-3: 15px;\n --space-4: 20px;\n --space-5: 30px;\n --space-6: 40px;\n --space-7: 60px;\n --space-8: 80px;\n}\n\n/* shell: one column of tile rows with the same gutter everywhere */\n.ds-page {\n margin: 0;\n min-height: 100vh;\n background: var(--fill-page);\n background-color: var(--color-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 {\n box-sizing: border-box;\n}\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-6) var(--space-5) 0;\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-page__section {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n}\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n min-width: 0;\n}\n\n/* bento: one row of tiles; the modifier sets the proportions */\n.ds-bento {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-6);\n align-items: stretch;\n}\n.ds-bento--lead {\n grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);\n}\n.ds-bento--three {\n grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);\n}\n.ds-bento--text {\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n}\n.ds-bento--start {\n align-items: start;\n}\n.ds-bento--form {\n grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);\n align-items: start;\n}\n\n/* brand: the mark on a small raised key in the primary button's dress, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-brand);\n height: var(--size-brand);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n width: var(--size-thumb);\n height: var(--size-thumb);\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n\n/* nav: brand on the bare page, a raised capsule of links, account keys at the right */\n.ds-nav {\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-5) var(--space-5) 0;\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n min-height: var(--size-nav);\n}\n.ds-nav__list {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background: var(--fill-bar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-pill);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-text);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#today\"],\n.ds-page:has(#today:target) .ds-nav__link[href=\"#today\"],\n.ds-page:has(#sessions:target) .ds-nav__link[href=\"#sessions\"],\n.ds-page:has(#log:target) .ds-nav__link[href=\"#sessions\"],\n.ds-page:has(#plan:target) .ds-nav__link[href=\"#plan\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-nav__glyph {\n width: var(--size-icon);\n height: var(--size-icon);\n flex: none;\n}\n.ds-nav__tools {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* hero: the lead tile, text on the left and the day's ring on the right */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: var(--space-6);\n align-items: center;\n padding: var(--space-6);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n}\n.ds-hero__date {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-hero__title {\n margin: var(--space-2) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 44ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-5);\n}\n\n/* ring: a raised knob, an accent arc and a sunk face with the figure */\n.ds-ring {\n display: flex;\n flex: none;\n width: var(--size-ring);\n height: var(--size-ring);\n padding: var(--space-3);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-ring__arc {\n display: flex;\n flex: 1;\n padding: var(--space-3);\n background: conic-gradient(var(--color-accent) 0% 68%, var(--color-surface-strong) 68% 100%);\n border-radius: 50%;\n}\n.ds-ring__arc--50 {\n background: conic-gradient(var(--color-accent) 0% 50%, var(--color-surface-strong) 50% 100%);\n}\n.ds-ring__arc--90 {\n background: conic-gradient(var(--color-accent) 0% 90%, var(--color-surface-strong) 90% 100%);\n}\n.ds-ring__face {\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: var(--fill-input);\n border-radius: 50%;\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n text-align: center;\n}\n.ds-ring__figure {\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-display);\n font-variant-numeric: tabular-nums;\n}\n.ds-ring__caption {\n max-width: 14ch;\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-ring--small {\n width: var(--size-ring-small);\n height: var(--size-ring-small);\n padding: var(--space-1);\n}\n.ds-ring--small .ds-ring__arc {\n padding: var(--space-2);\n}\n.ds-ring--small .ds-ring__figure {\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n\n/* meter: a labelled sunk track with an accent bar */\n.ds-progress {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-progress--fill {\n flex: 1;\n justify-content: space-between;\n}\n.ds-progress__row {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-progress__track {\n height: var(--size-track);\n overflow: hidden;\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-progress__bar {\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--size-track);\n}\n.ds-progress__bar--30 {\n width: 30%;\n}\n.ds-progress__bar--65 {\n width: 65%;\n}\n.ds-progress__bar--85 {\n width: 85%;\n}\n\n/* page header (inner pages) */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n margin: var(--space-3) 0 var(--space-6);\n}\n.ds-page-header__text {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header:last-child {\n margin-bottom: 0;\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n\n/* prose */\n.ds-prose {\n max-width: 76ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-6) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n margin-top: 0;\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-5);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\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-strong);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-prose__code {\n margin: 0 0 var(--space-4);\n padding: var(--space-4) var(--space-5);\n overflow: auto;\n background: var(--fill-inverse);\n border-radius: var(--radius-control);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n}\n\n/* buttons: raised at rest, lifted on hover, sunk when pressed */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\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: var(--line-heading);\n text-decoration: none;\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 box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n border-color: var(--color-border);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--fill-panel);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-6);\n font-size: var(--text-large);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-disabled-text);\n cursor: default;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n/* form: every control is a well sunk into the surface */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5);\n align-items: start;\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: calc(2 * var(--size-control) + var(--space-4));\n padding: var(--space-3) var(--space-4);\n border-radius: min(var(--radius-control), var(--radius-panel));\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-input-text);\n opacity: 0.55;\n}\n.ds-form__select {\n padding-right: var(--space-7);\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-4);\n width: var(--size-icon);\n height: var(--size-icon);\n margin-top: calc(var(--size-icon) / -2);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-form__input.is-error {\n box-shadow: 0 0 0 var(--border-width-strong) 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 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-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-form__checkbox {\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n padding: var(--space-1);\n background: var(--fill-input);\n border-radius: calc(var(--radius-control) / 2);\n box-shadow: var(--shadow-control);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n background: var(--fill-accent);\n background-clip: content-box;\n}\n.ds-form__checkbox:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n/* the era's switch: a sunk pill with a raised thumb */\n.ds-switch {\n position: relative;\n flex: none;\n width: calc(2 * var(--size-thumb) + 2 * var(--space-1));\n height: calc(var(--size-thumb) + 2 * var(--space-1));\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n background: var(--fill-input);\n border-radius: var(--size-thumb);\n box-shadow: var(--shadow-control-pressed);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-switch::before {\n content: \"\";\n position: absolute;\n top: var(--space-1);\n left: var(--space-1);\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--fill-panel);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-switch:checked {\n background: var(--fill-accent);\n box-shadow: none;\n}\n.ds-switch:checked::before {\n left: calc(var(--size-thumb) + var(--space-1));\n}\n/* the era's slider: a sunk track with a raised round thumb */\n.ds-form__range {\n width: 100%;\n height: var(--size-thumb);\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n}\n.ds-form__range::-webkit-slider-runnable-track {\n height: var(--size-track);\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-form__range::-webkit-slider-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin-top: calc((var(--size-track) - var(--size-thumb)) / 2);\n -webkit-appearance: none;\n background: var(--fill-accent);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-form__range::-moz-range-track {\n height: var(--size-track);\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-form__range::-moz-range-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--fill-accent);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-2);\n}\n\n/* table: one raised sheet, rows divided by a rule */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\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 color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-4) var(--space-5);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: uppercase;\n white-space: nowrap;\n}\n.ds-table th:first-child {\n border-top-left-radius: var(--radius-panel);\n}\n.ds-table th:last-child {\n border-top-right-radius: var(--radius-panel);\n}\n.ds-table td {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr.is-hover td {\n background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td:first-child {\n border-bottom-left-radius: var(--radius-panel);\n}\n.ds-table tbody tr:last-child td:last-child {\n border-bottom-right-radius: var(--radius-panel);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__meta {\n color: var(--color-text-muted);\n}\n/* panel */\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}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-5) var(--space-5) 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__title + .ds-panel__body {\n padding-top: var(--space-3);\n}\n/* badge */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\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 white-space: nowrap;\n vertical-align: middle;\n}\n/* quiet and status badges: a flat pill one step darker than the surface; status adds a dot */\n.ds-badge--quiet,\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n/* notice: a message sunk into the surface */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n margin-top: calc((var(--text-ui) * var(--line-body) - var(--size-thumb)) / 2);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n/* pagination: raised keys, the current one in the accent */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n min-height: var(--size-control);\n padding: 0 var(--space-3);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-accent);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-accent-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin: 0 var(--space-2);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* dialog, shown open in the page flow */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-7) var(--space-5);\n background: var(--color-overlay);\n border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-6);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n}\n.ds-dialog__title {\n margin: 0 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-dialog__body {\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n margin-top: var(--space-6);\n}\n\n/* empty state: a sunk well with a raised icon disc */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-6) var(--space-5);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin-bottom: var(--space-4);\n padding: var(--space-3);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-empty__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n max-width: 40ch;\n margin: var(--space-2) 0 var(--space-5);\n font-size: var(--text-ui);\n}\n\n/* in this layout the panel is a tile: it takes the largest radius and fills its row */\n.ds-panel {\n display: flex;\n flex-direction: column;\n border-radius: var(--radius-page);\n}\n.ds-panel__body--grow {\n display: flex;\n flex: 1;\n flex-direction: column;\n}\n\n/* list: a tile of rows divided by rules, each led by a sunk day well */\n.ds-list {\n margin: 0;\n padding: var(--space-2) var(--space-5);\n list-style: none;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-4) 0;\n}\n.ds-list__item + .ds-list__item {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-list__day {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-day);\n height: var(--size-day);\n background: var(--fill-input);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__meta {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-list__value {\n flex: none;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n font-variant-numeric: tabular-nums;\n}\n.ds-list__dot {\n display: inline-block;\n width: var(--size-dot);\n height: var(--size-dot);\n margin-right: var(--space-1);\n background: var(--color-success);\n border-radius: 50%;\n}\n.ds-list__dot--off {\n background: var(--color-danger);\n}\n.ds-list__dot--new {\n background: var(--color-accent-alt);\n}\n\n/* grid: four tiles, each a figure over a sunk week chart in its own colour */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-6);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n padding: var(--space-5);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n}\n.ds-grid__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-grid__value {\n margin-top: var(--space-1);\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 font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-grid__bars {\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n height: var(--size-bars);\n margin-top: var(--space-4);\n padding: var(--space-3);\n background: var(--fill-input);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-grid__bar {\n flex: 1;\n height: 20%;\n background: var(--color-surface-strong);\n border-radius: var(--space-1);\n}\n.ds-grid__bar--2 {\n height: 40%;\n}\n.ds-grid__bar--3 {\n height: 60%;\n}\n.ds-grid__bar--4 {\n height: 80%;\n}\n.ds-grid__bar--5 {\n height: 100%;\n}\n.ds-grid__cell--1 .ds-grid__bar {\n background: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-grid__bar {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-grid__bar {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-grid__bar {\n background: var(--color-fill-4);\n}\n.ds-grid__meta {\n margin-top: var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n\n/* stats: three tiles, a small ring beside each figure */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n margin: 0;\n}\n.ds-stat__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-5);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__text {\n min-width: 0;\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-stat__value {\n margin: var(--space-1) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-stat__meta {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-shadow: none;\n}\n\n/* tabs: a raised capsule; the current tab is a well pressed into it */\n.ds-tabs {\n display: inline-flex;\n align-self: flex-start;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-panel);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n border-radius: var(--radius-pill);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-input);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n}\n\n/* sidebar: a tile of links, the current one pressed in */\n.ds-sidebar {\n padding: var(--space-5) var(--space-4);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__heading {\n margin: 0 var(--space-3) var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-sidebar__list + .ds-sidebar__heading {\n margin-top: var(--space-5);\n}\n.ds-sidebar__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\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-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-sidebar__link.is-current {\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* footer: a flat band, the name and one line at the left, links at the right */\n.ds-footer {\n margin-top: var(--space-8);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-footer__inner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-5);\n}\n.ds-footer__links {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n@media (max-width: 900px) {\n .ds-bento,\n .ds-bento--lead,\n .ds-bento--three,\n .ds-bento--text,\n .ds-bento--form,\n .ds-hero,\n .ds-stat {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n gap: var(--space-4);\n }\n .ds-nav__list {\n order: 3;\n flex: 1 1 100%;\n justify-content: center;\n }\n .ds-nav__link {\n flex: 1 1 auto;\n justify-content: center;\n }\n .ds-hero .ds-ring {\n justify-self: center;\n }\n}\n@media (max-width: 560px) {\n .ds-page__inner,\n .ds-nav {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-page__inner {\n padding-top: var(--space-5);\n }\n .ds-page__stack,\n .ds-page__section,\n .ds-bento,\n .ds-stat,\n .ds-grid {\n gap: var(--space-5);\n }\n .ds-nav__link {\n padding: var(--space-2) var(--space-3);\n }\n .ds-hero {\n padding: var(--space-5);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__actions .ds-button {\n flex: 1 1 auto;\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-tabs {\n display: flex;\n align-self: stretch;\n flex-wrap: wrap;\n justify-content: center;\n }\n .ds-tabs__tab {\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3) var(--space-4);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-4);\n }\n .ds-dialog__box {\n padding: var(--space-5);\n }\n .ds-dialog__actions,\n .ds-pagination,\n .ds-footer__inner {\n padding: var(--space-5) var(--space-4);\n }\n .ds-footer__links {\n flex-wrap: wrap;\n }\n}\n\n/* tooltip: a small inverted label by its trigger, on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 6;\n padding: var(--space-1) var(--space-3);\n transform: translateX(-50%);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border-radius: min(var(--radius-control), var(--space-3));\n color: var(--color-inverse-text);\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 white-space: nowrap;\n pointer-events: none;\n}\n.ds-tooltip--end .ds-tooltip__tip {\n left: auto;\n right: 0;\n transform: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n\n/* avatar: initials on a raised disc, alone or beside a name */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n color: inherit;\n text-decoration: none;\n}\n.ds-avatar__pic {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-avatar);\n height: var(--size-avatar);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-avatar__text {\n min-width: 0;\n}\n.ds-avatar__name {\n display: block;\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-avatar__meta {\n display: block;\n font-size: var(--text-small);\n line-height: var(--line-heading);\n opacity: 0.75;\n}\n\n/* accordion: one raised sheet of sections that open and close */\n.ds-accordion {\n background-color: var(--color-surface);\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 color: var(--color-text);\n}\n.ds-accordion__item + .ds-accordion__item {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-5);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__chevron {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: calc(var(--size-icon) + var(--space-3));\n height: calc(var(--size-icon) + var(--space-3));\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: inherit;\n transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__chevron {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-accordion__chevron svg {\n width: var(--size-icon);\n height: var(--size-icon);\n transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__chevron svg {\n transform: rotate(180deg);\n}\n.ds-accordion__body {\n padding: 0 var(--space-5) var(--space-5);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* menu: the account disc in a sunk well opens a raised list */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--size-avatar);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n list-style: none;\n cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-menu__toggle:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-menu__caret {\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-menu__list {\n position: absolute;\n top: calc(100% + var(--space-2));\n right: 0;\n z-index: 5;\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-width: 22ch;\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: min(var(--radius-panel), var(--space-5));\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-radius: min(var(--radius-control), var(--space-4));\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-menu__link--danger {\n color: var(--color-danger);\n}\n\n@media (max-width: 560px) {\n .ds-menu__caret {\n display: none;\n }\n .ds-menu__toggle {\n padding: var(--space-1);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: training log\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n Log a session\n
\n MK\n \n
\n
\n
\n
\n\n
\n\n
\n
\n\n
\n
\n
\n Thursday, week 11\n

Two goals met today

\n

A 6 km run this morning closed the move and exercise goals. Ten minutes of stretching closes the third.

\n
\n Start stretching\n See the week\n
\n
\n
\n
\n
\n 68%\n of the weekly plan\n
\n
\n
\n
\n\n
\n

Today 14:20Watch synced at 14:20

\n
\n
\n
\n Move 510 of 600 kcal\n
\n
\n
\n Exercise 26 of 40 min\n
\n
\n
\n Stretch 3 of 10 min\n
\n
\n
\n Water 1.0 of 2.0 l\n
\n
\n
\n
\n
\n
\n\n\n
\n
\n
68
\n
\n
Distance this week
\n
31.4 km of 46 km planned
\n
\n
\n
\n
50
\n
\n
Active time
\n
4 h 12 of 8 h 30 planned
\n
\n
\n
\n
90
\n
\n
Sleep, 7 day average
\n
7 h 10 goal 8 h
\n
\n
\n
\n\n\n
\n
\n Running\n 18.2 km\n \n 3 runs, 5:42 per km\n
\n
\n Cycling\n 46.0 km\n \n 2 rides, 24 km/h\n
\n
\n Swimming\n 2,400 m\n \n 2 swims, 2:05 per 100 m\n
\n
\n Strength\n 3 sessions\n \n 1 h 50 in total\n
\n
\n\n\n
\n\n \n\n
\n
\n
\n \n
Rest day on Sunday. The plan leaves it empty on purpose.
\n
\n
\n \n
The watch has not synced since 09:12. Later sessions are missing.
\n
\n
\n
\n

Coach's note New

\n
\n Keep Saturday's run easy. The long ride moved to next week, so this week ends lighter than planned.\n
\n
\n
\n\n \n\n
\n\n
\n
\n\n
\n
\n\n
\n
    \n
  1. chronoskin
    2. \n
  2. Spring 10 km
    3. \n
  3. Sessions
    4. \n
\n
\n
\n

Sessions

\n

Five sessions this week, three of them done.

\n
\n
\n See the plan\n Log a session\n
\n
\n \n
\n\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
SessionStatusKindDistanceTime
Long ride, north roadCut shortCycling28.0 km1:12:30
Pool, intervalsDoneSwimming1.2 km26:10
Morning run, river loopDoneRunning6.1 km34:40
Strength, upper bodyTomorrowStrength0.0 km45:00
Easy run, parkSaturdayRunning5.0 km30:00
\n \n
\n

Week 11 against the plan 3 of 5 done

\n
\n
\n
\n Minutes 185 of 270\n
\n
\n
\n Distance 35.3 of 46.0 km\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n

Delete the long ride?

\n
The session and its route are removed and the week drops to 61 percent.
\n
\n \n \n
\n
\n
\n \n
\n\n
\n\n
\n
\n\n
\n
\n\n
\n
    \n
  1. chronoskin
    2. \n
  2. Sessions
    3. \n
  3. Log a session
    4. \n
\n
\n
\n

Log a session

\n

Anything the watch missed, or a session done without it.

\n
\n
\n Back to sessions\n
\n
\n
\n\n
\n\n
\n

Thursday, week 11 By hand

\n
\n
\n
\n
\n \n \n
\n
\n \n \n \n \n \n
\n
\n
\n
\n \n \n Enter at least one minute.\n
\n
\n \n \n
\n
\n
\n \n \n Your coach can read this.\n
\n \n \n
\n \n \n \n \n
\n
\n
\n
\n\n
\n
\n

Still open today 7 min left

\n
\n
\n
\n Stretch 3 of 10 min\n
\n
\n
\n Water 1.0 of 2.0 l\n
\n
\n
\n
\n
\n
\n

What counts

\n
\n A session entered by hand needs a duration. It counts towards the week once it is at least eighty percent as long as planned.\n
\n
\n
\n \n
The watch last synced at 09:12. Check that this session is not already on its way.
\n
\n
\n

After you save

\n
\n The session appears under this week and the ring on the home view moves at once. You can change it until Sunday night.\n
\n
\n
\n\n
\n\n
\n
\n\n
\n
\n\n
\n
    \n
  1. chronoskin
    2. \n
  2. Plans
    3. \n
  3. Spring 10 km
    4. \n
\n
\n
\n

Spring 10 km

\n

Week 11 of 14. Seven sessions are left before the taper.

\n
\n
\n Sessions\n Log a session\n
\n
\n
\n\n
\n\n
\n
\n
\n

How the weekly plan is scored

\n

Each planned session is worth its planned minutes, and the ring shows the share you have done.

\n

A session counts once it is at least eighty percent as long as planned. Sessions are matched by day and kind, with a key such as thu-run.

\n

Moved and missed sessions

\n

A session you move inside the week keeps its value. One that is not done by Sunday night counts as missed.

\n

What never counts

\n
    \n
  • Walks shorter than ten minutes.
    • \n
  • Sessions entered by hand without a duration.
    • \n
  • Anything logged on a rest day.
    • \n
\n

\n This week's sessions\n Today's goals\n Log a session\n Rest days\n Scoring in full\n

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

No races entered yet

\n

Add a race and the plan counts down to its date.

\n Add a race\n
\n
\n

Weeks to go 3

\n
\n Two build weeks of about 46 km, then a taper week at half the distance. Sunday stays a rest day throughout.\n
\n
\n
\n

This week 68%

\n
\n Three of five sessions are done. The long ride was cut short and moved, so the week ends lighter than planned.\n
\n
\n
\n
\n What counts as done? \n
A session of at least eighty percent of its planned minutes, on its day or moved inside the week.
\n
\n
\n Can I swap two days? \n
Yes. Both sessions keep their value as long as they stay in the same week.
\n
\n
\n What happens in the taper? \n
The plan halves the distance and the ring is scored against the shorter week.
\n
\n
\n
\n\n
\n\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.neumorphism.app.s04.p05.t05.u05.dr\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"neumorphism\",\n \"years\": [\n 2019,\n 2021\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-nm-4555-dr\",\n \"short\": \"v1-nm-4555-dr\",\n \"density\": \"roomy\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(209 216 236);\n --color-canvas: rgb(209 216 236);\n --color-surface: rgb(209 216 236);\n --color-surface-alt: rgb(216 224 240);\n --color-surface-strong: rgb(200 208 224);\n --color-bar: rgb(209 216 236);\n --color-bar-text: rgb(39 55 76);\n --color-bar-alt: rgb(58 65 111);\n --color-bar-alt-text: rgb(240 248 255);\n --color-inverse: rgb(20 23 39);\n --color-inverse-text: rgb(240 248 255);\n --color-text: rgb(50 48 52);\n --color-text-muted: rgb(53 64 104);\n --color-heading: rgb(39 55 76);\n --color-heading-alt: rgb(53 64 104);\n --color-link: rgb(121 40 202);\n --color-link-quiet: rgb(39 55 76);\n --color-link-visited: rgb(53 64 104);\n --color-link-hover: rgb(203 12 159);\n --color-link-active: rgb(255 0 128);\n --color-border: rgb(200 208 224);\n --color-border-strong: rgb(178 184 201);\n --color-border-muted: rgb(240 248 255);\n --color-accent: rgb(203 12 159);\n --color-accent-text: rgb(255 255 255);\n --color-accent-alt: rgb(33 82 255);\n --color-fill-1: rgb(203 12 159);\n --color-fill-2: rgb(33 82 255);\n --color-fill-3: rgb(23 173 55);\n --color-fill-4: rgb(58 65 111);\n --color-button: rgb(203 12 159);\n --color-button-text: rgb(255 255 255);\n --color-button-hover-text: rgb(255 255 255);\n --color-button-secondary: rgb(209 216 236);\n --color-button-secondary-text: rgb(39 55 76);\n --color-input: rgb(209 216 236);\n --color-input-text: rgb(50 48 52);\n --color-input-border: rgb(178 184 201);\n --color-disabled: rgb(200 208 224);\n --color-disabled-text: rgb(53 64 104 / 0.55);\n --color-danger: rgb(234 6 6);\n --color-danger-surface: rgb(224 232 248);\n --color-success: rgb(23 173 55);\n --color-warning: rgb(233 130 12);\n --color-notice: rgb(216 224 240);\n --color-notice-text: rgb(39 55 76);\n --color-focus: rgb(121 40 202);\n --color-shadow: rgb(178 184 201);\n --color-overlay: rgb(20 23 39 / 0.3);\n}\n\n/* @part type */\n:root {\n --font-body: \"Open Sans\", \"Segoe UI\", Tahoma, \"DejaVu Sans\", sans-serif;\n --font-heading: Quicksand, \"Varela Round\", \"Century Gothic\", \"Trebuchet MS\", sans-serif;\n --font-ui: \"Open Sans\", \"Segoe UI\", Tahoma, \"DejaVu Sans\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 18px;\n --text-display: 44px;\n --text-h1: 30px;\n --text-h2: 22px;\n --text-h3: 17px;\n --line-body: 1.5;\n --line-heading: 1.35;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 600;\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: 0;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 30px;\n --radius-panel: 16px;\n --radius-pill: 30px;\n --radius-page: 24px;\n --shadow-panel: 12px 12px 24px var(--color-shadow), -12px -12px 24px var(--color-border-muted);\n --shadow-control: 3px 3px 6px var(--color-shadow), -3px -3px 6px var(--color-border-muted);\n --shadow-control-hover: 6px 6px 12px var(--color-shadow), -6px -6px 12px var(--color-border-muted);\n --shadow-control-pressed: inset 3px 3px 7px var(--color-shadow), inset -3px -3px 7px var(--color-border-muted);\n --shadow-dialog: 20px 20px 60px var(--color-shadow), -12px -12px 24px var(--color-border-muted);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: linear-gradient(to left top, var(--color-inverse), color-mix(in srgb, var(--color-inverse) 72%, white));\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to left top, color-mix(in srgb, var(--color-button) 80%, black), color-mix(in srgb, var(--color-button) 86%, white));\n --fill-button-hover: linear-gradient(var(--color-button), var(--color-button));\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: box-shadow 0.25s ease-out, background-color 0.25s ease-out, color 0.25s ease-out;\n --backdrop-blur: 0px;\n}\n" } }