{ "id": "v1-w2-4444", "long_id": "v1.web-2-0-gloss.portal.s04.p04.t04.u04", "name": "Web 2.0 gloss member dashboard", "era": { "slug": "web-2-0-gloss", "code": "w2", "name": "Web 2.0 gloss", "years": [ 2005, 2009 ], "description": "The start-up web, 2005 to 2009: glossy gradient bars and buttons, rounded hairline boxes, friendly lower-case wordmarks, big claims in a pale hero, and badges that say new." }, "archetype": "portal", "mode": "pure", "viewport": { "width": 1024, "fluid": false }, "summary": "The signed-in home of a Web 2.0 community site: a glossy header band with the brand, an account line and folder tabs standing on its lower edge, a getting-started box with three numbered steps and one big glossy button, then three columns with a member menu and tag cloud on the left, an activity stream in a tabbed box in the middle and invitation boxes on the right. It was common from about 2005 to 2009 on photo sharing, bookmarking and hosted-tool sites once a member had logged in. White rounded boxes sit on a pale tinted sheet, type is plain Helvetica at 13px, and gloss is kept for the header, the table head and the primary button.", "url": "https://chrono.skin/s/v1-w2-4444", "preview_url": "https://chrono.skin/s/v1-w2-4444/specimen.html", "files": { "STYLE.md": "# Web 2.0 gloss member dashboard\n\n## Summary\n\nThe signed-in home of a Web 2.0 community site: a glossy header band with the brand, an account line and folder tabs standing on its lower edge, a getting-started box with three numbered steps and one big glossy button, then three columns with a member menu and tag cloud on the left, an activity stream in a tabbed box in the middle and invitation boxes on the right. It was common from about 2005 to 2009 on photo sharing, bookmarking and hosted-tool sites once a member had logged in. White rounded boxes sit on a pale tinted sheet, type is plain Helvetica at 13px, and gloss is kept for the header, the table head and the primary button.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 960px, centred in a 1024px viewport, with `--size-pad` (20px) of padding at each side, so the working width is 920px. It does not stretch.\n- The header band (`.ds-nav__bar`) and the footer (`.ds-footer`) span the full viewport; their content sits in a centred `--size-page` box (`.ds-nav__inner`, `.ds-footer__inner`). Text never sits directly in a full-viewport strip.\n- Navigation is at the top only. The band holds two rows: brand, claim, account line and search field (`.ds-nav__top`), then the folder tabs (`.ds-nav__tabs`) whose current tab takes the canvas colour and joins the page under it. A line of section links (`.ds-nav__sub`) follows on the canvas, with a status sentence at its right end.\n- Everything else sits in `.ds-page__wrap` (960px, canvas colour). Home page, top to bottom: the hero box across the full 920px, then `.ds-page__columns`, three columns: `.ds-page__side` of `--size-side` (180px) on the left, `.ds-page__main` (480px) in the middle, `.ds-page__rail` of `--size-rail` (220px) on the right, with `--size-gutter` (20px) between them.\n- The left column holds the member card (`.ds-me`), the menu and the tag cloud. The middle column holds a `.ds-head`, the `.ds-tabs` and the `.ds-box` they own with the activity list in it, then the two by two `.ds-grid` of group modules. The right column holds `.ds-panel` boxes and a ranked list.\n- Spacing scale: `--space-1` 2px (between a title and its meta line, between tabs, between tags), `--space-2` 5px (control padding, gaps between buttons, tab padding, module head padding), `--space-3` 10px (list row padding, gaps between grid cells and stat tiles, gap under a head, between notices), `--space-4` 15px (box and panel padding, form actions, footer rule), `--space-5` 20px (hero padding, gap between sidebar blocks, gap above the columns and above a split row), `--space-6` 30px (gap between unrelated sections; the largest gap on the page).\n- Fixed sizes: buttons and inputs `--size-control` 24px tall, the hero button `--size-control-large` 38px, the search field `--size-search` 160px, step numerals `--size-step` 28px, stream initials `--size-avatar` 32px, the member card picture `--size-face` 48px, the dialog `--size-dialog` 380px.\n- Views: the specimen is one example site of five screens, each a `.ds-view` section inside `.ds-page__wrap`, with the header (band, tabs and the line of section links) and the footer written once around them. `home` is the member's home page (hero box with its steps, the three columns: member card, menu and labels; the activity list under its tabs and the group modules; panels and the ranked list). `album` is one album (stats, the tabs, a toolbar, the photo table with its count line, pagination and a key to the badges). `comments` is the album's comments tab (the empty state in the tab's box, then recent comments from other albums beside an invitation panel). `settings` is its settings tab (the form beside the help text in the tab's box, then the delete panel beside the confirming dialog). `upload` is the upload page (notices, the last batch as a table beside the form for the next). Links are plain `href=\"#name\"`; the album's tabs lead from one album view to the next. The folder tab and the section link of the showing view are marked by `.ds-page:has(#name:target)` rules, Home and Overview also when no view is named; `settings` keeps the Your photos tab.\n- Inner pages drop the hero and all three columns: an inner page is one full-width column. In `.ds-page__wrap`, top to bottom: `.ds-breadcrumb`, then `.ds-page-header` in the hero's place (a pale strip across the full 920px, title and one line on the left, buttons on the right), then `.ds-stats`, four separate figure tiles in one row 10px below, then 30px below (20px when no stats row comes between: `.ds-section--tight`) a `.ds-tabs` row with its `.ds-box` holding a `.ds-buttons--bar` toolbar, the table, a count line and the pagination; on another tab the same box holds an inset empty state, or a `.ds-page__split--inside` row with the form beside its help text. Notices sit directly under the page header. Further blocks sit in `.ds-page__split` rows of two equal columns 20px apart: a list box beside a panel, a table box beside a form box, the panel that asks for a deletion beside its dialog. Nothing on an inner page is wider than 920px and there is no sidebar.\n- List entries are rows inside a box, divided by 1px `--color-border-muted` rules; boxes, panels, tiles and modules are the cards.\n\n## Typography and colour roles\n\n- One family everywhere: `--font-body`, `--font-heading` and `--font-ui` are Helvetica, Arial, FreeSans, sans-serif. `--font-mono` (Monaco) is for inline code only.\n- `--text-base` 13px at `--line-body` 1.4 for stream lines, panels and prose. `--text-small` 11px for meta lines, counts, the account line, tags, hints and the footer. `--text-ui` 12px bold (`--weight-ui`) for buttons, tabs, table text and form labels.\n- `--text-display` 28px in regular weight (`--weight-display` 400): the brand name, the hero title and the figures in the stat tiles. `--text-h1` 20px bold: the page-header title and prose h1. `--text-h2` 16px bold: section heads, panel and box titles, step numerals. `--text-h3` 13px bold: the header tabs, sidebar titles, module titles, step titles, dialog title. `--text-large` 16px: the hero lead and the large button. Nothing is larger than 28px.\n- No tracking and no uppercase: `--heading-tracking`, `--display-tracking` 0; `--heading-transform`, `--ui-transform` none.\n- `--color-page` is a mid slate #bbccd9 and shows only at the sides of the sheet and under the footer; the sheet is `--color-canvas`, a pale slate #edf2f6, and boxes on it are `--color-surface` white. `--color-surface-alt` #f8f8f8 is the alternate table row, the quoted line in the stream, the empty state and the lower end of the panel fade. `--color-surface-strong` #cadcea is the inactive tab, the current menu row, tags, count badges and the dialog title strip; text on it is `--color-heading`.\n- `--color-text` #444444 body; `--color-text-muted` #888888 meta, counts and rank numerals; `--color-heading` #000000 titles; `--color-heading-alt` #133855 (deep steel) sidebar, panel and box titles, prose h2, stat notes.\n- `--color-link` #336699, not underlined at rest (`--link-decoration` none) and underlined on hover. `.ds-link--title` is bold; `--color-link-quiet` #666666 is for menu entries and names. `--color-link-visited` #5c8ab3, `--color-link-hover` #4183c4, `--color-link-active` #000000.\n- `--color-bar` #133855 with `--fill-bar` (lighter at the top, plain at the bottom) and white `--color-bar-text`: the header band and the table head. The brand name carries `--shadow-text`. Inactive header tabs are a 20% wash of `--color-bar-text` over the band.\n- `--color-bar-alt` #cadcea with `--fill-bar-alt` (near white fading to the slate tint) and `--color-bar-alt-text`: the page-header strip only.\n- `--color-inverse` #444444 with white `--color-inverse-text`: the footer band.\n- `--color-accent` #f0a030 with `--fill-accent` and black `--color-accent-text`: step numerals, the pill badge, the current page number. `--color-accent-alt` #9c4a1c: the NEW marker only.\n- `--color-fill-1` to `--color-fill-4` (white, slate tint, pale lilac grey, grey): the hero box (fill-1), the module head strips and the initial squares of the stream. They are block backgrounds only; text on them is `--color-text`, `--color-heading` and `--color-link`.\n- `--color-button` #000000 with `--fill-button` (a hard two-step gloss) and white bold text: the primary button. `--color-button-secondary` #f0f0f0 with `--fill-button-secondary`, #444444 text and a `--color-border-strong` outline: every other button.\n- Borders are 1px solid: `--color-border` #c6ccd3 around boxes, panels, tiles, tabs and modules, `--color-border-muted` #ebeef1 between rows, `--color-input-border` #b4b4b4 on fields. Only the dialog frame uses `--border-width-strong` (3px) in `--color-border-strong`.\n- `--color-notice` #fffbe4 for notices and `mark`; `--color-danger` #c01500 on `--color-danger-surface` #fee5f2 for errors, and as the fill of the destructive button and the danger badge. `--color-success` #3b7a1f and `--color-warning` #ffe28a are status badge fills; a finished step numeral is also `--color-success`.\n- Radii: `--radius-control` 5px (buttons, inputs, initial squares, page numbers; the large button doubles it to 10px), `--radius-panel` 5px (boxes, panels, tiles, modules, tabs, notices, dialog), `--radius-page` 8px (hero), `--radius-pill` 10px (badges and tags).\n- Shadows are small: `--shadow-panel` (1px offset, 3px blur) under the hero, panels and stat tiles, `--shadow-control` under buttons, `--shadow-dialog` (8px blur) under the dialog. `--transition` is none.\n- One-off shades are made with `color-mix()` over tokens: the button outlines (`--color-button` or `--color-danger` mixed with `--color-shadow`), the gloss of the destructive button, the wash of the inactive header tabs and the rule in the footer. Inactive tabs, footer links and the claim use `opacity` instead of a further colour.\n\n## Components\n\n- `.ds-page`: on ``. Sets the page fill, base font and colour. Content goes in `.ds-page__wrap`. `.ds-page__columns` holds `.ds-page__side`, `.ds-page__main` and `.ds-page__rail` (home page only); `.ds-page__split` holds two `.ds-page__half` columns (inner pages). `.ds-section` puts 30px above an unrelated block and `.ds-section__label` is its ruled title. `.ds-head` is a title line with `.ds-head__title` and a small right-aligned `.ds-head__more`. `.ds-section--tight` puts 20px above instead of 30px; `.ds-page__split--inside` is a split row inside a box. `.ds-view` is one screen of the example site (`.ds-view--home` the one shown first); only the view named in the address shows.\n- `.ds-nav`: the site header. `.ds-nav__bar` is the glossy band with `.ds-nav__inner`; in it `.ds-nav__top` holds the `.ds-brand`, `.ds-nav__claim` and `.ds-nav__tools` (a bold `.ds-nav__who`, `.ds-nav__tool` links, `.ds-nav__search` with `.ds-nav__input` and a secondary button), and `.ds-nav__tabs` holds the `.ds-nav__tab` links (current: `is-current`, canvas coloured and a little taller). `.ds-nav__tabs-end` pushes one plain `.ds-nav__tab--action` link to the right end. `.ds-nav__sub` under the band holds `.ds-nav__topics` of `.ds-nav__topic-item` (first: `is-first`) with `.ds-nav__topic` links (current: `is-current`) and a `.ds-nav__status` sentence.\n- `.ds-brand`: the site's mark and name, at the left end of the header, linking home; one per page. `.ds-brand__mark` is a small square tile dressed like the primary button (`--fill-button` on `--color-button`, a darker outline, `--radius-control`, `--shadow-control`) with the mark drawn in `--color-button-text`; it is 1.25 times the size of the name, so it follows the type set. `.ds-brand__name` is the name in `--font-heading` at `--text-display` in `--weight-display`, coloured `--color-bar-text` for the header band it sits on. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-hero`: the getting-started box, home page only, one per page. `.ds-hero__top` holds `.ds-hero__main` (`.ds-hero__title`, `.ds-hero__lead`) and `.ds-hero__action` (one `.ds-button--large` and a small `.ds-hero__note`). `.ds-hero__steps` under a rule is three `.ds-hero__step` columns, each a round `.ds-hero__number` beside `.ds-hero__step-body` with `.ds-hero__step-title` and `.ds-hero__step-text`; `is-done` turns the numeral green and greys the title.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`: a pale rounded strip with `.ds-page-header__main` (`.ds-page-header__title`, the page's h1, and one `.ds-page-header__text` line) and `.ds-page-header__actions` on the right with one primary button and at most one secondary.\n- `.ds-stat`: one figure tile; four of them sit in a `.ds-stats` row. Each is a rounded box with a centred 28px `.ds-stat__number`, a small `.ds-stat__label` and an optional bold `.ds-stat__note`. For the totals of an album, a group or an account, under the page header.\n- `.ds-prose`: long text: h1, h2 (steel), h3, p, ul, ol, code, strong, mark and links inside it are styled. For help text beside a form and for about pages.\n- `.ds-link`: any link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. Variants `.ds-link--title` (bold, for names and titles) and `.ds-link--quiet` (grey, for menu entries). `.ds-links` lays several out in a row.\n- `.ds-button`: the primary action: black two-step gloss, white bold 12px, 24px tall, 5px corners. Variants `.ds-button--secondary` (pale grey; the usual button), `.ds-button--danger` (the gloss in `--color-danger`; only for an action that removes something, usually the confirming button of a dialog) and `.ds-button--large` (38px tall, 16px text, 10px corners; the hero action only). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row of them; `.ds-buttons--bar` is that row as the toolbar above a table in its box. One primary button per box, panel or dialog.\n- `.ds-form`: labels above their fields. `.ds-form__row` holds a bold `.ds-form__label` and a `.ds-form__input`, `.ds-form__select` or `.ds-form__textarea` at full width; `.ds-form__pair` puts two short fields side by side; `.ds-form__hint` and `.ds-form__error` sit under a control; `is-error`, `is-focus`, `is-disabled` on the control; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` under a rule holds the primary button, a `.ds-form__or` word and a cancel link. A form sits in a `.ds-box--flush` with a `.ds-box__title`.\n- `.ds-table`: data table in a 1px frame inside a `.ds-box`: `.ds-table__head` cells form a glossy bar with white bold text; `.ds-table__row` with `is-alt` for alternate rows; `.ds-table__cell` with a hairline above; `is-numeric` right-aligns and bolds numbers. `.ds-table__foot` under it holds a `.ds-table__summary` line and the pagination. `.ds-table--first` drops the top margin under a box title.\n- `.ds-list`: the activity stream. Each `.ds-list__item` (first: `is-first`) is a `.ds-list__avatar` initial square (`--2` to `--4` for the other fills) beside `.ds-list__body`: a `.ds-list__title` sentence with a bold `.ds-link--title` name and a plain link to the object, an optional quoted `.ds-list__text` on a grey strip, and a `.ds-list__meta` line with the time, one link and `.ds-list__tags` pushed to the right.\n- `.ds-panel`: a box in the right column for an invitation or an offer: rounded frame, faint fade, steel `.ds-panel__title`, `.ds-panel__body` with `.ds-panel__text`, an optional `.ds-panel__field` and `.ds-panel__actions` (a button, then `.ds-panel__more` at the right).\n- `.ds-grid`: module boxes, two by two in the middle column (`.ds-grid--four` puts four in one row on a full-width page). Each `.ds-grid__cell` (`--2` to `--4` for the other fills) has a `.ds-grid__head` strip in a block fill with a `.ds-grid__title` and a `.ds-grid__count`, then `.ds-grid__body` with a small `.ds-grid__text` and a `.ds-grid__more` link.\n- `.ds-tabs`: folder tabs that own the `.ds-box` directly under them: `.ds-tabs__tab` with rounded top corners, slate when inactive, white and joined to the box when `is-current`; `.ds-tabs__count` for a regular-weight number. `.ds-box` is the white rounded frame itself; use it alone (`.ds-box--flush`, with a `.ds-box__title`) for a form.\n- `.ds-badge`: small bold label. Base is the orange pill. Variants: `.ds-badge--count` (slate, for totals), `.ds-badge--tag` (slate with grey text, a label link), `.ds-badge--new` (brown, the word NEW typed in capitals), and the status variants `.ds-badge--success` (green, white text), `.ds-badge--warning` (yellow, black text) and `.ds-badge--danger` (red, white text), one per table row. `.ds-badges` lays several out in a row; `.ds-badges--key` is that row as a small grey key under a table, above a rule, each badge followed by a few words.\n- `.ds-sidebar`: a block of the left or right column: a ruled steel `.ds-sidebar__title`, then a `.ds-sidebar__list` of `.ds-sidebar__item` rows, each a quiet link with a right-aligned `.ds-sidebar__count`; the current row is `is-current` (slate strip, bold, text in `.ds-sidebar__here`); `.ds-sidebar__more` is a small closing link. A sidebar block may instead hold `.ds-cloud`, a tag cloud of `.ds-cloud__tag` links in four sizes (`--2`, `--3`, `--4`), or `.ds-rank`, a numbered list of `.ds-rank__item` rows (first: `is-first`) with `.ds-rank__number`, `.ds-rank__body` and `.ds-rank__meta`. `.ds-me` above the menu is the member card: `.ds-me__face`, `.ds-me__name`, `.ds-me__text`.\n- `.ds-notice`: one-line message: pale yellow in a grey hairline with a bold `.ds-notice__title`. Variant `.ds-notice--error`: red on pale pink with a red border.\n- `.ds-pagination`: a row of small rounded boxes: `.ds-pagination__link`, current page `is-current` (orange), unavailable `is-disabled`, `.ds-pagination__gap` for an ellipsis. It sits at the right end of `.ds-table__foot`.\n- `.ds-breadcrumb`: 11px trail of `.ds-link` items with `.ds-breadcrumb__sep` (an arrow) and a bold `.ds-breadcrumb__current`.\n- `.ds-dialog`: a white box in a 3px grey frame with a slate `.ds-dialog__title` strip (holding `.ds-dialog__close`), `.ds-dialog__body` with `.ds-dialog__text`, and `.ds-dialog__actions` with the buttons right-aligned. Sits on `.ds-dialog__backdrop`, a translucent dim layer.\n- `.ds-empty`: a pale rounded box with a bold `.ds-empty__title`, a `.ds-empty__text` line and one button. `.ds-empty--inset` drops the border and fill when it sits inside a `.ds-box`.\n- `.ds-footer`: full viewport width, inverted: `.ds-footer__inner` holds `.ds-footer__cols`, four columns each with a `.ds-footer__title` and a `.ds-footer__list` of `.ds-footer__item` entries with `.ds-footer__link`, then a ruled `.ds-footer__legal` line.\n\n## Never\n\n- `row-gap <= 20px`: stream and table rows touch, divided by a rule.\n- `block-gap <= 30px`: sections are at most 30px apart.\n- `content-width <= 920px`: all text stays inside the 920px working width; the header band and footer may span the viewport but their text does not.\n- `palette-colours <= 36`: slate tints, steel blue, black, greys, one orange, one brown and the status colours.\n- `font-size <= 28px`: the brand name, the hero title and the stat figures are the largest text.\n- `font-size >= 11px`: meta text is 11px and nothing is smaller.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 2`: Helvetica for everything, a monospace only for inline code.\n- `line-height <= 1.4`: body text is 13px on 18px.\n- `letter-spacing = 0px`: no tracking anywhere.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `underlined-links <= 5%`: links are not underlined until hovered.\n- `border-radius <= 10px`: corners are 5, 8 or 10px.\n- `border-width <= 3px`: borders are 1px hairlines; only the dialog frame is 3px.\n- `box-shadow-blur <= 8px`: shadows are short; the dialog's 8px is the largest.\n- `gradient-fills <= 20%`: gradients stay on the header band, table head, buttons, step numerals, panels, stat tiles and the page-header strip; boxes, rows and modules are flat.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. Anything a member owns and counts is an entry in the left `.ds-sidebar` menu; anything that happened is a row of the `.ds-list` stream; anything that invites or sells is a `.ds-panel` in the right column; a collection with its own name and number is a `.ds-grid` module. On an inner page a new view of the object is a tab on the `.ds-box`, and a new block is a half of a `.ds-page__split` row. A new framed box takes `--color-surface`, a 1px `--color-border` and `--radius-panel`; a new strip takes `--color-surface-strong` with `--color-heading` text or one `--color-fill-*`. Keep gloss to the header band, the table head and the primary button. Keep text at `--text-base`, `--text-ui` or `--text-small`, and make any extra shade with `color-mix()` over existing colour tokens rather than adding a colour.\n", "components.css": ":root {\n --size-page: 960px;\n --size-pad: 20px;\n --size-side: 180px;\n --size-rail: 220px;\n --size-gutter: 20px;\n --size-control: 24px;\n --size-control-large: 38px;\n --size-search: 160px;\n --size-step: 28px;\n --size-avatar: 32px;\n --size-face: 48px;\n --size-textarea: 70px;\n --size-dialog: 380px;\n --space-1: 2px;\n --space-2: 5px;\n --space-3: 10px;\n --space-4: 15px;\n --space-5: 20px;\n --space-6: 30px;\n}\n\n/* shell: a full-width header band, then one sheet in the canvas colour */\n.ds-page {\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\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 padding: var(--space-4) var(--size-pad) var(--space-6);\n background: var(--color-canvas);\n}\n.ds-page__columns {\n display: grid;\n grid-template-columns: var(--size-side) minmax(0, 1fr) var(--size-rail);\n align-items: start;\n gap: var(--size-gutter);\n margin: var(--space-5) 0 0;\n}\n.ds-page__side,\n.ds-page__main,\n.ds-page__rail { min-width: 0; }\n.ds-page__split {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n align-items: start;\n gap: var(--size-gutter);\n margin: var(--space-5) 0 0;\n}\n.ds-page__split--inside { margin-top: var(--space-3); }\n.ds-page__half { min-width: 0; }\n.ds-section { margin: var(--space-6) 0 0; }\n.ds-section--tight { margin-top: var(--space-5); }\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-section__label {\n margin: 0 0 var(--space-3);\n padding: 0 0 var(--space-1);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\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-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-3);\n}\n.ds-head__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-head__more {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* nav: glossy band, wordmark and account line on top, tabs standing on its lower edge */\n.ds-nav { margin: 0; }\n.ds-nav__bar {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-nav__inner {\n width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--size-pad);\n}\n.ds-nav__top {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-4) 0 var(--space-3);\n}\n.ds-brand {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\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: calc(var(--text-display) * 1.25);\n height: calc(var(--text-display) * 1.25);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 70%, 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: 72%;\n height: 72%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\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-nav__claim {\n color: var(--color-bar-text);\n font-size: var(--text-small);\n opacity: 0.85;\n}\n.ds-nav__tools {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 0 auto;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-nav__who { font-weight: var(--weight-bold); }\n.ds-nav__tool {\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration);\n}\n.ds-nav__tool:hover,\n.ds-nav__tool.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n}\n.ds-nav__input {\n width: var(--size-search);\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__input::placeholder { color: var(--color-text-muted); opacity: 1; }\n.ds-nav__input:focus,\n.ds-nav__input.is-focus { outline: var(--focus-ring); }\n.ds-nav__tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__tab {\n display: block;\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n background: color-mix(in srgb, var(--color-bar-text) 20%, transparent);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-h3);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n}\n.ds-nav__tab:hover,\n.ds-nav__tab.is-hover { background: color-mix(in srgb, var(--color-bar-text) 34%, transparent); }\n.ds-nav__tab.is-current {\n padding-top: calc(var(--space-2) + var(--space-1));\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__tab[href=\"#home\"] {\n padding-top: calc(var(--space-2) + var(--space-1));\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-page:has(#home:target) .ds-nav__tab[href=\"#home\"] {\n padding-top: calc(var(--space-2) + var(--space-1));\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-page:has(#album:target) .ds-nav__tab[href=\"#album\"] {\n padding-top: calc(var(--space-2) + var(--space-1));\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-page:has(#settings:target) .ds-nav__tab[href=\"#album\"] {\n padding-top: calc(var(--space-2) + var(--space-1));\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-page:has(#comments:target) .ds-nav__tab[href=\"#comments\"] {\n padding-top: calc(var(--space-2) + var(--space-1));\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-page:has(#upload:target) .ds-nav__tab[href=\"#upload\"] {\n padding-top: calc(var(--space-2) + var(--space-1));\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-nav__tab--action {\n margin-left: auto;\n background: transparent;\n font-size: var(--text-ui);\n text-decoration: var(--link-decoration);\n}\n.ds-nav__tabs-end { margin-left: auto; }\n.ds-nav__sub {\n display: flex;\n align-items: center;\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-3) var(--size-pad) 0;\n background: var(--color-canvas);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-nav__topics {\n display: flex;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__topic-item {\n padding: 0 var(--space-3);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n line-height: 1;\n}\n.ds-nav__topic-item.is-first { padding-left: 0; border-left: 0; }\n.ds-nav__topic {\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__topic:hover,\n.ds-nav__topic.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-nav__topic.is-current {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__topic[href=\"#home\"] {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-page:has(#home:target) .ds-nav__topic[href=\"#home\"] {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-page:has(#album:target) .ds-nav__topic[href=\"#album\"] {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-page:has(#comments:target) .ds-nav__topic[href=\"#comments\"] {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-page:has(#settings:target) .ds-nav__topic[href=\"#settings\"] {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-page:has(#upload:target) .ds-nav__topic[href=\"#upload\"] {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-nav__status { margin: 0 0 0 auto; }\n\n/* hero: the getting-started box. Title, lead and the big button, then three numbered steps */\n.ds-hero {\n margin: 0;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n background: var(--color-fill-1);\n box-shadow: var(--shadow-panel);\n}\n.ds-hero__top {\n display: flex;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-5) var(--space-5) var(--space-4);\n}\n.ds-hero__main {\n flex: 1 1 0;\n min-width: 0;\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;\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__action {\n flex: 0 0 auto;\n text-align: center;\n}\n.ds-hero__note {\n margin: var(--space-2) 0 0;\n color: var(--color-link-quiet);\n font-size: var(--text-small);\n}\n.ds-hero__steps {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n list-style: none;\n}\n.ds-hero__step {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n}\n.ds-hero__number {\n flex: 0 0 var(--size-step);\n width: var(--size-step);\n height: var(--size-step);\n border-radius: 50%;\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--size-step);\n text-align: center;\n}\n.ds-hero__step-body { min-width: 0; }\n.ds-hero__step-title {\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}\n.ds-hero__step-text {\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n}\n.ds-hero__step.is-done .ds-hero__number {\n background: var(--color-success);\n color: var(--color-button-text);\n}\n.ds-hero__step.is-done .ds-hero__step-title { color: var(--color-text-muted); }\n\n/* page header: a pale strip with the title on the left and the actions on the right */\n.ds-page-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n margin: var(--space-3) 0 0;\n padding: var(--space-4) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-page-header__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text { margin: var(--space-1) 0 0; }\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: separate figure tiles in one row */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-3);\n margin: var(--space-3) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat {\n padding: var(--space-3) var(--space-3) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n text-align: center;\n}\n.ds-stat__number {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n}\n.ds-stat__label {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-link-quiet);\n font-size: var(--text-small);\n}\n.ds-stat__note {\n display: block;\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n\n/* tabs: folder tabs that own the box under them */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-1);\n margin: 0;\n padding: 0 var(--space-3);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(0px - var(--border-width));\n padding: var(--space-2) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n background: var(--color-surface-strong);\n color: var(--color-heading);\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 opacity: 0.8;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { opacity: 1; }\n.ds-tabs__tab.is-current {\n position: relative;\n border-bottom-color: var(--color-surface);\n background: var(--color-surface);\n opacity: 1;\n}\n.ds-tabs__count { font-weight: var(--weight-body); }\n.ds-box {\n margin: 0;\n padding: var(--space-2) var(--space-4) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n}\n.ds-box--flush { padding: var(--space-4); }\n.ds-box__title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-4) 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 { color: var(--color-heading-alt); font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); }\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 { font-weight: var(--weight-bold); }\n.ds-prose mark {\n background: var(--color-notice);\n color: var(--color-notice-text);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose a { color: var(--color-link); text-decoration: var(--link-decoration); }\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin: 0;\n}\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\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--title {\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover { color: var(--color-link); }\n\n/* buttons */\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-buttons--bar { margin: var(--space-2) 0 var(--space-3); }\n.ds-button {\n display: inline-block;\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 70%, 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: calc(var(--size-control) - var(--border-width) - var(--border-width));\n text-align: center;\n text-decoration: none;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n 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: 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--large {\n height: var(--size-control-large);\n padding: 0 var(--space-5);\n border-radius: calc(var(--radius-control) + var(--radius-control));\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: calc(var(--size-control-large) - var(--border-width) - var(--border-width));\n}\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}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: var(--color-link-quiet);\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: var(--color-button-secondary); }\n.ds-button--danger {\n border-color: color-mix(in srgb, var(--color-danger) 70%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 30%) 0, var(--color-danger) 55%, color-mix(in srgb, var(--color-danger), var(--color-shadow) 14%) 100%);\n color: var(--color-button-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), var(--color-button-text) 42%) 0, color-mix(in srgb, var(--color-danger), var(--color-button-text) 10%) 55%, var(--color-danger) 100%);\n color: var(--color-button-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: var(--color-danger); }\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n cursor: default;\n}\n\n/* form: labels above their fields */\n.ds-form { margin: 0; }\n.ds-form__row { margin: 0 0 var(--space-3); }\n.ds-form__pair {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-form__label {\n display: block;\n margin: 0 0 var(--space-1);\n color: var(--color-text);\n font-size: var(--text-ui);\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-radius: var(--radius-control);\n background: var(--fill-input);\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-body);\n}\n.ds-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__select { padding: 0 var(--space-1); }\n.ds-form__textarea {\n height: var(--size-textarea);\n resize: vertical;\n}\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 border-color: var(--color-border);\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 color: var(--color-danger);\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 font-size: var(--text-ui);\n}\n.ds-form__checkbox { margin: 0; }\n.ds-form__actions {\n display: flex;\n align-items: center;\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-muted);\n}\n.ds-form__or {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* table */\n.ds-table {\n width: 100%;\n margin: var(--space-2) 0 0;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-collapse: collapse;\n border-spacing: 0;\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-table--first { margin-top: 0; }\n.ds-table__head {\n padding: var(--space-2) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-align: left;\n text-transform: var(--ui-transform);\n}\n.ds-table__cell {\n padding: var(--space-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--color-surface);\n color: var(--color-text);\n vertical-align: middle;\n}\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n.ds-table__cell.is-numeric { font-weight: var(--weight-bold); }\n.ds-table__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}\n.ds-table__summary {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* list: the activity stream. A coloured initial square, one line of who did what, a quoted line, meta */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item.is-first { border-top: 0; }\n.ds-list__avatar {\n flex: 0 0 var(--size-avatar);\n width: var(--size-avatar);\n height: var(--size-avatar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--color-fill-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: calc(var(--size-avatar) - var(--border-width) - var(--border-width));\n text-align: center;\n}\n.ds-list__avatar--2 { background: var(--color-fill-2); }\n.ds-list__avatar--3 { background: var(--color-fill-3); }\n.ds-list__avatar--4 { background: var(--color-fill-4); }\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__title {\n margin: 0;\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-list__text {\n margin: var(--space-2) 0 0;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n background: var(--color-surface-alt);\n}\n.ds-list__meta {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list__tags {\n display: flex;\n gap: var(--space-1);\n margin-left: auto;\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: calc(var(--text-small) + var(--space-2));\n text-decoration: none;\n vertical-align: baseline;\n white-space: nowrap;\n}\n.ds-badge--count {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-badge--tag {\n background: var(--color-surface-strong);\n color: var(--color-link-quiet);\n font-weight: var(--weight-body);\n}\n.ds-badge--tag:hover,\n.ds-badge--tag.is-hover { color: var(--color-link); }\n.ds-badge--new {\n background: var(--color-accent-alt);\n color: var(--color-button-text);\n}\n.ds-badge--success {\n background: var(--color-success);\n color: var(--color-button-text);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n color: var(--color-accent-text);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n color: var(--color-button-text);\n}\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-badges--key {\n gap: var(--space-2) var(--space-4);\n margin: var(--space-3) 0 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* grid: two by two module boxes, each with a coloured head strip */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-3);\n margin: 0;\n}\n.ds-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n.ds-grid__cell {\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n overflow: hidden;\n}\n.ds-grid__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-grid__head { background: var(--color-fill-2); }\n.ds-grid__cell--3 .ds-grid__head { background: var(--color-fill-3); }\n.ds-grid__cell--4 .ds-grid__head { background: var(--color-fill-4); }\n.ds-grid__title {\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}\n.ds-grid__count {\n color: var(--color-link-quiet);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n.ds-grid__body { padding: var(--space-2) var(--space-3) var(--space-3); }\n.ds-grid__text {\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n}\n.ds-grid__more {\n margin: 0;\n font-size: var(--text-small);\n}\n\n/* panel: the right rail box */\n.ds-panel {\n margin: 0 0 var(--space-5);\n padding: var(--space-3) var(--space-4) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\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 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body { margin: 0; }\n.ds-panel__text { margin: 0 0 var(--space-3); }\n.ds-panel__field { margin: 0 0 var(--space-2); }\n.ds-panel__actions {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-panel__more { margin-left: auto; font-size: var(--text-small); }\n\n/* sidebar: the left menu, the member card and the tag cloud */\n.ds-sidebar { margin: 0 0 var(--space-5); }\n.ds-sidebar__title {\n margin: 0 0 var(--space-1);\n padding: 0 0 var(--space-1);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading-alt);\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 letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\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 gap: var(--space-2);\n padding: var(--space-1) var(--space-2);\n border-radius: var(--radius-control);\n}\n.ds-sidebar__item.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__here { color: var(--color-heading); }\n.ds-sidebar__count {\n margin-left: auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n white-space: nowrap;\n}\n.ds-sidebar__item.is-current .ds-sidebar__count { color: var(--color-heading); }\n.ds-sidebar__more {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n}\n.ds-me {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n}\n.ds-me__face {\n flex: 0 0 var(--size-face);\n width: var(--size-face);\n height: var(--size-face);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--color-fill-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-bold);\n line-height: calc(var(--size-face) - var(--border-width) - var(--border-width));\n text-align: center;\n}\n.ds-me__body { min-width: 0; }\n.ds-me__name {\n margin: 0;\n color: var(--color-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-me__text {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-cloud {\n margin: var(--space-2) 0 0;\n padding: 0;\n line-height: 1.5;\n}\n.ds-cloud__tag {\n margin-right: var(--space-1);\n color: var(--color-link);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-cloud__tag:hover,\n.ds-cloud__tag.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-cloud__tag--2 { font-size: var(--text-base); }\n.ds-cloud__tag--3 { font-size: var(--text-h3); font-weight: var(--weight-bold); }\n.ds-cloud__tag--4 { font-size: var(--text-h2); font-weight: var(--weight-bold); }\n.ds-rank {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-rank__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-rank__item.is-first { border-top: 0; }\n.ds-rank__number {\n flex: 0 0 auto;\n color: var(--color-text-muted);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-rank__body { min-width: 0; }\n.ds-rank__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* notice */\n.ds-notice {\n margin: var(--space-3) 0 0;\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-notice);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n}\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n\n/* pagination */\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 font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-pagination__link {\n display: block;\n padding: var(--space-1) var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--color-surface);\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { border-color: var(--color-link); }\n.ds-pagination__link.is-current {\n border-color: var(--color-border-strong);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-pagination__link.is-disabled {\n border-color: var(--color-border-muted);\n color: var(--color-disabled-text);\n font-weight: var(--weight-body);\n}\n.ds-pagination__gap { padding: 0 var(--space-1); color: var(--color-text-muted); }\n\n/* breadcrumb */\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 line-height: var(--line-body);\n}\n.ds-breadcrumb__sep { color: var(--color-text-muted); }\n.ds-breadcrumb__current { color: var(--color-text); font-weight: var(--weight-bold); }\n\n/* dialog: a framed box with a grey title strip */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-5);\n border-radius: var(--radius-panel);\n background: var(--color-overlay);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n overflow: hidden;\n}\n.ds-dialog__title {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-strong);\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-body);\n}\n.ds-dialog__close {\n color: var(--color-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-decoration: var(--link-decoration);\n}\n.ds-dialog__body { padding: var(--space-3); }\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: 0 var(--space-3) var(--space-3);\n}\n\n/* empty state */\n.ds-empty {\n padding: var(--space-5) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n text-align: center;\n}\n.ds-empty--inset {\n margin: var(--space-2) 0 0;\n border: 0;\n background: transparent;\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-h2);\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-link-quiet);\n font-size: var(--text-ui);\n}\n\n/* footer: an inverted band with four link columns and a line of small print */\n.ds-footer {\n margin: 0;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-footer__inner {\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-5) var(--size-pad);\n}\n.ds-footer__cols {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--size-gutter);\n}\n.ds-footer__title {\n margin: 0 0 var(--space-2);\n color: var(--color-inverse-text);\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-footer__list {\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-footer__item { margin: 0 0 var(--space-1); }\n.ds-footer__link {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration-quiet);\n opacity: 0.85;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n opacity: 1;\n}\n.ds-footer__legal {\n margin: var(--space-4) 0 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 25%, transparent);\n font-size: var(--text-small);\n opacity: 0.85;\n}\n", "specimen.html": "\n\n\n\nchronoskin: Web 2.0 gloss member dashboard specimen\n\n\n\n\n\n
\n
\n
\n
\n chronoskin\n photo albums you keep with friends\n
\n Hello, maren_holt\n Album settings\n Sign out\n
\n \n \n
\n
\n
\n \n
\n
\n
\n \n

You have used 38 of 200 uploads this month.

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

Welcome back, Maren. Two steps left.

\n

Your first album is up. Invite the people who were there and they can add their own pictures.

\n
\n
\n Invite your friends\n

or hide this box

\n
\n
\n
    \n
  1. \n 1\n
    \n

    Upload some photos

    \n

    Done: 38 pictures in the album Harbour weekend.

    \n
    \n
    2. \n
  2. \n 2\n
    \n

    Invite your friends

    \n

    Send a link by mail. They need no account to look.

    \n
    \n
    3. \n
  3. \n 3\n
    \n

    Label what you see

    \n

    A few words on each picture and you will find it again.

    \n
    \n
    4. \n
\n
\n\n
\n\n
\n
\n M\n
\n

maren_holt

\n

member since May

\n
\n
\n\n
\n

Your things

\n \n
\n\n
\n

Your labels

\n

\n allotment\n autumn\n boats\n bridges\n coast\n dogs\n evening\n ferry\n fog\n harbour\n kites\n market\n night\n picnic\n rain\n rooftops\n sea\n signs\n snow\n trains\n windows\n

\n

All 64 labels

\n
\n\n
\n

Online now

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

What your contacts have been doing

\n

feed

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

Your groups

\n

find more groups

\n
\n
\n
\n

Small boats

212 members
\n
\n

Dinghies, skiffs and anything that fits on a trailer. 9 new photos today.

\n

Open the pool

\n
\n
\n
\n

Fog and mist

1,480 members
\n
\n

Mornings when the far bank is missing. 31 new photos today.

\n

Open the pool

\n
\n
\n
\n

Allotment diaries

96 members
\n
\n

A year on one plot, a picture a week. 2 new photos today.

\n

Open the pool

\n
\n
\n
\n

Painted signs

540 members
\n
\n

Shop fronts, market stalls and chalk boards. 14 new photos today.

\n

Open the pool

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

Bring a friend

\n
\n

Albums are better with the other half of the pictures. Type an address and we send the link.

\n

\n
\n Send invite\n How it works\n
\n
\n
\n\n
\n

Most looked at this week

\n
    \n
  1. 1Ferry in the fogby you, 1,874 views
    2. \n
  2. 2The empty fairgroundby oskar.lind, 1,622 views
    3. \n
  3. 3Kites over the estuaryby ines_v, 1,151 views
    4. \n
  4. 4Rail yard at dawnby tobias_r, 1,047 views
    5. \n
\n
\n\n
\n

Room for more

\n
\n

A paid account has no monthly limit and keeps the full-size files.

\n
\n See the plans\n
\n
\n
\n
\n\n
\n\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. →
    3. \n
  3. Your photos
    4. \n
  4. →
    5. \n
  5. Harbour weekend
    6. \n
\n\n
\n
\n

Harbour weekend

\n

An album of 38 photos shared with 6 people, started on 4 October.

\n
\n
\n Share album\n Add photos\n
\n
\n\n \n\n
\n \n
\n
\n Add photos\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
PhotoLabelsAdded bySeen byCommentsViews
Ferry in the fog NEWferry, fog, seamaren_holtEveryone01,874
Rooftops after rainrooftops, rainmaren_holtEveryone0312
Net menders on the slipharbour, boatsoskar.lindContacts only0141
Harbour office, closedsigns, windowsines_vHidden083
\n
\n

Showing 1 to 4 of 38 photos

\n \n
\n

\n Everyone open to all\n Contacts only your 23 contacts\n Hidden just you\n NEW added today\n 38 in the album\n Pro member\n harbour fog labels\n

\n
\n
\n\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. →
    3. \n
  3. Harbour weekend
    4. \n
  4. →
    5. \n
  5. Comments
    6. \n
\n\n
\n
\n

Harbour weekend

\n

What the people in this album have written under its photos.

\n
\n
\n Back to the photos\n
\n
\n\n
\n \n
\n
\n

No comments yet

\n

Nobody has written under this album. Invite the people who were there.

\n Invite someone\n
\n
\n
\n\n
\n
\n
\n

Comments on your other albums

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

Ask for the first one

\n
\n

People write more when they are asked. Send the album to someone who was there.

\n

\n
\n Send the album\n Who can comment?\n
\n
\n
\n
\n

People in this album

\n \n
\n
\n
\n\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. →
    3. \n
  3. Harbour weekend
    4. \n
  4. →
    5. \n
  5. Settings
    6. \n
\n\n
\n
\n

Harbour weekend

\n

The name, the date and who may see and add to this album.

\n
\n
\n Back to the photos\n
\n
\n\n
\n \n
\n
\n
\n

Album details

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

Write the date as 4 Oct 2007.

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

Shown under the album name. Plain text only.

\n
\n
\n \n
\n
\n \n or\n cancel\n
\n
\n
\n
\n
\n

Sharing an album

\n

Every album has one address. Anyone you send it to can look without signing up, and only people you invite can add to it. You can change this at any time on the photos tab.

\n

Who sees what

\n

A photo is as open as its album unless you say otherwise. Hidden photos stay in the count but show to nobody else.

\n

Three things to know

\n
    \n
  • Labels are shared: a word you add is a word everybody can search.
    • \n
  • Full-size files are kept for thirty days on a free account.
    • \n
  • An album feed lives at the album address with /feed on the end.
    • \n
\n
\n

\n The photos\n The comments\n Add photos\n Your home page\n

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

Delete this album

\n
\n

Deleting removes the album, its 38 photos and everything written under them. It cannot be taken back, so we ask once more before it happens.

\n
\n \n Hide photos instead\n
\n
\n
\n
\n
\n
\n
\n

Delete this album? close

\n
\n

All 38 photos and their comments go with it. Pictures your friends added stay in their own accounts.

\n
\n
\n Keep it\n \n
\n
\n
\n
\n
\n\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. →
    3. \n
  3. Your photos
    4. \n
  4. →
    5. \n
  5. Upload photos
    6. \n
\n\n
\n
\n

Upload photos

\n

Pick the files, say where they go, and they are in the album a minute later.

\n
\n
\n Back to the album\n
\n
\n\n
\n

Uploaded. 12 photos were added to Harbour weekend and your contacts can see them now.

\n

Two files were skipped. They are larger than the 10 MB limit of a free account.

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

The last batch

\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
FileResultSize
quay-morning-01.jpgAdded2.4 MB
quay-morning-02.jpgAdded3.1 MB
net-menders.jpgNeeds a label1.8 MB
harbour-panorama.tifToo large41.0 MB
ferry-full-size.tifToo large28.6 MB
\n
\n

Showing 5 of 14 files, 12 added and 2 skipped

\n See them in the album\n
\n
\n
\n\n
\n
\n

Send some more

\n
\n
\n \n \n

Up to 10 MB each. You have used 38 of 200 uploads this month.

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n
\n
\n Upload 3 photos\n or\n cancel\n
\n
\n
\n
\n
\n\n
\n\n
\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.web-2-0-gloss.portal.s04.p04.t04.u04\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"web-2-0-gloss\",\n \"years\": [\n 2005,\n 2009\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-w2-4444\",\n \"short\": \"v1-w2-4444\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #bbccd9;\n --color-canvas: #edf2f6;\n --color-surface: #ffffff;\n --color-surface-alt: #f8f8f8;\n --color-surface-strong: #cadcea;\n --color-bar: #133855;\n --color-bar-text: #ffffff;\n --color-bar-alt: #cadcea;\n --color-bar-alt-text: #133855;\n --color-inverse: #444444;\n --color-inverse-text: #ffffff;\n --color-text: #444444;\n --color-text-muted: #888888;\n --color-heading: #000000;\n --color-heading-alt: #133855;\n --color-link: #336699;\n --color-link-quiet: #666666;\n --color-link-visited: #5c8ab3;\n --color-link-hover: #4183c4;\n --color-link-active: #000000;\n --color-border: #c6ccd3;\n --color-border-strong: #b4b4b4;\n --color-border-muted: #ebeef1;\n --color-accent: #f0a030;\n --color-accent-text: #000000;\n --color-accent-alt: #9c4a1c;\n --color-fill-1: #ffffff;\n --color-fill-2: #cadcea;\n --color-fill-3: #f0f0f8;\n --color-fill-4: #e0e0e0;\n --color-button: #000000;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #f0f0f0;\n --color-button-secondary-text: #444444;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #b4b4b4;\n --color-disabled: #f0f0f0;\n --color-disabled-text: #888888;\n --color-danger: #c01500;\n --color-danger-surface: #fee5f2;\n --color-success: #3b7a1f;\n --color-warning: #ffe28a;\n --color-notice: #fffbe4;\n --color-notice-text: #444444;\n --color-focus: #4183c4;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 0, 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: Helvetica, Arial, FreeSans, sans-serif;\n --font-heading: Helvetica, Arial, FreeSans, sans-serif;\n --font-ui: Helvetica, Arial, FreeSans, sans-serif;\n --font-mono: Monaco, \"Courier New\", monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 16px;\n --text-display: 28px;\n --text-h1: 20px;\n --text-h2: 16px;\n --text-h3: 13px;\n --line-body: 1.4;\n --line-heading: 1.3;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 400;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: solid;\n --radius-control: 5px;\n --radius-panel: 5px;\n --radius-pill: 10px;\n --radius-page: 8px;\n --shadow-panel: 0 1px 3px color-mix(in srgb, var(--color-shadow) 15%, transparent);\n --shadow-control: 0 1px 2px color-mix(in srgb, var(--color-shadow) 25%, transparent);\n --shadow-control-hover: 0 1px 3px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 2px 8px color-mix(in srgb, var(--color-shadow) 35%, transparent);\n --shadow-text: 0 -1px 0 color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --fill-page: var(--color-page);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 22%) 0, var(--color-bar) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 75%) 0, var(--color-bar-alt) 100%);\n --fill-inverse: var(--color-inverse);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 40%) 0, var(--color-accent) 100%);\n --fill-panel: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface-alt) 100%);\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 22%) 50%, var(--color-button) 50%, color-mix(in srgb, var(--color-button), white 8%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 55%) 0, color-mix(in srgb, var(--color-button), white 32%) 50%, color-mix(in srgb, var(--color-button), white 12%) 50%, color-mix(in srgb, var(--color-button), white 18%) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 80%) 0, var(--color-button-secondary) 100%);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }