fertig 1.0.2 → 1.1.0

package/CHANGELOG.md

@@ -6,6 +6,165 @@ is the token names, the class names (the seven, plus the layout utilities),
 and the ARIA attributes the component layer reads — changes to any of those
 are breaking.
 
+## [1.1.0] — 2026-08-31
+
+A visual refresh and a component-first repositioning. No API breaks — the same
+tokens, classes and attributes — but the default look changes visibly.
+
+### Added
+
+- **Named accents.** `data-accent="indigo|sky|sage|clay|plum|gold|slate"` on any
+  element retints everything inside it: links, focus rings, filled buttons, the
+  caret, the selection. Scoped rather than global, so one section can differ
+  from the rest of a page. Each pair is measured — the light tone clears AA as
+  link text on paper, the dark tone clears it on the dark ground.
+- **Motion tokens.** `--ease-out`, `--ease-in`, `--ease` and the durations
+  `--dur-1` / `--dur-2`. The sheet had been animating with a bare `ease`, which
+  is the browser default and the flattest curve available.
+- `--rs`, a small radius for inline chips and code, so they do not inherit the
+  larger control radius and read as lozenges.
+
+### Changed
+
+- **The default accent is indigo**, not the desaturated navy it was. Measured
+  6.28:1 as link text on paper and 6.39:1 for a white label on the fill in
+  light; 8.72:1 and 10.26:1 in dark. Both sit inside sRGB.
+- **Cards no longer paint a tinted strip behind their header and footer.** A
+  filled bar across the top of a card is the old panel-heading pattern and is
+  what dated the sheet on sight; a hairline separates just as well and lets the
+  card read as one surface.
+- Radii up: `--r` 6px → 9px, `--rw` 10px → 14px. Controls have more room —
+  buttons and fields gained roughly a tenth of an em of padding.
+- More things transition, on the named curves: tabs, badges, cards, segmented
+  controls and popover items, alongside the controls that already did.
+  `:focus-visible` is explicitly excluded — a focus ring has to be there the
+  instant focus lands, not fade in after it.
+
+### Fixed
+
+- The tone bar on `.card[data-tone]` follows the corner radius again. It was an
+  inset shadow, which does not track the curve cleanly at the larger radius —
+  it read as a detached line with gaps at both top corners. It is a background
+  layer now, which the radius clips. The duplicate indicator on
+  `.card > header` is gone with it: the filled header used to hide it, and
+  without the fill both were painting.
+- Navigation lists. `[data-layout=sidebar]` shipped without any styling for the
+  nav inside it, so the obvious markup — a `<menu>` in a `<nav>` — came out as
+  a boxed list group. It is navigation now: no rules between items, no bullets,
+  and the link fills the row.
+- `aside` and `search` are block landmarks that had no vertical rhythm of their
+  own, so whatever followed sat flush against them.
+
+### Fixed — audit pass
+
+An audit pass. Everything here came out of `docs/known-flaws.md`, which lists
+what was found, what was verified in a browser, and what was left alone on
+purpose.
+
+- **The shell survives a framework wrapper.** The page shell was `body > *`, so
+  a React, Vue, Svelte or Next app rendering into `<div id="root">` lost the
+  measure, the paper surface and the gutters with nothing on screen to say why.
+  The shell now also matches the children of a single `#root`, `#app`,
+  `#__next` or `[data-fertig]` wrapper. Every added selector sits inside
+  `:where()`, so specificity is unchanged.
+- **A floor under the floor.** Every colour token was an unguarded
+  `light-dark()`. In an engine without it the tokens were invalid at
+  computed-value time, so backgrounds went transparent and colour was
+  inherited — a page could land unreadable rather than plain. A
+  `@supports not (color: light-dark(…))` block at the end of the layer restates
+  the palette in flat sRGB, in both schemes.
+- **`data-size`, `data-variant` and `data-block` are scoped to controls.** As
+  bare attribute selectors they restyled any element carrying those very common
+  attribute names — a `<span data-size="sm">` picked up button padding.
+- **The focus ring no longer reshapes what it rings.** `:focus-visible` set
+  `border-radius: var(--r)`, which is the element's own radius, not the ring's:
+  a focused `<dialog>` snapped from `--rw` (14px) to `--r` (9px). Outlines
+  already follow the element's corners, so the declaration is simply gone.
+- **`<svg>` stays inline.** It was in the `display: block` rule with `img`,
+  `video` and `iframe`, which dropped every inline icon onto its own line.
+- **Toasts can stack.** Two `[popover][data-toast]` elements shared one set of
+  corner coordinates and overlapped, and an open popover is in the top layer so
+  no ordinary wrapper could stack them. `<div popover="manual"
+  data-toast-region>` is now the popover, with a `<div data-toast>` per message.
+- **A selected tab is visible in Windows High Contrast.** Its cue was a
+  `box-shadow` that the forced-colors layer removes, and the replacement set
+  `border-color` on an element with `border: 0`. It now sets a real
+  `border-bottom`.
+- **`--on-ac` survives a custom `--ac` in shipping browsers.** The
+  `contrast-color()` guard is real but almost nothing implements it. A relative
+  colour branch reaches the same black-or-white decision from the accent's own
+  lightness, and has been cross-engine since 2024.
+- **`interpolate-size: allow-keywords` is set on `details`, not `:root`.** It is
+  inherited, so the old placement changed how *your* `height: auto` transitions
+  behaved as a side effect of animating a disclosure.
+- **Two universal rules narrowed to what the sheet actually styles.**
+  `scrollbar-width: thin` no longer thins the page's own scrollbar (a
+  target-size problem for imprecise pointers), and `corner-shape: squircle` no
+  longer reshapes your components.
+- **`input[type=image]` is a button, not a text field.** It was missing from the
+  `:not()` list and got full-width sunken-field treatment.
+- **The tooltip is flow-relative and reachable on touch** — logical inset
+  properties with a `:dir(rtl)` offset, and `:active` alongside `:hover`. It is
+  still decorative, and now says so in the sheet, the README and the docs.
+- **`a[target=_blank]`** no longer appends an arrow to a link wrapping an image.
+- **Print keeps the footer.** It was hidden along with the toolbar, which drops
+  the legal line, the contact and the citations from every printout.
+- **The small variant stays small on touch.** `(pointer: coarse)` forced
+  `min-height: 44px` on everything; `data-size="sm"` opts down to 32px, still
+  above the 24px WCAG 2.5.8 floor.
+- `package.json`'s size claim, the one string `tools/sizes.py` does not reach.
+
+### Changed
+
+- **`--a1` / `--a2` are now `--fertig-a1` / `--fertig-a2`.** These are
+  `@property` registrations, and a registration is global — it cannot be
+  layered, scoped or overridden. Two-character names meant a consumer's own
+  `--a1` was silently retyped to `<number>`. The other token names are
+  deliberately short and are unchanged; they are ordinary custom properties and
+  the documented API.
+
+  **This stays a minor release**: the prefixed tokens read the bare ones as a
+  fallback (`--fertig-a1: var(--a1, .08)`), so a sheet that set `--a1` on
+  `:root` — the documented way — keeps working exactly as it did, verified in a
+  browser. A *scoped* `--a1` further down the tree does not reach the shadows,
+  but it never did: `--sh1` has always been computed on `:root`, so the
+  fallback restores the capability that existed, not less. `--a1` itself is no
+  longer registered, which is the whole point — nothing of yours gets retyped.
+  Prefer the prefixed names in new code.
+
+## [1.0.3] — 2026-08-30
+
+### Changed
+
+- `--mut` lifted from 50%/70% lightness to 47%/73%. The weakest muted pairing
+  — on the desktop ground in light, on chrome in dark — was 4.96:1 and 5.99:1,
+  a hair over AA; it is 5.65:1 and 6.70:1 now. Not taken to AAA, which would need 41.5%: that
+  is close enough to `--fg` that muted text stops reading as secondary at all.
+
+### Added
+
+- `--nw`, the column the toolbar's contents line up with. It follows `--w`, so
+  nothing changes by default, and `<nav class="wide">` re-points it at the wide
+  column — an app screen built on `.wide` no longer gets a wordmark floating in
+  the middle of the viewport while its content spans the full width.
+
+### Fixed
+
+- Breadcrumb separators no longer leak into other navigation. The `/` was on
+  `nav[aria-label] li + li`, so any labelled `<nav>` containing a `<ul>` — an
+  ordinary sidebar — got breadcrumb slashes between its links. Scoped to `ol`,
+  matching the layout rule directly above it and the documented markup.
+- A `.grid` no longer collides with the block that follows it. It is a
+  block-level container and nothing gave it vertical rhythm. The space is on
+  `.grid + *` rather than a margin on `.grid` itself, which would collapse out
+  through the top of a padding-less container and open a seam above it.
+- A segmented control (`role="group"`) with four or more buttons no longer
+  pushes the page sideways on a narrow screen. It scrolls within its own width
+  instead of wrapping, which would break the joined run of corner radii.
+- A `<dl>` with a long value no longer widens the page. The value column was
+  a bare `1fr`, whose automatic minimum is its content, so it could not shrink;
+  it is `minmax(0, 1fr)` now.
+
 ## [1.0.2] — 2026-08-30
 
 ### Fixed
@@ -28,6 +187,15 @@ Packaging only; the stylesheet is unchanged apart from its version banner.
 - `fertig` and `fertig.css` added as keywords: the package is `fertig`, but
   people search npm for the project's name.
 
