fertig 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/README.md +56 -19
  3. package/fertig.core.min.css +1 -1
  4. package/fertig.css +52 -7
  5. package/fertig.min.css +1 -1
  6. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -6,6 +6,39 @@ is the token names, the class names (the seven, plus the layout utilities),
6
6
  and the ARIA attributes the component layer reads — changes to any of those
7
7
  are breaking.
8
8
 
9
+ ## [1.0.3] — 2026-08-30
10
+
11
+ ### Changed
12
+
13
+ - `--mut` lifted from 50%/70% lightness to 47%/73%. The weakest muted pairing
14
+ — on the desktop ground in light, on chrome in dark — was 4.96:1 and 5.99:1,
15
+ a hair over AA; it is 5.65:1 and 6.70:1 now. Not taken to AAA, which would need 41.5%: that
16
+ is close enough to `--fg` that muted text stops reading as secondary at all.
17
+
18
+ ### Added
19
+
20
+ - `--nw`, the column the toolbar's contents line up with. It follows `--w`, so
21
+ nothing changes by default, and `<nav class="wide">` re-points it at the wide
22
+ column — an app screen built on `.wide` no longer gets a wordmark floating in
23
+ the middle of the viewport while its content spans the full width.
24
+
25
+ ### Fixed
26
+
27
+ - Breadcrumb separators no longer leak into other navigation. The `/` was on
28
+ `nav[aria-label] li + li`, so any labelled `<nav>` containing a `<ul>` — an
29
+ ordinary sidebar — got breadcrumb slashes between its links. Scoped to `ol`,
30
+ matching the layout rule directly above it and the documented markup.
31
+ - A `.grid` no longer collides with the block that follows it. It is a
32
+ block-level container and nothing gave it vertical rhythm. The space is on
33
+ `.grid + *` rather than a margin on `.grid` itself, which would collapse out
34
+ through the top of a padding-less container and open a seam above it.
35
+ - A segmented control (`role="group"`) with four or more buttons no longer
36
+ pushes the page sideways on a narrow screen. It scrolls within its own width
37
+ instead of wrapping, which would break the joined run of corner radii.
38
+ - A `<dl>` with a long value no longer widens the page. The value column was
39
+ a bare `1fr`, whose automatic minimum is its content, so it could not shrink;
40
+ it is `minmax(0, 1fr)` now.
41
+
9
42
  ## [1.0.2] — 2026-08-30
10
43
 
11
44
  ### Fixed
@@ -28,6 +61,15 @@ Packaging only; the stylesheet is unchanged apart from its version banner.
28
61
  - `fertig` and `fertig.css` added as keywords: the package is `fertig`, but
29
62
  people search npm for the project's name.
30
63
 
64
+ ## [1.0.1] - 2026-08-30
65
+
66
+ ### Changed
67
+
68
+ - npm keywords only: added `css-framework`, `lightweight`, `minimalist`, `html`,
69
+ `frontend`, `ui` and `responsive`. `css-framework` is the term the rest of the
70
+ category (Pico, Water.css) registers under, and it was missing. No stylesheet
71
+ changes — the CSS is byte-identical to 1.0.0.
72
+
31
73
  ## [1.0.0] — 2026-08-30
32
74
 
33
75
  First release. The project and the npm package are `fertig`. The stylesheet
package/README.md CHANGED
@@ -4,7 +4,7 @@ A classless CSS file for developers who want a project to look presentable in
4
4
  the ten seconds before they start building it. Link it, write ordinary HTML,
5
5
  and the page is finished.
6
6
 
7
- **28.0 KB raw · 7.6 KB gzipped · no build step · no dependencies.**
7
+ **28.7 KB raw · 7.8 KB gzipped · no build step · no dependencies.**
8
8
 