+## [1.0.1] - 2026-08-30
+
+### Changed
+
+- npm keywords only: added `css-framework`, `lightweight`, `minimalist`, `html`,
+  `frontend`, `ui` and `responsive`. `css-framework` is the term the rest of the
+  category (Pico, Water.css) registers under, and it was missing. No stylesheet
+  changes — the CSS is byte-identical to 1.0.0.
+
 ## [1.0.0] — 2026-08-30
 
 First release. The project and the npm package are `fertig`. The stylesheet

package/README.md

@@ -1,10 +1,53 @@
 # fertig
 
-A classless CSS file for developers who want a project to look presentable in
-the ten seconds before they start building it. Link it, write ordinary HTML,
-and the page is finished.
+A classless CSS file that gives you **components**, not just styled elements —
+menus, dialogs, drawers, toasts and tooltips from plain semantic HTML,
+addressed by the ARIA that makes them accessible, and working with JavaScript
+switched off.
+
+Link it, write ordinary HTML, and the page is finished.
+
+**32.8 KB raw · 8.4 KB gzipped · no build step · no dependencies · no JavaScript.**
+
+### What makes it different
+
+Surveyed across the eleven most-used classless stylesheets on 2026-08-31
+([working notes](docs/classless-landscape-2026.md)):
+
+- **Components addressed by ARIA.** Only one other classless sheet ships a
+  single ARIA-addressed component. None ships tabs, a segmented control, or an
+  anchored popover menu.
+- **Behaviour without JavaScript.** Others style `<dialog>` and leave the open
+  and close to you. Here `popover`, `command` and anchor positioning do it —
+  [audited with scripting disabled](#components-that-work-without-javascript).
+- **Modern CSS.** Zero of the eleven use `oklch()`, `light-dark()`, `@layer`,
+  `@property`, container queries or anchor positioning. This sheet uses all of
+  them.
+- **Cascade-layered.** It lives in `@layer fertig`, so your own unlayered CSS
+  wins at any specificity and overriding never needs `!important`. No other
+  classless sheet does this.
+- **RTL by construction.** Written in logical properties throughout, not
+  patched with `[dir=rtl]` overrides afterwards.
+
+It is *not* the smallest — Concrete.css is 1.2 KB gzipped, and most of the
+field is a fraction of this because it styles elements and stops there. Against
+the two classless sheets that also ship a component layer, fertig is the
+lightest: 8.4 KB against matcha's 8.6 KB and Pico classless at 10.2 KB, and the
+only one of the three whose components work without JavaScript. Size is a
+constraint here, not the pitch.
+
+## Components that work without JavaScript
+
+Audited in a browser with scripting disabled:
+
+| | |
+|---|---|
+| Popover menu, dialog, drawer, toast, tooltip, disclosure | **work with no script** |
+| Tabs | **styled only** — switching panels needs ~8 lines of your own |
 
-**28.0 KB raw · 7.6 KB gzipped · no build step · no dependencies.**
+Tabs are the one gap, and it is deliberate: `aria-selected` must be a real
+attribute for a screen reader to announce the right tab, and CSS cannot set
+attributes. The snippet is in the docs.
 
 ```html
 <link rel="stylesheet" href="fertig.css">
@@ -31,8 +74,11 @@ npm install fertig
 
 ## What it is
 
-System type with macOS window furniture and a classic sense of depth —
-a nod to System 7 and Win98, not a costume.
+Opinions, so you don't have to have them: system type, one accent, one
+measure, a window on a desktop. The structure is classic — a title bar, sunken
+fields, raised buttons — and the finish is macOS: vibrancy, hairlines, soft
+radii, the blue focus ring. None of it is a period costume, and none of it is
+a picture of an OS: it is all CSS that every current engine already ships.
 
 - **System type, set properly** — 16px on a 1.65 line height across roughly
   seventy characters. Code keeps a monospace face, where it earns its place.
@@ -58,9 +104,25 @@ Direct children of `<body>` are the containers:
 </body>
 ```
 
-Using a framework where `body` is not the semantic parent? Re-point the four
-container rules at your root element (`#root`, `#__next`) — they are the only
-place `body >` appears.
+One wrapper is fine. React, Vue, Svelte and Next render into a mount node, so
+the shell matches `body`'s children *or* the children of a single `#root`,
+`#app`, `#__next`, or `[data-fertig]` wrapper:
+
+```html
+<body>
+  <div id="root">
+    <nav>…</nav>
+    <main>…</main>
+  </div>
+</body>
+```
+
+Deeper than that, or a differently named mount node, and you re-point the shell
+yourself — it is the only place `body >` appears:
+
+```css
+#shell > *, #shell > header, #shell > main, #shell > footer { /* … */ }
+```
 
 ## Components
 
@@ -76,11 +138,25 @@ accessible by construction.
 | Breadcrumb | `<nav aria-label="Breadcrumb"><ol>` |
 | Dialog | `<dialog>` — animates in, blurs the page behind; optional `<header>`/`<footer>` pin while the body scrolls |
 | Loading | `aria-busy="true"` (inline spinner) |
-| Tooltip | `data-tooltip="…"` |
-| Button variants | `data-variant="ghost\|link"`, `data-size="sm\|lg"`, `data-icon`, `data-block` |
+| Tooltip | `data-tooltip="…"` — decorative; put the same words in `aria-label` too |
+| Button variants | `data-variant="ghost\|link"`, `data-size="sm\|lg"`, `data-icon`, `data-block` — on controls only, so they cannot catch a `<span data-size>` of yours |
 | Card anatomy | `<header>` / `<footer>` inside `.card`; `<a class="card">` lifts on hover |
 | Tones | `data-tone="ok\|warn\|err"` retints any component |
 
+And a second set, added for parity with the component libraries — same rule,
+no classes:
+
+| Component | Markup |
+|---|---|
+| Avatar | `data-avatar` on an `<img>` or on initials in a `<span>`; `="sm\|lg"` |
+| Skeleton | `data-skeleton` on the element that is still loading |
+| Sheet / drawer | `<dialog data-side="left\|right\|bottom">` — the same dialog, docked to an edge |
+| Toast | `[popover][data-toast]` — non-modal, parked in a corner. Several at once: `<div popover="manual" data-toast-region>` with a `<div data-toast>` per message |
+| List group | a plain `<menu>` outside a popover becomes a bordered list |
+| Nav menu | a `<menu>` inside a `<nav>` is navigation instead — no rules, no bullets, `aria-current` marks the page |
+| Sidebar layout | `data-layout="sidebar"` on a wrapper of two children; the first sticks |
+| Carousel | `data-carousel` — scroll snapping, with real scroll buttons where they exist |
+
 ## The seven optional classes
 
 `.row` `.grid` `.card` `.badge` `.muted` `.center` `.wide`
@@ -132,8 +208,13 @@ Override the four tokens you'd actually want to change:
 
 If you change `--ac`, check `--on-ac` too — that is the text colour sitting on
 the accent, and a light accent needs dark text to stay legible.
-`--up` / `--up2` / `--dn` are the elevation scale, `--a1` / `--a2` the shadow
-alphas, `--rw` the window radius.
+`--up` / `--up2` / `--dn` are the elevation scale, `--fertig-a1` /
+`--fertig-a2` the shadow alphas (these two are `@property` registrations, and
+a registration is global — hence the prefix), `--rw` the window radius, and `--nw` the column the toolbar's contents
+line up with. `--nw` follows `--w`, so nothing moves by default; `<nav
+class="wide">` re-points it at the wide column, which is what an app screen
+built on `.wide` wants so its wordmark doesn't float in the middle of the
+viewport.
 
 ## Also handled
 
@@ -169,12 +250,15 @@ themes, measured in-browser from the computed token values:
 
 | Pair | Light | Dark |
 |---|---:|---:|
-| Body text on paper | 16.83 | 14.94 |
-| Muted text on paper | 5.07 | 5.92 |
-| Links on paper | 5.37 | 6.17 |
-| Muted on chrome | 4.65 | 5.24 |
-| Text on accent | 5.37 | 7.63 |
-| Tones (ok / warn / err) | 4.87–5.44 | 6.13–6.74 |
+| Body text on paper | 17.05 | 15.31 |
+| Muted text on paper | 6.73 | 7.41 |
+| Links on paper | 6.38 | 8.97 |
+| Muted on chrome | 6.30 | 6.70 |
+| Muted on the desktop ground | 5.65 | 8.11 |
+| Text on accent | 6.48 | 10.63 |
+| Tones (ok / warn / err) | 4.80–6.55 | 7.63–9.43 |
+
+The tightest pair in the sheet is the warn tone on paper in light, at 4.80:1.
 
 Motion is gated behind `prefers-reduced-motion`, focus uses a visible ring at
 `:focus-visible`, and the component layer is driven by the same ARIA attributes
@@ -184,10 +268,10 @@ assistive technology reads.
 
 | Sheet | Raw | Gzip |
 |---|---:|---:|
-| **fertig** | **28.0 KB** | **7.6 KB** |
-| Pico 2 classless | 71.0 KB | 10.1 KB |
+| **fertig** | **32.8 KB** | **8.4 KB** |
+| Pico 2.1.1 classless | 69.4 KB | 10.1 KB |
 
-Measured with `gzip -9` via `npm run build`. Most of the gap is Pico's full
+Measured with `gzip -9`, KB = 1024 bytes for every row. Most of the gap is Pico's full
 colour palette and its base64-SVG control icons; see
 `docs/classless-css-research.md`.
 
@@ -204,17 +288,21 @@ button { background: hotpink }   /* wins, no !important needed */
 
 ## Modern CSS, used deliberately
 
-Everything past the baseline sits behind `@supports` and is additive:
+Everything past the floor sits behind `@supports` and is additive:
 `contrast-color()` picks the text colour on your accent so an override cannot
 fail contrast; anchor positioning attaches popover menus to their button;
 `::details-content` with `interpolate-size` animates disclosures open;
 `field-sizing` grows textareas; `corner-shape: squircle` gives continuous
 corners; `text-box: trim-both` sits headings on their cap height; and
-`@property` types the shadow alphas so elevation can transition;
-`appearance: base-select` styles the dropdown picker itself; and `.card` is a
-container you can write `@container` queries against. Without any of it,
-nothing breaks. Relative colour (`oklch(from …)`) is not in that list — it is
-baseline here, deriving both the shadow ink and the filled-button hover.
+`appearance: base-select` styles the dropdown picker itself. Without any of it,
+nothing breaks. Relative colour (`oklch(from …)`) is on that list too, for one
+job only: lightening the filled button on hover in OKLCH. The shadow alphas
+that used to need it are taken with `color-mix` against `transparent` instead —
+pixel-identical, and three years older, which is what keeps Safari 17.5 inside
+the floor. Two things are *not* on the list because they are part of the floor:
+`@property`, which types the shadow alphas so elevation can transition, and
+`container-type` on `.card`, which makes every card a container you can write
+`@container` queries against.
 
 It also answers to the OS: `prefers-reduced-motion`,
 `prefers-reduced-transparency`, `prefers-contrast`, `forced-colors`,
@@ -230,14 +318,29 @@ margins with no stranded lines.
 
 ## Browser support
 
-The policy is a two-year window: fertig targets browsers released in the last
-two years and carries nothing for the ones before them — no vendor prefixes, no
-polyfills, no fallback build. Needs `light-dark()`, `color-mix()`, `:has()`,
-`@starting-style` and relative colour — Chrome 125+, Safari 17.5+,
-Firefox 129+. Anchor positioning is
-Chromium-only for now and is wrapped in `@supports`; without it, `[popover]`
-menus centre on screen instead of sitting under their button. Everything else
-degrades to unstyled-but-readable HTML.
+The two-year window is on *browsers*, not on CSS. fertig runs in anything
+released since August 2024 and carries nothing for the ones before it — no
+vendor prefixes, no polyfills, no fallback build. The CSS it uses is mostly
+older than that: `@layer` has been cross-engine since 2022, `oklch()` and
+`color-mix()` since 2023, `light-dark()` since May 2024. The newest thing it
+*requires* is `@starting-style`, cross-engine since August 2024 — nothing it
+needs shipped inside the last two years.
+
+| Engine | Minimum | Set by |
+|---|---|---|
+| Chrome / Edge | **123** | `light-dark()` |
+| Safari | **17.5** | `light-dark()`, `@starting-style`, `text-wrap: balance` |
+| Firefox | **129** | `@starting-style`, `transition-behavior` |
+
+No component needs more than that floor — anything a component would *like* to
+have it asks for through `@supports`. Anchor positioning, for instance, is
+gated; without it `[popover]` menus centre on screen instead of sitting under
+their button. Below the floor everything degrades to unstyled-but-readable
+HTML.
+
+Per-component and per-enhancement version tables, with the shipping dates
+behind them, are in [`docs/browser-support-research.md`](docs/browser-support-research.md)
+and on the [docs site](https://moji2002.github.io/fertig/docs.html#support).
 
 ## Development
 
@@ -250,22 +353,38 @@ npm run build    # regenerate fertig.min.css and print sizes
 
 | Build | Raw | Gzip | |
 |---|---:|---:|---|
-| `fertig.min.css` | 28.0 KB | 7.6 KB | everything |
-| `fertig.core.min.css` | 21.7 KB | 6.3 KB | without the ARIA component layer |
+| `fertig.min.css` | 32.8 KB | 8.4 KB | everything |
+| `fertig.core.min.css` | 25.1 KB | 6.9 KB | without the ARIA component layer |
 
-Dropping the component layer saves 0.8 KB gzipped — worth knowing, rarely worth
+Dropping the component layer saves 1.4 KB gzipped — worth knowing, rarely worth
 doing. The weight is in the element coverage and forms, not the components.
 
 ## Files
 
+The sheet:
+
 - `fertig.css` — source, commented
 - `fertig.min.css` — minified, what you ship
-- `index.html` — landing page
-- `blocks.html` — ready-to-use markup blocks (16 of them)
-- `llms.txt` — machine-readable summary for LLMs, per llmstxt.org
-- `docs.html` — documentation
-- `app.html` — a full product screen built with no page CSS at all
+- `fertig.core.min.css` — the same without the ARIA component layer
 - `build.js` — minifier and size report
+
+The site:
+
+- `index.html` — landing page, with a live customiser that writes the token
+  block for you
+- `docs.html` — documentation
+- `blocks.html` — ready-to-use markup blocks (16 of them); the code shown is
+  generated from the live preview, so it cannot drift
+- `app.html`, `app-invoice.html` — full product screens built with no page CSS
+  at all
+- `templates/` — four whole pages: `dashboard`, `article`, `pricing`, `signin`
+- `site.css`, `site.js`, `icons.svg`, `favicon.svg` — the site's own chrome,
+  none of it part of the sheet
+
+Everything else:
+
+- `llms.txt` — machine-readable summary for LLMs, per llmstxt.org
+- `CHANGELOG.md` — what changed and why, per release
 - `docs/classless-css-research.md` — the research behind the decisions
 
 ## License

package/fertig.core.min.css

@@ -1 +1 @@
-/*! fertig v1.0.2 — a classless CSS stylesheet. MIT */@property --a1{syntax:"<number>";inherits:true;initial-value:.08}@property --a2{syntax:"<number>";inherits:true;initial-value:.06}@layer fertig,fertig-a11y;@layer fertig{:root{color-scheme:light dark;accent-color:var(--ac);caret-color:var(--ac);--f:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--fm:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--w:38rem;--r:6px;--rw:10px;--stone-100:oklch(97.5% .004 75);--stone-300:oklch(91% .006 75);--stone-500:oklch(72% .008 75);--stone-700:oklch(47% .009 75);--stone-900:oklch(26% .008 75);--sage-100:oklch(96% .022 155);--sage-300:oklch(87% .042 155);--sage-500:oklch(66% .058 155);--sage-700:oklch(47% .055 155);--sage-900:oklch(29% .038 155);--sky-100:oklch(96% .022 240);--sky-300:oklch(87% .045 240);--sky-500:oklch(64% .085 245);--sky-700:oklch(48% .095 250);--sky-900:oklch(30% .06 250);--clay-100:oklch(96% .022 45);--clay-300:oklch(88% .045 45);--clay-500:oklch(68% .085 45);--clay-700:oklch(50% .09 40);--clay-900:oklch(31% .055 40);--plum-100:oklch(96% .02 320);--plum-300:oklch(88% .038 320);--plum-500:oklch(66% .06 320);--plum-700:oklch(47% .065 320);--plum-900:oklch(29% .042 320);--gold-100:oklch(96.5% .028 90);--gold-300:oklch(89% .055 88);--gold-500:oklch(74% .085 85);--gold-700:oklch(55% .085 80);--gold-900:oklch(33% .05 80);--bg:light-dark(oklch(93.5% .006 75),oklch(16% .006 75));--el:light-dark(oklch(99.4% .002 75),oklch(21% .006 75));--face:light-dark(oklch(97.2% .005 75),oklch(25% .007 75));--fg:light-dark(oklch(22% .008 75),oklch(95% .004 75));--mut:light-dark(oklch(50% .009 75),oklch(70% .008 75));--bd:light-dark(oklch(22% .008 75 / .13),oklch(95% .004 75 / .13));--tb:light-dark(oklch(97.2% .005 75 / .85),oklch(25% .007 75 / .85));--ac:light-dark(var(--sky-700),oklch(78% .085 245));--on-ac:light-dark(#fff,#06121f);--sh:oklch(23.1% .007 286);--a1:.08;--a2:.06;--sh1:oklch(from var(--sh) l c h / var(--a1));--sh2:oklch(from var(--sh) l c h / var(--a2));--up:0 1px 1px var(--sh1);--up2:0 1px 2px var(--sh1),0 6px 16px -6px var(--sh2);--dn:inset 0 1px 2px oklch(from var(--sh) l c h / .08);--caps:.74em/1.4 var(--f)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--a1:.5;--a2:.45}}@supports (color:contrast-color(red)){:root{--on-ac:contrast-color(var(--ac))}}[data-theme=light]{color-scheme:light;--a1:.08;--a2:.06}[data-theme=dark]{color-scheme:dark;--a1:.5;--a2:.45}*,::before,::after{box-sizing:border-box}html{font:16px/1.65 var(--f);-webkit-text-size-adjust:100%;tab-size:2}body{margin:0;background:var(--bg);color:var(--fg);overflow-wrap:break-word;font-variant-numeric:slashed-zero tabular-nums}::selection{background:color-mix(in srgb,var(--ac) 28%,transparent)}:focus-visible{outline:3px solid color-mix(in srgb,var(--ac) 45%,transparent);outline-offset:1px;border-radius:var(--r)}img,svg,video,iframe{display:block;max-width:100%;height:auto}img,video{border-radius:var(--r);box-shadow:var(--up2)}body>*{max-width:var(--w);margin-inline:auto;padding-inline:1.9rem}body>header,body>main,body>footer{background:var(--el);border-inline:1px solid var(--bd)}body>header{padding-block:2.4rem .8rem}body>main{padding-bottom:2.8rem}body>footer{padding-block:1.2rem 2rem;color:var(--mut);font-size:.85em;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);border-radius:0 0 var(--rw) var(--rw);margin-bottom:2.5rem;box-shadow:0 18px 30px -22px oklch(from var(--sh) l c h / .5)}body>nav{position:sticky;top:0;z-index:9;max-width:none;padding-inline:max(1.9rem,calc(50% - var(--w) / 2 + 1.9rem),env(safe-area-inset-left),env(safe-area-inset-right));display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;padding-block:calc(.6rem + env(safe-area-inset-top,0px)) .6rem;background:var(--tb);color:var(--fg);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--bd);font-size:.92em}body>nav a{color:var(--fg);text-decoration:none;opacity:.75}body>nav a:hover{opacity:1}body>nav:is(strong,b) a{opacity:1}body>nav ul{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;padding:0;margin:0;flex:1}h1,h2,h3,h4,h5,h6{line-height:1.3;margin:1.4rem 0 .7rem;text-wrap:balance}h1{font-size:1.55rem;letter-spacing:-.015em}h2{font-size:1.25rem;letter-spacing:-.01em;margin-top:2.4rem}h3{font-size:1.08rem;margin-top:1.9rem}h4{font-size:1rem}h5,h6{font:700 var(--caps);text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}:is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}@supports (text-box:trim-both cap alphabetic){h1,h2,h3,h4{text-box:trim-both cap alphabetic}}:is(section,article) +:is(section,article){margin-top:2.8rem}p,ul,ol,dl,pre,blockquote,table,figure,details,fieldset,hr{margin:1.1rem 0}p{text-wrap:pretty}a{color:var(--ac);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}small{font-size:.85em;color:var(--mut)}hr{border:0;border-top:1px solid var(--bd);margin:2.2rem 0}mark{background:light-dark(#ffe58f,#5c4a15);color:inherit;border-radius:3px;padding:0 .15em}abbr[title]{text-decoration:underline dotted;cursor:help}blockquote{border-inline-start:2px solid var(--bd);padding-block:.15rem;padding-inline:1.2rem 0;color:var(--mut)}ul,ol{padding-inline-start:1.5rem}li::marker{color:var(--mut)}dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1rem}dt{color:var(--mut)}dd{margin:0}figcaption{font-size:.85em;color:var(--mut);text-align:center}code,kbd,samp,pre{font-family:var(--fm);font-size:.9em}:not(pre)>code,samp{background:var(--face);border:1px solid var(--bd);border-radius:var(--r);padding:.08em .35em}kbd{background:var(--face);border:1px solid var(--bd);border-bottom-width:2px;border-radius:var(--r);padding:.08em .4em;box-shadow:var(--up)}pre{background:var(--face);border:1px solid var(--bd);border-radius:var(--r);padding:1rem;overflow-x:auto}pre code{background:none;border:0;padding:0;font-size:1em}:root{--syn-comment:light-dark(#6b7280,#8b949e);--syn-key:light-dark(#7c3aed,#c4a7fb);--syn-str:light-dark(#15803d,#7ee787);--syn-num:light-dark(#b45309,#f0b866);--syn-fn:light-dark(#1d4ed8,#93c5fd);--syn-attr:light-dark(#b91c1c,#ff9492)}:is(.hljs-comment,.hljs-quote,.token.comment,.token.prolog,.token.doctype){color:var(--syn-comment);font-style:italic}:is(.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-type,.hljs-built_in,.token.keyword,.token.atrule,.token.rule,.token.important,.token.selector){color:var(--syn-key)}:is(.hljs-string,.hljs-meta-string,.token.string,.token.attr-value,.token.char){color:var(--syn-str)}:is(.hljs-number,.hljs-symbol,.hljs-bullet,.token.number,.token.boolean,.token.constant,.token.unit){color:var(--syn-num)}:is(.hljs-title,.hljs-name,.hljs-section,.hljs-function,.token.tag,.token.function,.token.class-name){color:var(--syn-fn)}:is(.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable,.token.attr-name,.token.property,.token.variable){color:var(--syn-attr)}:is(.hljs-punctuation,.hljs-operator,.token.punctuation,.token.operator){color:var(--mut)}:is(.hljs-emphasis,.token.italic){font-style:italic}:is(.hljs-strong,.token.bold){font-weight:700}:is(.hljs-deletion,.token.deleted){color:light-dark(#c0392b,#ff6b6b)}:is(.hljs-addition,.token.inserted){color:light-dark(#15803d,#7ee787)}table{width:100%;border-collapse:collapse;font-size:.92em}th,td{border-bottom:1px solid var(--bd);padding-block:.55rem;padding-inline:0 .7rem;text-align:start}th:last-child,td:last-child{padding-inline-end:0}thead th{border-bottom:1px solid color-mix(in srgb,var(--fg) 45%,transparent);font:700 var(--caps);text-transform:uppercase;letter-spacing:.09em;color:var(--mut);padding-bottom:.4rem}tbody tr:last-child td{border-bottom:0}tfoot td{font-weight:700;border-top:1px solid var(--bd);border-bottom:0}:is(th,td)[align=right]{text-align:right}:is(th,td)[align=center]{text-align:center}tbody tr:hover{background:var(--face)}@media (width <= 40rem){table{display:block;overflow-x:auto;overscroll-behavior-x:contain}}caption{text-align:start;color:var(--mut);font-size:.85em;padding-bottom:.35rem}button,input,select,textarea{font:inherit;color:inherit}label{display:block;font-size:.85em;color:var(--mut)}label:has(input){font-size:1rem;color:var(--fg)}:is(input,select,textarea) + label{margin-top:.9rem}textarea{width:100%;min-height:5rem;resize:vertical}@supports (field-sizing:content){textarea{field-sizing:content;max-height:24rem}}input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button],[type=reset]),select,textarea{display:block;width:100%;padding:.4em .6em;background:var(--el);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--dn)}select{appearance:none;padding-inline-end:2.2rem;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 17px) 55%,calc(100% - 12.5px) 55%;background-size:5px 5px;background-repeat:no-repeat}select:dir(rtl){background-position:12.5px 55%,17px 55%}select[multiple]{background-image:none;padding-inline-end:.6em}@supports (appearance:base-select){select,::picker(select){appearance:base-select}select{display:flex;align-items:center;justify-content:space-between;gap:.6em;background-image:none;padding-inline-end:.7em}select::picker-icon{content:"";inline-size:.45em;block-size:.45em;flex:none;border:solid currentColor;border-width:0 1px 1px 0;rotate:45deg;translate:0 -.15em;opacity:.7;transition:rotate .15s ease,translate .15s ease}select:open::picker-icon{rotate:225deg;translate:0 .1em}::picker(select){min-width:anchor-size(width);border:1px solid var(--bd);border-radius:var(--r);padding:.3rem;background:var(--el);margin-block-start:.35rem;box-shadow:var(--up2),0 20px 40px -14px oklch(from var(--sh) l c h / .4)}option{display:flex;align-items:center;gap:.5em;padding:.4em .6em;border-radius:calc(var(--r) - 2px)}option:hover{background:var(--face)}option:checked{background:var(--ac);color:var(--on-ac)}option::checkmark{order:1;margin-inline-start:auto;content:"✓"}}:is(input,select,textarea):hover:not(:disabled){border-color:color-mix(in srgb,var(--fg) 25%,transparent)}:is(input,select,textarea):focus-visible{border-color:var(--ac)}input[type=checkbox],input[type=radio]{width:1.15em;height:1.15em;margin:0 .45em 0 0;vertical-align:-.18em}label:has(input[type=checkbox]),label:has(input[type=radio]){line-height:1.9}input[type=range]{width:100%;height:1.15em}::placeholder{color:var(--mut)}@supports selector(::spelling-error){::spelling-error{text-decoration:wavy underline light-dark(#c0392b,#ff6b6b)}::grammar-error{text-decoration:wavy underline light-dark(#9a6700,#d29922)}}:is(input,textarea):read-only:not(:disabled){background:var(--face);cursor:default}label:has(+:required)::after,label:has(:required)::after{content:" *";color:var(--ac)}input:autofill,input:autofill:hover,input:autofill:focus{-webkit-text-fill-color:var(--fg);box-shadow:var(--dn),inset 0 0 0 100px var(--el);caret-color:var(--ac)}:disabled{color:var(--mut);cursor:not-allowed;box-shadow:none}fieldset{border:1px solid var(--bd);border-radius:var(--r);padding:.9rem 1rem 1rem;background:var(--face)}fieldset:focus-within{border-color:color-mix(in srgb,var(--ac) 45%,var(--bd))}legend{float:left;width:100%;margin-bottom:.8rem;padding:0 0 .6rem;border-bottom:1px solid var(--bd);font-size:.95em;font-weight:700;color:var(--fg)}legend + *{clear:left}button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),::file-selector-button{display:inline-block;text-decoration:none;text-align:center;padding:.38em 1.1em;background:var(--el);color:var(--fg);cursor:pointer;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--up);font:inherit;min-width:5rem}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled){background:var(--face)}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):active:not(:disabled){box-shadow:var(--dn);translate:0 .5px}[type=submit],.primary{background:var(--ac);border-color:transparent;color:var(--on-ac)}:is([type=submit],.primary,a.primary):hover:not(:disabled){background:oklch(from var(--ac) calc(l + .05) c h)}[data-size=sm]{padding:.2em .7em;font-size:.85em;min-width:0}[data-size=lg]{padding:.55em 1.5em;font-size:1.05em}button[data-icon]{min-width:0;padding:.38em .62em;line-height:1}[data-block]{display:block;width:100%;min-width:0}[data-variant=ghost]{background:none;border-color:transparent;box-shadow:none}[data-variant=ghost]:hover:not(:disabled){background:var(--face);border-color:var(--bd)}[data-variant=link]{background:none;border:0;box-shadow:none;min-width:0;padding-inline:.2em;color:var(--ac);text-decoration:underline;text-underline-offset:3px}[data-variant=link]:hover:not(:disabled){background:none;text-decoration-thickness:2px}button[aria-pressed=true]{background:var(--face);color:var(--ac);font-weight:700}button[aria-pressed=true]:hover:not(:disabled){background:color-mix(in srgb,var(--fg) 7%,var(--face))}:is([type=submit],.primary){box-shadow:var(--up),inset 0 1px 0 light-dark(#fff3,#ffffff26)}:is([type=submit],.primary):active:not(:disabled){box-shadow:inset 0 1px 3px #0006}@supports (corner-shape:squircle){*{corner-shape:squircle}}details{border:1px solid var(--bd);border-radius:var(--r);padding:.7rem 1.1rem;background:var(--el)}summary{cursor:pointer;font-weight:700;list-style:none}summary::before{content:"▸ ";color:var(--mut)}details[open]>summary::before{content:"▾ "}details[open]>summary{margin-bottom:.6rem}dialog{background:var(--el);color:var(--fg);border:1px solid var(--bd);border-radius:var(--rw);padding:1.4rem;max-width:min(30rem,92dvw);box-shadow:0 32px 64px -16px oklch(from var(--sh) l c h / .45)}dialog>:last-child:not(footer){margin-bottom:0}dialog,[popover]{overscroll-behavior:contain}dialog::backdrop{background:oklch(from var(--sh) l c h / .35);backdrop-filter:blur(3px)}dialog:has(>:is(header,footer)){max-block-size:min(44rem,85dvh);overflow:auto}dialog>:is(header,footer){position:sticky;z-index:1;margin-inline:-1.4rem;padding:.7rem 1.4rem;background:var(--el)}dialog>header{inset-block-start:-1.4rem;margin-block:-1.4rem 1rem;font-weight:700;border-bottom:1px solid var(--bd);border-radius:var(--rw) var(--rw) 0 0}dialog>header>:is(h1,h2,h3,h4,p){margin:0;font-size:1.05rem}dialog>footer{inset-block-end:-1.4rem;margin-block:1rem -1.4rem;border-top:1px solid var(--bd);border-radius:0 0 var(--rw) var(--rw);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;justify-content:flex-end}dialog>footer>:is(p,span):first-child{margin:0;margin-inline-end:auto;color:var(--mut)}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog,dialog::backdrop{transition:opacity .2s,translate .2s,display .2s allow-discrete,overlay .2s allow-discrete}dialog{opacity:0;translate:0 10px}dialog[open]{opacity:1;translate:0}dialog::backdrop{opacity:0}dialog[open]::backdrop{opacity:1}@starting-style{dialog[open]{opacity:0;translate:0 10px}}@starting-style{dialog[open]::backdrop{opacity:0}}[popover]{opacity:0;translate:0 -4px;transition:opacity .13s,translate .13s,display .13s allow-discrete,overlay .13s allow-discrete}[popover]:popover-open{opacity:1;translate:0}@starting-style{[popover]:popover-open{opacity:0;translate:0 -4px}}}search{display:block}::target-text{background:color-mix(in srgb,var(--ac) 28%,transparent)}aside{border:1px solid var(--bd);border-inline-start:3px solid var(--ac);border-radius:var(--r);border-start-start-radius:0;border-end-start-radius:0;background:var(--el);padding:.7rem 1.1rem}progress{width:100%;height:.5rem;border:0;border-radius:calc(infinity * 1px);background:var(--face)}progress::-webkit-progress-bar{background:var(--face);border-radius:calc(infinity * 1px)}progress::-webkit-progress-value{background:var(--ac);border-radius:calc(infinity * 1px)}progress::-moz-progress-bar{background:var(--ac);border-radius:calc(infinity * 1px)}@supports selector(::details-content){@media (prefers-reduced-motion:no-preference) and (update:fast){:root{interpolate-size:allow-keywords}details::details-content{block-size:0;overflow:clip;transition:block-size .28s ease,content-visibility .28s allow-discrete}details[open]::details-content{block-size:auto}}}.muted{color:var(--mut)}.center{text-align:center}.wide{max-width:66rem}.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}.row:is(input:not([type=checkbox],[type=radio]),textarea){width:auto;flex:1 1 10rem;min-width:0}.row select{width:auto;flex:0 1 auto;min-width:0}.row:is(progress,meter){width:auto;flex:1 1 6rem}.row>label{flex:none;margin-top:0}.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.card{container-type:inline-size;border:1px solid var(--bd);border-radius:var(--r);padding:.9rem;background:var(--el);box-shadow:var(--up2);display:flex;flex-direction:column;gap:.85rem}.card>*{margin-block:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1;min-width:0}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.items-start{align-items:start}.items-center{align-items:center}.items-end{align-items:end}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-end{justify-content:end}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.mx-auto{margin-inline:auto}.ms-auto{margin-inline-start:auto}.me-auto{margin-inline-end:auto}.w-full{width:100%}.max-w-xs{max-inline-size:20rem}.max-w-sm{max-inline-size:24rem}.max-w-md{max-inline-size:28rem}.max-w-lg{max-inline-size:32rem}.max-w-xl{max-inline-size:36rem}.max-w-2xl{max-inline-size:42rem}.max-w-3xl{max-inline-size:48rem}.max-w-4xl{max-inline-size:56rem}.max-w-5xl{max-inline-size:64rem}.max-w-6xl{max-inline-size:72rem}.max-w-7xl{max-inline-size:80rem}.max-w-full{max-inline-size:100%}.max-w-none{max-inline-size:none}.max-w-prose{max-inline-size:var(--w)}.hidden{display:none}.badge{border:1px solid var(--bd);border-radius:calc(infinity * 1px);background:var(--face);padding:.1em .6em;font:700 var(--caps);color:var(--mut)}.card>:is(header,footer){margin-inline:-.9rem;padding:.55rem .9rem;background:var(--face)}.card>header{margin-top:-.9rem;font-weight:700;border-bottom:1px solid var(--bd);border-radius:var(--r) var(--r) 0 0}.card>footer{margin-top:auto;margin-bottom:-.9rem;color:var(--mut);font-size:.85em;border-top:1px solid var(--bd);border-radius:0 0 var(--r) var(--r)}.card>:is(img,video):first-child{align-self:stretch;width:auto;max-width:none;margin:-.9rem -.9rem 0;aspect-ratio:16 / 9;object-fit:cover;border:0;border-radius:var(--r) var(--r) 0 0;box-shadow:none}.card[data-tone]{box-shadow:var(--up2),inset 0 2px 0 var(--ac)}.card[data-tone]>header:first-child{box-shadow:inset 0 2px 0 var(--ac)}:is(a,button).card{display:flex;width:100%;text-align:start;color:inherit;text-decoration:none;font:inherit}:is(a,button).card:hover:not(:disabled){border-color:color-mix(in srgb,var(--ac) 45%,var(--bd));box-shadow:var(--up2),0 12px 26px -14px oklch(from var(--sh) l c h / .4);translate:0 -2px}:is(a,button).card:active:not(:disabled){translate:0 0}[hidden]:not([hidden=until-found]){display:none}@media (prefers-reduced-motion:no-preference) and (update:fast){html{scroll-behavior:smooth}}:target{scroll-margin-top:4rem}:is(h1,h2,h3,h4):target{background:color-mix(in srgb,var(--ac) 12%,transparent)}a[target=_blank]::after{content:" ↗";font-size:.85em;opacity:.6}a:has(>img),a:has(>code){text-decoration:none}sup,sub{line-height:0;font-size:.75em}q{quotes:"“" "”" "‘" "’"}dfn{font-style:normal;font-weight:700}ins{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--ac)}del{color:var(--mut)}address{font-style:normal;color:var(--mut)}hgroup>*{margin:0}hgroup>p{color:var(--mut)}output{font-weight:700}meter{width:100%;height:.5rem}optgroup{font-weight:700;color:var(--mut)}::file-selector-button{margin-inline-end:.8em}::file-selector-button:hover{background:var(--face)}input:user-invalid,textarea:user-invalid{border-color:light-dark(#c0392b,#ff6b6b)}input:user-invalid + small{color:light-dark(#c0392b,#ff6b6b)}summary:hover{color:var(--ac)}*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 25%,transparent) transparent}@page{margin:2cm}@media print{:root{--bg:#fff;--el:#fff;--fg:#000;--bd:#999}body>nav,body>footer{display:none}body>*{border:0;max-width:none}p,blockquote,li{orphans:3;widows:3}a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}pre,table,figure,details,tr,img{break-inside:avoid}h1,h2,h3,h4{break-after:avoid}}@media (pointer:coarse){button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),select,summary,input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]){min-height:44px}input[type=checkbox],input[type=radio]{width:1.4em;height:1.4em}}@media (inverted-colors:inverted){img,video,iframe{filter:invert(1) hue-rotate(180deg)}}@media (color-gamut:p3){@supports (color:oklch(60% .2 250)){:root{--ac:light-dark(oklch(52% .21 258),oklch(76% .15 258))}}}:root{text-spacing-trim:trim-start;text-autospace:normal}@media (prefers-reduced-transparency:reduce){body>nav{background:var(--face);backdrop-filter:none}dialog::backdrop{backdrop-filter:none}}@media (prefers-contrast:more){:root{--bd:light-dark(#00000059,#ffffff6b);--mut:light-dark(#45454a,#c6c6ce)}}@media (prefers-reduced-motion:no-preference) and (update:fast){a,button,input,select,textarea,summary,tr,[type=submit],[type=button],[type=reset]{transition:box-shadow .15s,background-color .15s,border-color .15s,translate .08s}}}@layer fertig-a11y{@media (forced-colors:active){*{box-shadow:none}button,[type=submit],[type=button],[type=reset],input,select,textarea,.card,.badge,details,dialog,[popover],fieldset,table{border:1px solid CanvasText}[role=tab][aria-selected=true],button[aria-pressed=true]{border-color:Highlight}}}
+/*! fertig v1.1.0 — a classless CSS stylesheet. MIT */@property --fertig-a1{syntax:"<number>";inherits:true;initial-value:.08}@property --fertig-a2{syntax:"<number>";inherits:true;initial-value:.06}@layer fertig,fertig-a11y;@layer fertig{:root{color-scheme:light dark;accent-color:var(--ac);caret-color:var(--ac);--f:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--fm:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--w:38rem;--r:9px;--rs:5px;--rw:14px;--stone-100:oklch(97.5% .004 75);--stone-300:oklch(91% .006 75);--stone-500:oklch(72% .008 75);--stone-700:oklch(47% .009 75);--stone-900:oklch(26% .008 75);--sage-100:oklch(96% .022 155);--sage-300:oklch(87% .042 155);--sage-500:oklch(66% .058 155);--sage-700:oklch(47% .055 155);--sage-900:oklch(29% .038 155);--sky-100:oklch(96% .022 240);--sky-300:oklch(87% .045 240);--sky-500:oklch(64% .085 245);--sky-700:oklch(48% .095 250);--sky-900:oklch(30% .06 250);--clay-100:oklch(96% .022 45);--clay-300:oklch(88% .045 45);--clay-500:oklch(68% .085 45);--clay-700:oklch(50% .09 40);--clay-900:oklch(31% .055 40);--plum-100:oklch(96% .02 320);--plum-300:oklch(88% .038 320);--plum-500:oklch(66% .06 320);--plum-700:oklch(47% .065 320);--plum-900:oklch(29% .042 320);--gold-100:oklch(96.5% .028 90);--gold-300:oklch(89% .055 88);--gold-500:oklch(74% .085 85);--gold-700:oklch(55% .085 80);--gold-900:oklch(33% .05 80);--bg:light-dark(oklch(93.5% .006 75),oklch(16% .006 75));--el:light-dark(oklch(99.4% .002 75),oklch(21% .006 75));--face:light-dark(oklch(97.2% .005 75),oklch(25% .007 75));--fg:light-dark(oklch(22% .008 75),oklch(95% .004 75));--mut:light-dark(oklch(47% .009 75),oklch(73% .008 75));--bd:light-dark(oklch(22% .008 75 / .13),oklch(95% .004 75 / .13));--tb:light-dark(oklch(97.2% .005 75 / .85),oklch(25% .007 75 / .85));--ac:light-dark(oklch(50% .19 275),oklch(78% .11 275));--on-ac:light-dark(#fff,#06121f);--sh:oklch(23.1% .007 286);--fertig-a1:var(--a1,.08);--fertig-a2:var(--a2,.06);--sh1:color-mix(in srgb,var(--sh) calc(var(--fertig-a1) * 100%),transparent);--sh2:color-mix(in srgb,var(--sh) calc(var(--fertig-a2) * 100%),transparent);--up:0 1px 1px var(--sh1);--up2:0 1px 2px var(--sh1),0 6px 16px -6px var(--sh2);--dn:inset 0 1px 2px color-mix(in srgb,var(--sh) 8%,transparent);--caps:.74em/1.4 var(--f);--ease-out:cubic-bezier(.22,1,.36,1);--ease-in:cubic-bezier(.55,0,1,.45);--ease:cubic-bezier(.4,0,.2,1);--dur-1:.12s;--dur-2:.2s}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fertig-a1:var(--a1,.5);--fertig-a2:var(--a2,.45)}}@supports (color:oklch(from red l c h)){:root{--on-ac:oklch(from var(--ac) clamp(0,(l - .62) * -100,1) 0 h)}}@supports (color:contrast-color(red)){:root{--on-ac:contrast-color(var(--ac))}}[data-theme=light]{color-scheme:light;--fertig-a1:var(--a1,.08);--fertig-a2:var(--a2,.06)}[data-theme=dark]{color-scheme:dark;--fertig-a1:var(--a1,.5);--fertig-a2:var(--a2,.45)}[data-accent=indigo]{--ac:light-dark(oklch(50% .19 275),oklch(78% .11 275))}[data-accent=sky]{--ac:light-dark(var(--sky-700),oklch(78% .085 245))}[data-accent=sage]{--ac:light-dark(var(--sage-700),oklch(80% .075 155))}[data-accent=clay]{--ac:light-dark(var(--clay-700),oklch(80% .085 45))}[data-accent=plum]{--ac:light-dark(var(--plum-700),oklch(80% .065 320))}[data-accent=gold]{--ac:light-dark(oklch(55% .085 80),oklch(84% .09 85))}[data-accent=slate]{--ac:light-dark(oklch(35% .01 250),oklch(86% .006 250))}*,::before,::after{box-sizing:border-box}html{font:16px/1.65 var(--f);-webkit-text-size-adjust:100%;tab-size:2}body{margin:0;background:var(--bg);color:var(--fg);overflow-wrap:break-word;font-variant-numeric:slashed-zero tabular-nums}::selection{background:color-mix(in srgb,var(--ac) 28%,transparent)}:focus-visible{outline:3px solid color-mix(in srgb,var(--ac) 45%,transparent);outline-offset:1px}img,video,iframe{display:block;max-width:100%;height:auto}svg{max-width:100%;vertical-align:middle}img,video{border-radius:var(--r);box-shadow:var(--up2)}body>*,body>:where(#root,#app,#__next,[data-fertig])>*{max-width:var(--w);margin-inline:auto;padding-inline:1.9rem}body>:where(#root,#app,#__next,[data-fertig]){max-width:none;padding-inline:0}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>:is(header,main,footer){background:var(--el);border-inline:1px solid var(--bd)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>header{padding-block:2.4rem .8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>main{padding-bottom:2.8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>footer{padding-block:1.2rem 2rem;color:var(--mut);font-size:.85em;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);border-radius:0 0 var(--rw) var(--rw);margin-bottom:2.5rem;box-shadow:0 18px 30px -22px color-mix(in srgb,var(--sh) 50%,transparent)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{position:sticky;top:0;z-index:9;max-width:none;--nw:var(--w);padding-inline:max(1.9rem,calc(50% - var(--nw) / 2 + 1.9rem),env(safe-area-inset-left),env(safe-area-inset-right));display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;padding-block:calc(.6rem + env(safe-area-inset-top,0px)) .6rem;background:var(--tb);color:var(--fg);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--bd);font-size:.92em}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a{color:var(--fg);text-decoration:none;opacity:.75}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a:hover{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav:is(strong,b) a{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav ul{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;padding:0;margin:0;flex:1}h1,h2,h3,h4,h5,h6{line-height:1.3;margin:1.4rem 0 .7rem;text-wrap:balance}h1{font-size:1.55rem;letter-spacing:-.015em}h2{font-size:1.25rem;letter-spacing:-.01em;margin-top:2.4rem}h3{font-size:1.08rem;margin-top:1.9rem}h4{font-size:1rem}h5,h6{font:700 var(--caps);text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}:is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}@supports (text-box:trim-both cap alphabetic){h1,h2,h3,h4{text-box:trim-both cap alphabetic}}:is(section,article) +:is(section,article){margin-top:2.8rem}p,ul,ol,dl,pre,blockquote,table,figure,details,fieldset,hr{margin:1.1rem 0}p{text-wrap:pretty}a{color:var(--ac);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}small{font-size:.85em;color:var(--mut)}hr{border:0;border-top:1px solid var(--bd);margin:2.2rem 0}mark{background:light-dark(#ffe58f,#5c4a15);color:inherit;border-radius:3px;padding:0 .15em}abbr[title]{text-decoration:underline dotted;cursor:help}blockquote{border-inline-start:2px solid var(--bd);padding-block:.15rem;padding-inline:1.2rem 0;color:var(--mut)}ul,ol{padding-inline-start:1.5rem}li::marker{color:var(--mut)}dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1rem}dt{color:var(--mut)}dd{margin:0}figcaption{font-size:.85em;color:var(--mut);text-align:center}code,kbd,samp,pre{font-family:var(--fm);font-size:.9em}:not(pre)>code,samp{background:var(--face);border:1px solid var(--bd);border-radius:var(--rs);padding:.08em .35em}kbd{background:var(--face);border:1px solid var(--bd);border-bottom-width:2px;border-radius:var(--rs);padding:.08em .4em;box-shadow:var(--up)}pre{background:var(--face);border:1px solid var(--bd);border-radius:var(--r);padding:1rem;overflow-x:auto}pre code{background:none;border:0;padding:0;font-size:1em}:root{--syn-comment:light-dark(#6b7280,#8b949e);--syn-key:light-dark(#7c3aed,#c4a7fb);--syn-str:light-dark(#15803d,#7ee787);--syn-num:light-dark(#b45309,#f0b866);--syn-fn:light-dark(#1d4ed8,#93c5fd);--syn-attr:light-dark(#b91c1c,#ff9492)}:is(.hljs-comment,.hljs-quote,.token.comment,.token.prolog,.token.doctype){color:var(--syn-comment);font-style:italic}:is(.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-type,.hljs-built_in,.token.keyword,.token.atrule,.token.rule,.token.important,.token.selector){color:var(--syn-key)}:is(.hljs-string,.hljs-meta-string,.token.string,.token.attr-value,.token.char){color:var(--syn-str)}:is(.hljs-number,.hljs-symbol,.hljs-bullet,.token.number,.token.boolean,.token.constant,.token.unit){color:var(--syn-num)}:is(.hljs-title,.hljs-name,.hljs-section,.hljs-function,.token.tag,.token.function,.token.class-name){color:var(--syn-fn)}:is(.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable,.token.attr-name,.token.property,.token.variable){color:var(--syn-attr)}:is(.hljs-punctuation,.hljs-operator,.token.punctuation,.token.operator){color:var(--mut)}:is(.hljs-emphasis,.token.italic){font-style:italic}:is(.hljs-strong,.token.bold){font-weight:700}:is(.hljs-deletion,.token.deleted){color:light-dark(#c0392b,#ff6b6b)}:is(.hljs-addition,.token.inserted){color:light-dark(#15803d,#7ee787)}table{width:100%;border-collapse:collapse;font-size:.92em}th,td{border-bottom:1px solid var(--bd);padding-block:.55rem;padding-inline:0 .7rem;text-align:start}th:last-child,td:last-child{padding-inline-end:0}thead th{border-bottom:1px solid color-mix(in srgb,var(--fg) 45%,transparent);font:700 var(--caps);text-transform:uppercase;letter-spacing:.09em;color:var(--mut);padding-bottom:.4rem}tbody tr:last-child td{border-bottom:0}tfoot td{font-weight:700;border-top:1px solid var(--bd);border-bottom:0}:is(th,td)[align=right]{text-align:right}:is(th,td)[align=center]{text-align:center}tbody tr:hover{background:var(--face)}@media (width <= 40rem){table{display:block;overflow-x:auto;overscroll-behavior-x:contain}}caption{text-align:start;color:var(--mut);font-size:.85em;padding-bottom:.35rem}button,input,select,textarea{font:inherit;color:inherit}label{display:block;font-size:.85em;color:var(--mut)}label:has(input){font-size:1rem;color:var(--fg)}:is(input,select,textarea) + label{margin-top:.9rem}textarea{width:100%;min-height:5rem;resize:vertical}@supports (field-sizing:content){textarea{field-sizing:content;max-height:24rem}}input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=image],[type=submit],[type=button],[type=reset]),select,textarea{display:block;width:100%;padding:.52em .7em;background:var(--el);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--dn)}select{appearance:none;padding-inline-end:2.2rem;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 17px) 55%,calc(100% - 12.5px) 55%;background-size:5px 5px;background-repeat:no-repeat}select:dir(rtl){background-position:12.5px 55%,17px 55%}select[multiple]{background-image:none;padding-inline-end:.6em}@supports (appearance:base-select){select,::picker(select){appearance:base-select}select{display:flex;align-items:center;justify-content:space-between;gap:.6em;background-image:none;padding-inline-end:.7em}select::picker-icon{content:"";inline-size:.45em;block-size:.45em;flex:none;border:solid currentColor;border-width:0 1px 1px 0;rotate:45deg;translate:0 -.15em;opacity:.7;transition:rotate var(--dur-1) var(--ease),translate var(--dur-1) var(--ease)}select:open::picker-icon{rotate:225deg;translate:0 .1em}::picker(select){min-width:anchor-size(width);border:1px solid var(--bd);border-radius:var(--r);padding:.3rem;background:var(--el);margin-block-start:.35rem;box-shadow:var(--up2),0 20px 40px -14px color-mix(in srgb,var(--sh) 40%,transparent)}option{display:flex;align-items:center;gap:.5em;padding:.4em .6em;border-radius:calc(var(--r) - 2px)}option:hover{background:var(--face)}option:checked{background:var(--ac);color:var(--on-ac)}option::checkmark{order:1;margin-inline-start:auto;content:"✓"}}:is(input,select,textarea):hover:not(:disabled){border-color:color-mix(in srgb,var(--fg) 25%,transparent)}:is(input,select,textarea):focus-visible{border-color:var(--ac)}input[type=checkbox],input[type=radio]{width:1.15em;height:1.15em;margin:0 .45em 0 0;vertical-align:-.18em}label:has(input[type=checkbox]),label:has(input[type=radio]){line-height:1.9}input[type=range]{width:100%;height:1.15em}::placeholder{color:var(--mut)}@supports selector(::spelling-error){::spelling-error{text-decoration:wavy underline light-dark(#c0392b,#ff6b6b)}::grammar-error{text-decoration:wavy underline light-dark(#9a6700,#d29922)}}:is(input,textarea):read-only:not(:disabled){background:var(--face);cursor:default}label:has(+:required)::after,label:has(:required)::after{content:" *";color:var(--ac)}input:autofill,input:autofill:hover,input:autofill:focus{-webkit-text-fill-color:var(--fg);box-shadow:var(--dn),inset 0 0 0 100px var(--el);caret-color:var(--ac)}:disabled{color:var(--mut);cursor:not-allowed;box-shadow:none}fieldset{border:1px solid var(--bd);border-radius:var(--r);padding:.9rem 1rem 1rem;background:var(--face)}fieldset:focus-within{border-color:color-mix(in srgb,var(--ac) 45%,var(--bd))}legend{float:left;width:100%;margin-bottom:.8rem;padding:0 0 .6rem;border-bottom:1px solid var(--bd);font-size:.95em;font-weight:700;color:var(--fg)}legend + *{clear:left}button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),::file-selector-button{display:inline-block;text-decoration:none;text-align:center;padding:.48em 1.1em;background:var(--el);color:var(--fg);cursor:pointer;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--up);font:inherit;min-width:5rem}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled){background:var(--face)}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):active:not(:disabled){box-shadow:var(--dn);translate:0 .5px}[type=submit],.primary{background:var(--ac);border-color:transparent;color:var(--on-ac)}:is([type=submit],.primary,a.primary):hover:not(:disabled){background:color-mix(in oklab,var(--ac),#fff 9%)}@supports (color:oklch(from red l c h)){:is([type=submit],.primary,a.primary):hover:not(:disabled){background:oklch(from var(--ac) calc(l + .05) c h)}}:is(button,a,input,select,label)[data-size=sm]{padding:.2em .7em;font-size:.85em;min-width:0}:is(button,a,input,select,label)[data-size=lg]{padding:.55em 1.5em;font-size:1.05em}button[data-icon]{min-width:0;padding:.38em .62em;line-height:1}:is(button,a,input,select,label)[data-block]{display:block;width:100%;min-width:0}:is(button,a,input)[data-variant=ghost]{background:none;border-color:transparent;box-shadow:none}:is(button,a,input)[data-variant=ghost]:hover:not(:disabled){background:var(--face);border-color:var(--bd)}:is(button,a,input)[data-variant=link]{background:none;border:0;box-shadow:none;min-width:0;padding-inline:.2em;color:var(--ac);text-decoration:underline;text-underline-offset:3px}:is(button,a,input)[data-variant=link]:hover:not(:disabled){background:none;text-decoration-thickness:2px}button[aria-pressed=true]{background:var(--face);color:var(--ac);font-weight:700}button[aria-pressed=true]:hover:not(:disabled){background:color-mix(in srgb,var(--fg) 7%,var(--face))}:is([type=submit],.primary){box-shadow:var(--up),inset 0 1px 0 light-dark(#fff3,#ffffff26)}:is([type=submit],.primary):active:not(:disabled){box-shadow:inset 0 1px 3px #0006}@supports (corner-shape:squircle){:is(button,[type=submit],[type=button],[type=reset],input,select,textarea,fieldset,details,dialog,[popover],pre,kbd,code,samp,img,video,menu,aside,[data-avatar],[data-skeleton],.card,.badge){corner-shape:squircle}}details{border:1px solid var(--bd);border-radius:var(--r);padding:.7rem 1.1rem;background:var(--el)}summary{cursor:pointer;font-weight:700;list-style:none}summary::before{content:"▸ ";color:var(--mut)}details[open]>summary::before{content:"▾ "}details[open]>summary{margin-bottom:.6rem}dialog{background:var(--el);color:var(--fg);border:1px solid var(--bd);border-radius:var(--rw);padding:1.4rem;max-width:min(30rem,92dvw);box-shadow:0 32px 64px -16px color-mix(in srgb,var(--sh) 45%,transparent)}dialog>:last-child:not(footer){margin-bottom:0}dialog,[popover]{overscroll-behavior:contain}dialog::backdrop{background:color-mix(in srgb,var(--sh) 35%,transparent);backdrop-filter:blur(3px)}dialog:has(>:is(header,footer)){max-block-size:min(44rem,85dvh);overflow:auto}dialog>:is(header,footer){position:sticky;z-index:1;margin-inline:-1.4rem;padding:.7rem 1.4rem;background:var(--el)}dialog>header{inset-block-start:-1.4rem;margin-block:-1.4rem 1rem;font-weight:700;border-bottom:1px solid var(--bd);border-radius:var(--rw) var(--rw) 0 0}dialog>header>:is(h1,h2,h3,h4,p){margin:0;font-size:1.05rem}dialog>footer{inset-block-end:-1.4rem;margin-block:1rem -1.4rem;border-top:1px solid var(--bd);border-radius:0 0 var(--rw) var(--rw);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;justify-content:flex-end}dialog>footer>:is(p,span):first-child{margin:0;margin-inline-end:auto;color:var(--mut)}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog,dialog::backdrop{transition:opacity var(--dur-2) var(--ease-out),translate var(--dur-2) var(--ease-out),display var(--dur-2) allow-discrete,overlay var(--dur-2) allow-discrete}dialog{opacity:0;translate:0 10px}dialog[open]{opacity:1;translate:0}dialog::backdrop{opacity:0}dialog[open]::backdrop{opacity:1}@starting-style{dialog[open]{opacity:0;translate:0 10px}}@starting-style{dialog[open]::backdrop{opacity:0}}[popover]{opacity:0;translate:0 -4px;transition:opacity .13s var(--ease-out),translate .13s var(--ease-out),display .13s allow-discrete,overlay .13s allow-discrete}[popover]:popover-open{opacity:1;translate:0}@starting-style{[popover]:popover-open{opacity:0;translate:0 -4px}}}search{display:block;margin-block:1.1rem}::target-text{background:color-mix(in srgb,var(--ac) 28%,transparent)}aside{border:1px solid var(--bd);border-inline-start:3px solid var(--ac);border-radius:var(--r);border-start-start-radius:0;border-end-start-radius:0;background:var(--el);padding:.7rem 1.1rem;margin-block:1.1rem}progress{width:100%;height:.5rem;border:0;border-radius:calc(infinity * 1px);background:var(--face)}progress::-webkit-progress-bar{background:var(--face);border-radius:calc(infinity * 1px)}progress::-webkit-progress-value{background:var(--ac);border-radius:calc(infinity * 1px)}progress::-moz-progress-bar{background:var(--ac);border-radius:calc(infinity * 1px)}@supports selector(::details-content){@media (prefers-reduced-motion:no-preference) and (update:fast){details{interpolate-size:allow-keywords}details::details-content{block-size:0;overflow:clip;transition:block-size .28s var(--ease),content-visibility .28s allow-discrete}details[open]::details-content{block-size:auto}}}.muted{color:var(--mut)}.center{text-align:center}.wide{max-width:66rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav.wide{max-width:none;--nw:66rem}.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}.row:is(input:not([type=checkbox],[type=radio]),textarea){width:auto;flex:1 1 10rem;min-width:0}.row select{width:auto;flex:0 1 auto;min-width:0}.row:is(progress,meter){width:auto;flex:1 1 6rem}.row>label{flex:none;margin-top:0}.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.grid + *{margin-top:1.1rem}.card{container-type:inline-size;border:1px solid var(--bd);border-radius:var(--r);padding:1.1rem;background:var(--el);box-shadow:var(--up2);display:flex;flex-direction:column;gap:.85rem}.card>*{margin-block:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1;min-width:0}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.items-start{align-items:start}.items-center{align-items:center}.items-end{align-items:end}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-end{justify-content:end}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.mx-auto{margin-inline:auto}.ms-auto{margin-inline-start:auto}.me-auto{margin-inline-end:auto}.w-full{width:100%}.max-w-xs{max-inline-size:20rem}.max-w-sm{max-inline-size:24rem}.max-w-md{max-inline-size:28rem}.max-w-lg{max-inline-size:32rem}.max-w-xl{max-inline-size:36rem}.max-w-2xl{max-inline-size:42rem}.max-w-3xl{max-inline-size:48rem}.max-w-4xl{max-inline-size:56rem}.max-w-5xl{max-inline-size:64rem}.max-w-6xl{max-inline-size:72rem}.max-w-7xl{max-inline-size:80rem}.max-w-full{max-inline-size:100%}.max-w-none{max-inline-size:none}.max-w-prose{max-inline-size:var(--w)}.hidden{display:none}.badge{border:1px solid var(--bd);border-radius:calc(infinity * 1px);background:var(--face);padding:.1em .6em;font:700 var(--caps);color:var(--mut)}.card>:is(header,footer){margin-inline:-1.1rem;padding-inline:1.1rem}.card>header{margin-top:-.25rem;padding-bottom:.7rem;font-weight:600;border-bottom:1px solid var(--bd)}.card>footer{margin-top:auto;margin-bottom:-.25rem;padding-top:.7rem;color:var(--mut);font-size:.85em;border-top:1px solid var(--bd)}.card>:is(img,video):first-child{align-self:stretch;width:auto;max-width:none;margin:-1.1rem -1.1rem 0;aspect-ratio:16 / 9;object-fit:cover;border:0;border-radius:var(--r) var(--r) 0 0;box-shadow:none}.card[data-tone]{background:linear-gradient(var(--ac),var(--ac)) top / 100% 3px no-repeat,var(--el)}:is(a,button).card{display:flex;width:100%;text-align:start;color:inherit;text-decoration:none;font:inherit}:is(a,button).card:hover:not(:disabled){border-color:color-mix(in srgb,var(--ac) 45%,var(--bd));box-shadow:var(--up2),0 12px 26px -14px color-mix(in srgb,var(--sh) 40%,transparent);translate:0 -2px}:is(a,button).card:active:not(:disabled){translate:0 0}[hidden]:not([hidden=until-found]){display:none}@media (prefers-reduced-motion:no-preference) and (update:fast){html{scroll-behavior:smooth}}:target{scroll-margin-top:4rem}:is(h1,h2,h3,h4):target{background:color-mix(in srgb,var(--ac) 12%,transparent)}a[target=_blank]:not(:has(>img,>svg))::after{content:" ↗";font-size:.85em;opacity:.6}a:has(>img),a:has(>code){text-decoration:none}sup,sub{line-height:0;font-size:.75em}q{quotes:"“" "”" "‘" "’"}dfn{font-style:normal;font-weight:700}ins{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--ac)}del{color:var(--mut)}address{font-style:normal;color:var(--mut)}hgroup>*{margin:0}hgroup>p{color:var(--mut)}output{font-weight:700}meter{width:100%;height:.5rem}optgroup{font-weight:700;color:var(--mut)}::file-selector-button{margin-inline-end:.8em}::file-selector-button:hover{background:var(--face)}input:user-invalid,textarea:user-invalid{border-color:light-dark(#c0392b,#ff6b6b)}input:user-invalid + small{color:light-dark(#c0392b,#ff6b6b)}summary:hover{color:var(--ac)}:is(pre,table,textarea,dialog,[popover],menu,fieldset,[role=group],[data-carousel],[data-layout=sidebar]>*){scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 25%,transparent) transparent}@page{margin:2cm}@media print{:root{--bg:#fff;--el:#fff;--fg:#000;--bd:#999}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{display:none}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>footer{box-shadow:none;margin-bottom:0}body>*,body>:where(#root,#app,#__next,[data-fertig])>*{border:0;max-width:none}p,blockquote,li{orphans:3;widows:3}a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}pre,table,figure,details,tr,img{break-inside:avoid}h1,h2,h3,h4{break-after:avoid}}@media (pointer:coarse){button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),select,summary,input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]){min-height:44px}input[type=checkbox],input[type=radio]{width:1.4em;height:1.4em}:is(button,a,input,select,label)[data-size=sm]{min-height:32px}}@media (inverted-colors:inverted){img,video,iframe{filter:invert(1) hue-rotate(180deg)}}@media (color-gamut:p3){@supports (color:oklch(60% .2 250)){:root{--ac:light-dark(oklch(52% .21 258),oklch(76% .15 258))}}}:root{text-spacing-trim:trim-start;text-autospace:normal}@media (prefers-reduced-transparency:reduce){body>nav{background:var(--face);backdrop-filter:none}dialog::backdrop{backdrop-filter:none}}@media (prefers-contrast:more){:root{--bd:light-dark(#00000059,#ffffff6b);--mut:light-dark(#45454a,#c6c6ce)}}@media (prefers-reduced-motion:no-preference) and (update:fast){a,button,input,select,textarea,summary,tr,[type=submit],[type=button],[type=reset],.card,.badge,[role=tab],[role=group]>*,[popover]:is(a,button){transition:box-shadow var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),translate .08s var(--ease-out)}:focus-visible{transition:none}}@supports not (color:light-dark(#000,#fff)){:root{--bg:#ece9e5;--el:#fefdfc;--face:#f8f5f2;--fg:#1d1a17;--mut:#5e5a55;--bd:#1d1a1721;--tb:#f8f5f2d9;--ac:#494fcc;--on-ac:#fff}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f0d0a;--el:#1a1815;--face:#24211e;--fg:#f0eeec;--mut:#aba7a2;--bd:#f0eeec21;--tb:#24211ed9;--ac:#a3b2fe;--on-ac:#06121f}}[data-theme=dark]{--bg:#0f0d0a;--el:#1a1815;--face:#24211e;--fg:#f0eeec;--mut:#aba7a2;--bd:#f0eeec21;--tb:#24211ed9;--ac:#a3b2fe;--on-ac:#06121f}}}@layer fertig-a11y{@media (forced-colors:active){*{box-shadow:none}button,[type=submit],[type=button],[type=reset],input,select,textarea,.card,.badge,details,dialog,[popover],fieldset,table{border:1px solid CanvasText}[role=tab][aria-selected=true]{border-bottom:2px solid Highlight}button[aria-pressed=true]{border-color:Highlight}}}