9
9
  ```html
10
10
  <link rel="stylesheet" href="fertig.css">
@@ -81,6 +81,20 @@ accessible by construction.
81
81
  | Card anatomy | `<header>` / `<footer>` inside `.card`; `<a class="card">` lifts on hover |
82
82
  | Tones | `data-tone="ok\|warn\|err"` retints any component |
83
83
 
84
+ And a second set, added for parity with the component libraries — same rule,
85
+ no classes:
86
+
87
+ | Component | Markup |
88
+ |---|---|
89
+ | Avatar | `data-avatar` on an `<img>` or on initials in a `<span>`; `="sm\|lg"` |
90
+ | Skeleton | `data-skeleton` on the element that is still loading |
91
+ | Sheet / drawer | `<dialog data-side="left\|right\|bottom">` — the same dialog, docked to an edge |
92
+ | Toast | `[popover][data-toast]` — non-modal, parked in a corner |
93
+ | List group | a plain `<menu>` outside a popover becomes a bordered list |
94
+ | Nav menu | a `<menu>` inside a `<nav>` is navigation instead — no rules, no bullets, `aria-current` marks the page |
95
+ | Sidebar layout | `data-layout="sidebar"` on a wrapper of two children; the first sticks |
96
+ | Carousel | `data-carousel` — scroll snapping, with real scroll buttons where they exist |
97
+
84
98
  ## The seven optional classes
85
99
 
86
100
  `.row` `.grid` `.card` `.badge` `.muted` `.center` `.wide`
@@ -133,7 +147,11 @@ Override the four tokens you'd actually want to change:
133
147
  If you change `--ac`, check `--on-ac` too — that is the text colour sitting on
134
148
  the accent, and a light accent needs dark text to stay legible.
135
149
  `--up` / `--up2` / `--dn` are the elevation scale, `--a1` / `--a2` the shadow
136
- alphas, `--rw` the window radius.
150
+ alphas, `--rw` the window radius, and `--nw` the column the toolbar's contents
151
+ line up with. `--nw` follows `--w`, so nothing moves by default; `<nav
152
+ class="wide">` re-points it at the wide column, which is what an app screen
153
+ built on `.wide` wants so its wordmark doesn't float in the middle of the
154
+ viewport.
137
155
 
138
156
  ## Also handled
139
157
 
@@ -169,12 +187,15 @@ themes, measured in-browser from the computed token values:
169
187
 
170
188
  | Pair | Light | Dark |
171
189
  |---|---:|---:|
172
- | Body text on paper | 16.83 | 14.94 |
173
- | Muted text on paper | 5.07 | 5.92 |
174
- | Links on paper | 5.37 | 6.17 |
175
- | Muted on chrome | 4.65 | 5.24 |
176
- | Text on accent | 5.37 | 7.63 |
177
- | Tones (ok / warn / err) | 4.87–5.44 | 6.13–6.74 |
190
+ | Body text on paper | 17.05 | 15.31 |
191
+ | Muted text on paper | 6.73 | 7.41 |
192
+ | Links on paper | 6.38 | 8.97 |
193
+ | Muted on chrome | 6.30 | 6.70 |
194
+ | Muted on the desktop ground | 5.65 | 8.11 |
195
+ | Text on accent | 6.48 | 10.63 |
196
+ | Tones (ok / warn / err) | 4.80–6.55 | 7.63–9.43 |
197
+
198
+ The tightest pair in the sheet is the warn tone on paper in light, at 4.80:1.
178
199
 
179
200
  Motion is gated behind `prefers-reduced-motion`, focus uses a visible ring at
180
201
  `:focus-visible`, and the component layer is driven by the same ARIA attributes
@@ -184,10 +205,10 @@ assistive technology reads.
184
205
 
185
206
  | Sheet | Raw | Gzip |
186
207
  |---|---:|---:|
187
- | **fertig** | **28.0 KB** | **7.6 KB** |
188
- | Pico 2 classless | 71.0 KB | 10.1 KB |
208
+ | **fertig** | **28.7 KB** | **7.8 KB** |
209
+ | Pico 2.1.1 classless | 69.4 KB | 10.1 KB |
189
210
 
190
- Measured with `gzip -9` via `npm run build`. Most of the gap is Pico's full
211
+ Measured with `gzip -9`, KB = 1024 bytes for every row. Most of the gap is Pico's full
191
212
  colour palette and its base64-SVG control icons; see
192
213
  `docs/classless-css-research.md`.
193
214
 
@@ -250,22 +271,38 @@ npm run build # regenerate fertig.min.css and print sizes
250
271
 
251
272
  | Build | Raw | Gzip | |
252
273
  |---|---:|---:|---|
253
- | `fertig.min.css` | 28.0 KB | 7.6 KB | everything |
254
- | `fertig.core.min.css` | 21.7 KB | 6.3 KB | without the ARIA component layer |
274
+ | `fertig.min.css` | 28.7 KB | 7.8 KB | everything |
275
+ | `fertig.core.min.css` | 21.8 KB | 6.3 KB | without the ARIA component layer |
255
276
 
256
- Dropping the component layer saves 0.8 KB gzipped — worth knowing, rarely worth
277
+ Dropping the component layer saves 1.4 KB gzipped — worth knowing, rarely worth
257
278
  doing. The weight is in the element coverage and forms, not the components.
258
279
 
259
280
  ## Files
260
281
 
282
+ The sheet:
283
+
261
284
  - `fertig.css` — source, commented
262
285
  - `fertig.min.css` — minified, what you ship
263
- - `index.html` — landing page
264
- - `blocks.html` — ready-to-use markup blocks (16 of them)
265
- - `llms.txt` — machine-readable summary for LLMs, per llmstxt.org
266
- - `docs.html` — documentation
267
- - `app.html` — a full product screen built with no page CSS at all
286
+ - `fertig.core.min.css` — the same without the ARIA component layer
268
287
  - `build.js` — minifier and size report
288
+
289
+ The site:
290
+
291
+ - `index.html` — landing page, with a live customiser that writes the token
292
+ block for you
293
+ - `docs.html` — documentation
294
+ - `blocks.html` — ready-to-use markup blocks (16 of them); the code shown is
295
+ generated from the live preview, so it cannot drift
296
+ - `app.html`, `app-invoice.html` — full product screens built with no page CSS
297
+ at all
298
+ - `templates/` — four whole pages: `dashboard`, `article`, `pricing`, `signin`
299
+ - `site.css`, `site.js`, `icons.svg`, `favicon.svg` — the site's own chrome,
300
+ none of it part of the sheet
301
+
302
+ Everything else:
303
+
304
+ - `llms.txt` — machine-readable summary for LLMs, per llmstxt.org
305
+ - `CHANGELOG.md` — what changed and why, per release
269
306
  - `docs/classless-css-research.md` — the research behind the decisions
270
307
 
271
308
  ## License
package/fertig.core.min.css CHANGED
@@ -1 +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}}}
1
+ /*! fertig v1.0.3 — 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(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(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;--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}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 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(--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;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){: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}body>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:.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}}}
package/fertig.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! fertig v1.0.2 — a classless CSS stylesheet. MIT */
1
+ /*! fertig v1.0.3 — a classless CSS stylesheet. MIT */
2
2
 
3
3
  /* Opinions, so you don't have to have them:
4
4
  system type · one accent · one measure · a window on a desktop.
@@ -65,7 +65,12 @@
65
65
  --el: light-dark(oklch(99.4% .002 75), oklch(21% .006 75)); /* paper */
66
66
  --face:light-dark(oklch(97.2% .005 75), oklch(25% .007 75)); /* chrome */
67
67
  --fg: light-dark(oklch(22% .008 75), oklch(95% .004 75));
68
- --mut: light-dark(oklch(50% .009 75), oklch(70% .008 75));
68
+ /* lifted from 50%/70%: the weakest pairing (muted on the desktop ground in
69
+ light, muted on chrome in dark) was 4.96:1 and 5.99:1, a hair over AA.
70
+ 47%/73% takes them to 5.65:1 and 6.70:1 while keeping a clear step down
71
+ from --fg — AAA would need 41.5%, which is close enough to --fg that
72
+ "muted" stops reading as secondary at all. */
73
+ --mut: light-dark(oklch(47% .009 75), oklch(73% .008 75));
69
74
  --bd: light-dark(oklch(22% .008 75 / .13), oklch(95% .004 75 / .13));
70
75
  --tb: light-dark(oklch(97.2% .005 75 / .85), oklch(25% .007 75 / .85));
71
76
  --ac: light-dark(var(--sky-700), oklch(78% .085 245)); /* yours */
@@ -128,7 +133,11 @@ body > footer {
128
133
  /* nav = unified toolbar: full-bleed, vibrant, contents on the measure */
129
134
  body > nav {
130
135
  position: sticky; top: 0; z-index: 9; max-width: none;
131
- padding-inline: max(1.9rem, calc(50% - var(--w) / 2 + 1.9rem),
136
+ /* the toolbar is full-bleed but its contents line up with the page column.
137
+ --nw is that column: it follows --w, so overriding the measure moves the
138
+ toolbar with it, and .wide re-points it at the wide column instead. */
139
+ --nw: var(--w);
140
+ padding-inline: max(1.9rem, calc(50% - var(--nw) / 2 + 1.9rem),
132
141
  env(safe-area-inset-left), env(safe-area-inset-right));
133
142
  display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center;
134
143
  padding-block: calc(.6rem + env(safe-area-inset-top, 0px)) .6rem;
@@ -172,7 +181,9 @@ blockquote {
172
181
  }
173
182
  ul, ol { padding-inline-start: 1.5rem }
174
183
  li::marker { color: var(--mut) }
175
- dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem }
184
+ /* minmax(0, 1fr), not 1fr: a bare 1fr track has min-width:auto, so a long
185
+ value cannot shrink and pushes the page sideways on a narrow screen. */
186
+ dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem }
176
187
  dt { color: var(--mut) }
177
188
  dd { margin: 0 }
178
189
  figcaption { font-size: .85em; color: var(--mut); text-align: center }
@@ -449,12 +460,13 @@ dialog > footer > :is(p, span):first-child { margin: 0; margin-inline-end: auto;
449
460
  [popover]:popover-open { opacity: 1; translate: 0 }
450
461
  @starting-style { [popover]:popover-open { opacity: 0; translate: 0 -4px } }
451
462
  }
452
- search { display: block }
463
+ search { display: block; margin-block: 1.1rem } /* a landmark needs its own rhythm */
453
464
  ::target-text { background: color-mix(in srgb, var(--ac) 28%, transparent) }
454
465
  aside {
455
466
  border: 1px solid var(--bd); border-inline-start: 3px solid var(--ac);
456
467
  border-radius: var(--r); border-start-start-radius: 0; border-end-start-radius: 0;
457
468
  background: var(--el); padding: .7rem 1.1rem;
469
+ margin-block: 1.1rem; /* or the next block sits flush against it */
458
470
  }
459
471
  progress { width: 100%; height: .5rem; border: 0; border-radius: calc(infinity * 1px); background: var(--face) }
460
472
  progress::-webkit-progress-bar { background: var(--face); border-radius: calc(infinity * 1px) }
@@ -477,7 +489,11 @@ progress::-moz-progress-bar { background: var(--ac); border-radius: calc(infinit
477
489
  /* ---- components, addressed by ARIA rather than by class ----- */
478
490
 
479
491
  /* segmented control: <div role=group> of buttons */
480
- [role=group] { display: inline-flex; vertical-align: middle }
492
+ /* max-inline-size + scroll, or a group of four or more buttons pushes the
493
+ whole page sideways on a narrow screen. It scrolls rather than wraps:
494
+ wrapping would break the joined-pill run of radii into separate rows. */
495
+ [role=group] { display: inline-flex; vertical-align: middle;
496
+ max-inline-size: 100%; overflow-x: auto; overscroll-behavior-x: contain }
481
497
  [role=group] > * { border-radius: 0; margin-inline-start: -1px; box-shadow: none; min-width: 0 }
482
498
  [role=group] > :first-child {
483
499
  margin-inline-start: 0;
@@ -553,7 +569,7 @@ input[switch]:checked::after, input[role=switch]:checked::after { translate: .9e
553
569
 
554
570
  /* breadcrumbs: <nav aria-label="Breadcrumb"><ol> */
555
571
  nav[aria-label] ol { display: flex; flex-wrap: wrap; gap: .5em; list-style: none; padding: 0; font-size: .9em }
556
- nav[aria-label] li + li::before { content: "/"; margin-inline-end: .5em; color: var(--mut) }
572
+ nav[aria-label] ol li + li::before { content: "/"; margin-inline-end: .5em; color: var(--mut) }
557
573
 
558
574
  /* busy: [aria-busy=true] */
559
575
  [aria-busy=true] { cursor: progress }
@@ -658,6 +674,26 @@ menu > li + li { border-top: 1px solid var(--bd) }
658
674
  [popover] menu > li { padding: 0 }
659
675
  [popover] menu > li + li { border-top: 0 }
660
676
 
677
+ /* navigation lists: a <menu> inside a <nav> is navigation, not a list group.
678
+ No rules between items, no bullets, and the link fills the row so the whole
679
+ band is the hit target. This is what [data-layout=sidebar] below is for —
680
+ the layout shipped without it, which left the obvious markup looking boxed. */
681
+ nav menu {
682
+ border: 0; background: none; padding: 0; margin-block: 0 1.2rem;
683
+ }
684
+ nav menu > li { padding: 0 }
685
+ nav menu > li + li { border-top: 0 }
686
+ nav menu :is(a, button) {
687
+ display: block; inline-size: 100%; text-align: start;
688
+ padding: .38rem .6rem; border: 0; border-radius: var(--r);
689
+ background: none; box-shadow: none; font: inherit;
690
+ color: var(--fg); text-decoration: none; opacity: .72;
691
+ }
692
+ nav menu :is(a, button):hover { background: var(--face); opacity: 1 }
693
+ nav menu :is(a, button)[aria-current] {
694
+ background: var(--face); color: var(--ac); font-weight: 600; opacity: 1;
695
+ }
696
+
661
697
  /* app layout: a sticky sidebar beside the content */
662
698
  [data-layout=sidebar] { display: grid; gap: 1.5rem; align-items: start }
663
699
  @media (width >= 56rem) {
@@ -679,6 +715,10 @@ menu > li + li { border-top: 1px solid var(--bd) }
679
715
  .muted { color: var(--mut) }
680
716
  .center { text-align: center }
681
717
  .wide { max-width: 66rem }
718
+ /* on the toolbar .wide cannot mean "be 66rem wide" — the bar stays full-bleed
719
+ and its contents move out to the wide column, so an app screen's wordmark
720
+ lines up with the app's own content rather than floating mid-screen. */
721
+ body > nav.wide { max-width: none; --nw: 66rem }
682
722
  .row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center }
683
723
  /* Form controls are full-width blocks by default, which is right in a form and
684
724
  wrong in a toolbar. Inside a .row they size to the row instead. */
@@ -689,6 +729,11 @@ menu > li + li { border-top: 1px solid var(--bd) }
689
729
  .row :is(progress, meter) { width: auto; flex: 1 1 6rem }
690
730
  .row > label { flex: none; margin-top: 0 }
691
731
  .grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)) }
732
+ /* a .grid is a block-level container that nothing else gives vertical rhythm
733
+ to, so whatever follows one collides with it. Spacing the next sibling
734
+ rather than the grid itself: a margin on .grid would collapse out through
735
+ the top of a padding-less container and open a seam above it. */
736
+ .grid + * { margin-top: 1.1rem }
692
737
  .card {
693
738
  container-type: inline-size; /* query it: @container (min-width: …) */
694
739
  border: 1px solid var(--bd); border-radius: var(--r); padding: .9rem;
package/fertig.min.css CHANGED
@@ -1 +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}}}[role=group]{display:inline-flex;vertical-align:middle}[role=group]>*{border-radius:0;margin-inline-start:-1px;box-shadow:none;min-width:0}[role=group]>:first-child{margin-inline-start:0;border-start-start-radius:var(--r);border-end-start-radius:var(--r)}[role=group]>:last-child{border-start-end-radius:var(--r);border-end-end-radius:var(--r)}[role=group]>[aria-pressed=true]{background:var(--face);color:var(--ac);font-weight:700}[role=tablist]{display:flex;gap:.1rem;border-bottom:1px solid var(--bd);margin:1.1rem 0}[role=tab]{background:none;border:0;box-shadow:none;min-width:0;color:var(--mut);padding:.45em .9em;border-radius:var(--r) var(--r) 0 0;margin-bottom:-1px}[role=tab]:hover:not(:disabled){background:var(--face);color:var(--fg)}[role=tab][aria-selected=true]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--ac)}input[type=checkbox][switch],input[type=checkbox][role=switch]{appearance:none;width:2.2em;height:1.3em;border-radius:calc(infinity * 1px);border:0;background:color-mix(in srgb,var(--fg) 20%,transparent);position:relative;cursor:pointer;vertical-align:-.3em;margin-inline-end:.5em}input[switch]::after,input[role=switch]::after{content:"";position:absolute;inset-block-start:.14em;inset-inline-start:.14em;width:1.02em;height:1.02em;border-radius:50%;background:#fff;box-shadow:var(--up);transition:translate .16s ease}input[switch]:checked,input[role=switch]:checked{background:var(--ac)}input[switch]:checked::after,input[role=switch]:checked::after{translate:.9em 0}:is(input[switch],input[role=switch]):checked:dir(rtl)::after{translate:-.9em 0}[popover]{background:var(--el);color:var(--fg);border:1px solid var(--bd);border-radius:var(--r);padding:.3rem;min-width:12rem;max-block-size:60dvh;overflow:auto;font-size:.95em;box-shadow:var(--up2),0 20px 40px -14px oklch(from var(--sh) l c h / .4)}@supports (position-area:block-end span-inline-end){[popover]{position:fixed;inset:auto;position-anchor:auto;position-area:block-end span-inline-end;position-try-fallbacks:flip-block,flip-inline;margin:.35rem 0 0}@supports (min-width:anchor-size(width)){[popover]{min-width:max(12rem,anchor-size(width));position-visibility:anchors-visible}}}[popover]:is(ul,menu){list-style:none;padding:0;margin:0}[popover]:is(a,button):not(:disabled){display:block;width:100%;text-align:start;background:none;border:0;box-shadow:none;min-width:0;padding:.4em .6em;text-decoration:none;color:inherit;border-radius:calc(var(--r) - 2px);font-weight:400}[popover]:is(a,button):hover:not(:disabled){background:var(--ac);color:var(--on-ac)}[popover] hr{margin:.3rem 0}nav[aria-label] ol{display:flex;flex-wrap:wrap;gap:.5em;list-style:none;padding:0;font-size:.9em}nav[aria-label] li + li::before{content:"/";margin-inline-end:.5em;color:var(--mut)}[aria-busy=true]{cursor:progress}[aria-busy=true]::before{content:"";display:inline-block;width:.85em;height:.85em;margin-inline-end:.55em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;vertical-align:-.1em}@media (prefers-reduced-motion:no-preference) and (update:fast){[aria-busy=true]::before{animation:fertig-spin .6s linear infinite}}@keyframes fertig-spin{to{rotate:360deg}}[data-tooltip]{position:relative}[data-tooltip]:is(:hover,:focus-visible)::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;translate:-50% -.45em;z-index:10;white-space:nowrap;pointer-events:none;background:light-dark(#1d1d1f,#3a3a40);color:#fff;font-size:.8em;padding:.25em .55em;border-radius:var(--r);box-shadow:var(--up2)}[data-tone=ok]{--ac:light-dark(var(--sage-700),oklch(76% .085 155))}[data-tone=warn]{--ac:light-dark(var(--gold-700),oklch(80% .095 85))}[data-tone=err]{--ac:light-dark(var(--clay-700),oklch(75% .105 35))}[data-tone] .badge,.badge[data-tone]{color:var(--ac);border-color:var(--ac)}[data-avatar]{display:inline-grid;place-items:center;flex:none;overflow:hidden;inline-size:2.5rem;aspect-ratio:1;border-radius:50%;background:var(--face);border:1px solid var(--bd);font-size:.8em;font-weight:700;color:var(--mut);object-fit:cover}[data-avatar=sm]{inline-size:1.75rem;font-size:.7em}[data-avatar=lg]{inline-size:3.5rem;font-size:1em}[data-skeleton]{color:transparent;border-radius:var(--r);pointer-events:none;user-select:none;min-height:1em;background:linear-gradient(90deg,var(--face),color-mix(in srgb,var(--fg) 9%,var(--face)),var(--face));background-size:200% 100%}[data-skeleton] *{visibility:hidden}@media (prefers-reduced-motion:no-preference) and (update:fast){[data-skeleton]{animation:fertig-shimmer 1.4s linear infinite}@keyframes fertig-shimmer{to{background-position:-200% 0}}}dialog[data-side]{max-width:none;margin:0;border-radius:0;padding:1.4rem}dialog[data-side=right]{inset:0 0 0 auto;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-end:0}dialog[data-side=left]{inset:0 auto 0 0;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-start:0}dialog[data-side=bottom]{inset:auto 0 0 0;inline-size:100%;max-block-size:85dvh;border-radius:var(--rw) var(--rw) 0 0;border-bottom:0}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog[data-side=right]{translate:100% 0}dialog[data-side=left]{translate:-100% 0}dialog[data-side=bottom]{translate:0 100%}dialog[data-side][open]{translate:0 0}@starting-style{dialog[data-side=right][open]{translate:100% 0}dialog[data-side=left][open]{translate:-100% 0}dialog[data-side=bottom][open]{translate:0 100%}}}[popover][data-toast]{position:fixed;inset:auto 1rem 1rem auto;margin:0;min-width:16rem;max-width:min(24rem,92dvw);padding:.8rem 1rem}@supports (position-area:block-end span-inline-end){[popover][data-toast]{position-area:none;inset:auto 1rem 1rem auto;min-width:16rem}}menu{list-style:none;padding:0;margin:1.1rem 0;border:1px solid var(--bd);border-radius:var(--r);background:var(--el)}menu>li{padding:.55rem .85rem}menu>li + li{border-top:1px solid var(--bd)}[popover] menu{border:0;padding:0;margin:0;background:none}[popover] menu>li{padding:0}[popover] menu>li + li{border-top:0}[data-layout=sidebar]{display:grid;gap:1.5rem;align-items:start}@media (width>= 56rem){[data-layout=sidebar]{grid-template-columns:15rem minmax(0,1fr)}[data-layout=sidebar]>:first-child{position:sticky;top:4.5rem}}[data-layout=sidebar]>*{min-width:0}[data-carousel]{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}[data-carousel]>*{scroll-snap-align:start;flex:0 0 min(20rem,82%)}.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}}}
1
+ /*! fertig v1.0.3 — 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(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(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;--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}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 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(--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;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){: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}}}[role=group]{display:inline-flex;vertical-align:middle;max-inline-size:100%;overflow-x:auto;overscroll-behavior-x:contain}[role=group]>*{border-radius:0;margin-inline-start:-1px;box-shadow:none;min-width:0}[role=group]>:first-child{margin-inline-start:0;border-start-start-radius:var(--r);border-end-start-radius:var(--r)}[role=group]>:last-child{border-start-end-radius:var(--r);border-end-end-radius:var(--r)}[role=group]>[aria-pressed=true]{background:var(--face);color:var(--ac);font-weight:700}[role=tablist]{display:flex;gap:.1rem;border-bottom:1px solid var(--bd);margin:1.1rem 0}[role=tab]{background:none;border:0;box-shadow:none;min-width:0;color:var(--mut);padding:.45em .9em;border-radius:var(--r) var(--r) 0 0;margin-bottom:-1px}[role=tab]:hover:not(:disabled){background:var(--face);color:var(--fg)}[role=tab][aria-selected=true]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--ac)}input[type=checkbox][switch],input[type=checkbox][role=switch]{appearance:none;width:2.2em;height:1.3em;border-radius:calc(infinity * 1px);border:0;background:color-mix(in srgb,var(--fg) 20%,transparent);position:relative;cursor:pointer;vertical-align:-.3em;margin-inline-end:.5em}input[switch]::after,input[role=switch]::after{content:"";position:absolute;inset-block-start:.14em;inset-inline-start:.14em;width:1.02em;height:1.02em;border-radius:50%;background:#fff;box-shadow:var(--up);transition:translate .16s ease}input[switch]:checked,input[role=switch]:checked{background:var(--ac)}input[switch]:checked::after,input[role=switch]:checked::after{translate:.9em 0}:is(input[switch],input[role=switch]):checked:dir(rtl)::after{translate:-.9em 0}[popover]{background:var(--el);color:var(--fg);border:1px solid var(--bd);border-radius:var(--r);padding:.3rem;min-width:12rem;max-block-size:60dvh;overflow:auto;font-size:.95em;box-shadow:var(--up2),0 20px 40px -14px oklch(from var(--sh) l c h / .4)}@supports (position-area:block-end span-inline-end){[popover]{position:fixed;inset:auto;position-anchor:auto;position-area:block-end span-inline-end;position-try-fallbacks:flip-block,flip-inline;margin:.35rem 0 0}@supports (min-width:anchor-size(width)){[popover]{min-width:max(12rem,anchor-size(width));position-visibility:anchors-visible}}}[popover]:is(ul,menu){list-style:none;padding:0;margin:0}[popover]:is(a,button):not(:disabled){display:block;width:100%;text-align:start;background:none;border:0;box-shadow:none;min-width:0;padding:.4em .6em;text-decoration:none;color:inherit;border-radius:calc(var(--r) - 2px);font-weight:400}[popover]:is(a,button):hover:not(:disabled){background:var(--ac);color:var(--on-ac)}[popover] hr{margin:.3rem 0}nav[aria-label] ol{display:flex;flex-wrap:wrap;gap:.5em;list-style:none;padding:0;font-size:.9em}nav[aria-label] ol li + li::before{content:"/";margin-inline-end:.5em;color:var(--mut)}[aria-busy=true]{cursor:progress}[aria-busy=true]::before{content:"";display:inline-block;width:.85em;height:.85em;margin-inline-end:.55em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;vertical-align:-.1em}@media (prefers-reduced-motion:no-preference) and (update:fast){[aria-busy=true]::before{animation:fertig-spin .6s linear infinite}}@keyframes fertig-spin{to{rotate:360deg}}[data-tooltip]{position:relative}[data-tooltip]:is(:hover,:focus-visible)::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;translate:-50% -.45em;z-index:10;white-space:nowrap;pointer-events:none;background:light-dark(#1d1d1f,#3a3a40);color:#fff;font-size:.8em;padding:.25em .55em;border-radius:var(--r);box-shadow:var(--up2)}[data-tone=ok]{--ac:light-dark(var(--sage-700),oklch(76% .085 155))}[data-tone=warn]{--ac:light-dark(var(--gold-700),oklch(80% .095 85))}[data-tone=err]{--ac:light-dark(var(--clay-700),oklch(75% .105 35))}[data-tone] .badge,.badge[data-tone]{color:var(--ac);border-color:var(--ac)}[data-avatar]{display:inline-grid;place-items:center;flex:none;overflow:hidden;inline-size:2.5rem;aspect-ratio:1;border-radius:50%;background:var(--face);border:1px solid var(--bd);font-size:.8em;font-weight:700;color:var(--mut);object-fit:cover}[data-avatar=sm]{inline-size:1.75rem;font-size:.7em}[data-avatar=lg]{inline-size:3.5rem;font-size:1em}[data-skeleton]{color:transparent;border-radius:var(--r);pointer-events:none;user-select:none;min-height:1em;background:linear-gradient(90deg,var(--face),color-mix(in srgb,var(--fg) 9%,var(--face)),var(--face));background-size:200% 100%}[data-skeleton] *{visibility:hidden}@media (prefers-reduced-motion:no-preference) and (update:fast){[data-skeleton]{animation:fertig-shimmer 1.4s linear infinite}@keyframes fertig-shimmer{to{background-position:-200% 0}}}dialog[data-side]{max-width:none;margin:0;border-radius:0;padding:1.4rem}dialog[data-side=right]{inset:0 0 0 auto;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-end:0}dialog[data-side=left]{inset:0 auto 0 0;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-start:0}dialog[data-side=bottom]{inset:auto 0 0 0;inline-size:100%;max-block-size:85dvh;border-radius:var(--rw) var(--rw) 0 0;border-bottom:0}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog[data-side=right]{translate:100% 0}dialog[data-side=left]{translate:-100% 0}dialog[data-side=bottom]{translate:0 100%}dialog[data-side][open]{translate:0 0}@starting-style{dialog[data-side=right][open]{translate:100% 0}dialog[data-side=left][open]{translate:-100% 0}dialog[data-side=bottom][open]{translate:0 100%}}}[popover][data-toast]{position:fixed;inset:auto 1rem 1rem auto;margin:0;min-width:16rem;max-width:min(24rem,92dvw);padding:.8rem 1rem}@supports (position-area:block-end span-inline-end){[popover][data-toast]{position-area:none;inset:auto 1rem 1rem auto;min-width:16rem}}menu{list-style:none;padding:0;margin:1.1rem 0;border:1px solid var(--bd);border-radius:var(--r);background:var(--el)}menu>li{padding:.55rem .85rem}menu>li + li{border-top:1px solid var(--bd)}[popover] menu{border:0;padding:0;margin:0;background:none}[popover] menu>li{padding:0}[popover] menu>li + li{border-top:0}nav menu{border:0;background:none;padding:0;margin-block:0 1.2rem}nav menu>li{padding:0}nav menu>li + li{border-top:0}nav menu:is(a,button){display:block;inline-size:100%;text-align:start;padding:.38rem .6rem;border:0;border-radius:var(--r);background:none;box-shadow:none;font:inherit;color:var(--fg);text-decoration:none;opacity:.72}nav menu:is(a,button):hover{background:var(--face);opacity:1}nav menu:is(a,button)[aria-current]{background:var(--face);color:var(--ac);font-weight:600;opacity:1}[data-layout=sidebar]{display:grid;gap:1.5rem;align-items:start}@media (width>= 56rem){[data-layout=sidebar]{grid-template-columns:15rem minmax(0,1fr)}[data-layout=sidebar]>:first-child{position:sticky;top:4.5rem}}[data-layout=sidebar]>*{min-width:0}[data-carousel]{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}[data-carousel]>*{scroll-snap-align:start;flex:0 0 min(20rem,82%)}.muted{color:var(--mut)}.center{text-align:center}.wide{max-width:66rem}body>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:.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}}}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "fertig",
3
- "version": "1.0.2",
4
- "description": "A classless CSS stylesheet with no legacy in it: no prefixes, no polyfills, no classes. Link one file, write ordinary HTML, done \u2014 7.6 KB gzipped, no build step, no dependencies.",
3
+ "version": "1.0.3",
4
+ "description": "A classless CSS stylesheet with no legacy in it: no prefixes, no polyfills, no classes. Link one file, write ordinary HTML, done — 7.8 KB gzipped, no build step, no dependencies.",
5
5
  "keywords": [
6
6
  "fertig",
7
7
  "fertig.css",