@danieldeusing/design 0.26.0 → 0.28.0

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 (11) hide show
  1. package/dist/danieldeusing-design.css +106 -34
  2. package/dist/danieldeusing-design.min.css +2 -2
  3. package/package.json +2 -2
  4. package/src/base.css +47 -2
  5. package/src/chrome.css +9 -9
  6. package/src/components.css +16 -16
  7. package/src/tailwind.css +6 -6
  8. package/src/tokens.css +31 -4
  9. package/src/tooltip.css +2 -2
  10. package/templates/documentation.html +8 -6
  11. package/tokens/tokens.json +1 -8
package/dist/danieldeusing-design.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! danieldeusing-design v0.26.0 | MIT | https://github.com/danieldeusing/danieldeusing-design */
1
+ /*! danieldeusing-design v0.28.0 | MIT | https://github.com/danieldeusing/danieldeusing-design */
2
2
  /* ===== reset.css ===== */
3
3
  /*
4
4
  * danieldeusing-design — minimal reset.
@@ -293,12 +293,39 @@ html[data-theme="paper"] {
293
293
  four widths in the first place. */
294
294
  --content-pad: 1.5rem;
295
295
 
296
- --fs-xs: 0.625rem; /* 10px — table micro-labels, badge text, meta lines */
297
- --fs-sm: 0.6875rem; /* 11px — secondary and muted copy */
298
- --fs-base: 0.75rem; /* 12px — body. THE reference; base.css sets it on <body> */
299
- --fs-md: 0.8125rem; /* 13px — emphasised body, card headings, table headers */
296
+ /* ONE SIZE FOR TEXT (Daniel, 2026-08-11). There used to be four — `--fs-xs` 10px, `--fs-sm`
297
+ 11px, `--fs-base` 12px, `--fs-md` 13px — and they are gone, not renamed.
298
+
299
+ They were never a hierarchy. Four sizes one pixel apart cannot be told apart on sight, so
300
+ nothing in the estate ever CHOSE between them: every surface picked whichever felt right at
301
+ the time, and one repository card ended up rendering text at 10.2px, 10.8px, 10.88px, 11px,
302
+ 12px and 13px at once. Differences that small do not read as emphasis, they read as a page
303
+ that has not been finished — which is exactly how Daniel found this, by looking at a card and
304
+ asking why the words were different sizes.
305
+
306
+ The fix is not discipline, it is REMOVING THE CHOICE. With one text size there is no near-miss
307
+ to pick, and `font-size` stops being a decision anybody makes while writing a component.
308
+
309
+ What survives is the part that is genuinely a hierarchy: three heading steps, each a clear
310
+ jump rather than a nudge. If something needs to be quieter than body text, that is what
311
+ `--muted-foreground` and `opacity` are for — colour and weight separate a label from its value
312
+ far better than one pixel ever did, and they keep working at any zoom. */
313
+ --fs-base: 0.75rem; /* 12px — ALL normal text: body, tables, labels, badges, notes, controls */
300
314
  --fs-lg: 0.9375rem; /* 15px — h3 / section heads */
301
315
  --fs-xl: 1.125rem; /* 18px — h2 / page title */
316
+
317
+ /* ── VERTICAL RHYTHM BETWEEN SECTIONS ──────────────────────────────────────
318
+ The reset zeroes every margin (`* { margin: 0 }`) and nothing here ever put
319
+ heading spacing back, so for as long as this package has existed each
320
+ surface has invented its own gap. cockpit carries
321
+ `section.doc { margin-top: 2.5rem }` privately in portal.css; the family
322
+ financing page had nothing at all and read as one unbroken column. Two
323
+ surfaces, two answers, and the drift is invisible until they are seen side
324
+ by side — which is the whole reason this package exists.
325
+
326
+ 2.5rem is cockpit's existing value, promoted rather than invented, so the
327
+ surface that already had a considered answer does not move. */
328
+ --space-section: 2.5rem;
302
329
  --fs-2xl: 1.5rem; /* 24px — h1 / hero, display only */
303
330
 
304
331
  --lh-tight: 1.3; /* headings and single-line chrome */
@@ -356,9 +383,17 @@ body {
356
383
  They had been picking: cockpit's documentation tables sat at 15px while the containers
357
384
  dashboard's sat at 12px, a 3px gap between two pages of the same site. Nobody chose
358
385
  that; the two numbers were set years apart and never compared. A page with a genuine
359
- reason to differ still can, but it now has to say so instead of inheriting an accident. */
386
+ reason to differ still can, but it now has to say so instead of inheriting an accident.
387
+
388
+ ⚠️ This rule said `--fs-md` (13px) until 2026-08-11, while the sentence above it said "body
389
+ copy" — the comment and the code had disagreed since the day the rule was written, and the
390
+ comment was the one telling the truth about the intent. So every table in the estate rendered
391
+ one step LOUDER than the body around it, and in a cockpit form row that put the cells at 13px
392
+ beside an 11px label: the caption read as a footnote to the data it was introducing. Nobody
393
+ asked for that emphasis. It existed because the scale had a 13px step and a table is the
394
+ obvious place to spend one. */
360
395
  table {
361
- font-size: var(--fs-md);
396
+ font-size: var(--fs-base);
362
397
  width: 100%;
363
398
  }
364
399
 
@@ -447,6 +482,43 @@ body::after {
447
482
  color: var(--primary-foreground);
448
483
  }
449
484
 
485
+
486
+ /* ── SECTION AND HEADING RHYTHM ────────────────────────────────────────────────
487
+ Wrapped in :where(), so every one of these rules has specificity ZERO. That is
488
+ deliberate and it is what makes this safe to add to a package five surfaces
489
+ already depend on: any existing declaration a surface carries — cockpit's
490
+ `section.doc h2 { margin: 0.3rem 0 0 }`, for instance — beats these without
491
+ needing !important or a load-order argument. Nothing that already had an
492
+ answer changes; only surfaces that had NO answer gain one.
493
+
494
+ Sections and headings, not a generic `* + *` stack, because the gap that reads
495
+ as "a new part of the page starts here" is a different quantity from the gap
496
+ between two paragraphs, and collapsing them is what makes a long page feel
497
+ like an undifferentiated column. */
498
+ :where(section) + :where(section),
499
+ :where(section.doc) {
500
+ margin-block-start: var(--space-section);
501
+ }
502
+
503
+ /* A heading that opens its container needs no gap above it — the container's own
504
+ spacing already provides it, and doubling the two is the usual cause of a
505
+ first section sitting oddly low. */
506
+ :where(section, .wrap, .body) > :where(h2) {
507
+ margin-block-start: var(--space-section);
508
+ }
509
+ :where(section, .wrap, .body) > :where(h3) {
510
+ margin-block-start: calc(var(--space-section) * 0.6);
511
+ }
512
+ :where(section, .wrap, .body) > :where(h2, h3):first-child {
513
+ margin-block-start: 0;
514
+ }
515
+
516
+ /* A table or a chart immediately under its heading belongs to that heading, so
517
+ the gap there is small — the rhythm is BETWEEN sections, not inside them. */
518
+ :where(h2, h3) + :where(p, table, .tablewrap, svg, .legend) {
519
+ margin-block-start: 0.6rem;
520
+ }
521
+
450
522
  /* ===== components.css ===== */
451
523
  /*
452
524
  * danieldeusing-design — component layer.
@@ -495,7 +567,7 @@ body::after {
495
567
  gap: 0.5rem 0.75rem;
496
568
  margin: 0.35rem 0;
497
569
  }
498
- .field-row > .lbl { color: var(--muted-foreground); font-size: var(--fs-sm); text-align: left; }
570
+ .field-row > .lbl { color: var(--muted-foreground); font-size: var(--fs-base); text-align: left; }
499
571
  /* The value cell: controls sit on one row and wrap together, rather than each finding its own. */
500
572
  .field-row > .field-val {
501
573
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; min-width: 0;
@@ -509,7 +581,7 @@ body::after {
509
581
  Shell affordances — `$ command` section headers and `# comment` lines.
510
582
  ───────────────────────────────────────────────────────────────────────── */
511
583
  .prompt {
512
- font-size: 0.75rem;
584
+ font-size: var(--fs-base);
513
585
  font-weight: 700;
514
586
  color: var(--muted-foreground);
515
587
  }
@@ -616,7 +688,7 @@ body::after {
616
688
  lost to `padding: 12px 24px` and every compact button in the estate rendered at CTA size. Only
617
689
  the font-size appeared to work, because `.btn-terminal` happens not to set one, which is what
618
690
  made it look like a class that was working. Position is load-bearing here, not tidiness. */
619
- .btn-terminal--compact { padding: 0.28rem 0.7rem; font-size: var(--fs-sm); }
691
+ .btn-terminal--compact { padding: 0.28rem 0.7rem; font-size: var(--fs-base); }
620
692
 
621
693
  /* THE DESTRUCTIVE ROW ACTION — square, red, a bin, and nothing else.
622
694
 
@@ -958,7 +1030,7 @@ textarea {
958
1030
  max-width: 100%;
959
1031
  padding: 0.35rem 0.5rem;
960
1032
  font: inherit;
961
- font-size: var(--fs-sm);
1033
+ font-size: var(--fs-base);
962
1034
  line-height: var(--lh-tight);
963
1035
  color: var(--foreground);
964
1036
  background-color: transparent;
@@ -993,7 +1065,7 @@ select,
993
1065
  together. */
994
1066
  padding: 0.35rem 1.45rem 0.35rem 0.5rem;
995
1067
  font: inherit;
996
- font-size: var(--fs-sm);
1068
+ font-size: var(--fs-base);
997
1069
  line-height: var(--lh-tight);
998
1070
  text-align: left;
999
1071
  color: var(--foreground);
@@ -1086,7 +1158,7 @@ select:disabled,
1086
1158
  overflow-y: auto;
1087
1159
  overscroll-behavior: contain;
1088
1160
  list-style: none;
1089
- font-size: var(--fs-sm);
1161
+ font-size: var(--fs-base);
1090
1162
  line-height: var(--lh-tight);
1091
1163
  color: var(--popover-foreground);
1092
1164
  background: var(--popover);
@@ -1139,7 +1211,7 @@ select:disabled,
1139
1211
  .select-group {
1140
1212
  padding: 0.35rem 0.9rem 0.15rem;
1141
1213
  color: var(--muted-foreground);
1142
- font-size: var(--fs-xs);
1214
+ font-size: var(--fs-base);
1143
1215
  text-transform: uppercase;
1144
1216
  letter-spacing: 0.06em;
1145
1217
  }
@@ -1171,7 +1243,7 @@ select:disabled,
1171
1243
  align-items: center;
1172
1244
  gap: 0.45rem 0.9rem;
1173
1245
  margin-block-start: 0.6rem;
1174
- font-size: var(--fs-sm);
1246
+ font-size: var(--fs-base);
1175
1247
  }
1176
1248
  .table-pager-status {
1177
1249
  margin: 0;
@@ -1200,7 +1272,7 @@ select:disabled,
1200
1272
  border: 1px solid var(--border);
1201
1273
  border-left: 3px solid var(--primary);
1202
1274
  border-radius: var(--radius);
1203
- font-size: 0.92em;
1275
+ font-size: var(--fs-base);
1204
1276
  line-height: 1.6;
1205
1277
  }
1206
1278
  .eli5::before {
@@ -1211,7 +1283,7 @@ select:disabled,
1211
1283
  margin-right: 0.6em;
1212
1284
  vertical-align: 0.08em;
1213
1285
  font-family: var(--font-mono);
1214
- font-size: 0.72em;
1286
+ font-size: 0.72em; /* not-text: the ELI5 marker glyph, sized against its own box */
1215
1287
  font-weight: 700;
1216
1288
  line-height: 1;
1217
1289
  letter-spacing: 0.04em;
@@ -1318,7 +1390,7 @@ html.anim-off .cursor-block {
1318
1390
  }
1319
1391
  .tab {
1320
1392
  background: transparent; border: 0; margin-bottom: -2px;
1321
- font: inherit; font-size: 0.86em; cursor: pointer; padding: 0.5rem 0.95rem;
1393
+ font: inherit; font-size: var(--fs-base); cursor: pointer; padding: 0.5rem 0.95rem;
1322
1394
  color: var(--muted-foreground); transition: background 0.12s ease, color 0.12s ease;
1323
1395
  }
1324
1396
  .tab:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
@@ -1361,7 +1433,7 @@ section.doc.tab-panel { margin-top: 1.35rem; }
1361
1433
  details.fold { border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
1362
1434
  details.fold > summary {
1363
1435
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
1364
- padding: 0.55rem 0; font-size: 0.85rem; color: var(--muted-foreground);
1436
+ padding: 0.55rem 0; font-size: var(--fs-base); color: var(--muted-foreground);
1365
1437
  }
1366
1438
  details.fold > summary::-webkit-details-marker { display: none; }
1367
1439
  details.fold > summary::before { content: "\25B8"; flex: none; opacity: 0.6; }
@@ -1370,7 +1442,7 @@ details.fold > summary:hover { color: var(--primary); }
1370
1442
  details.fold > summary:focus-visible {
1371
1443
  outline: 2px solid color-mix(in srgb, currentColor 45%, transparent); outline-offset: 2px;
1372
1444
  }
1373
- .fold-body { font-size: 0.9rem; padding: 0 0 0.7rem 1.1rem; }
1445
+ .fold-body { font-size: var(--fs-base); padding: 0 0 0.7rem 1.1rem; }
1374
1446
  .fold-body > * + * { margin-top: 0.6rem; }
1375
1447
 
1376
1448
  /* ── legend: one rendering of each state, beside the thing it keys ─────────────────────────────
@@ -1379,7 +1451,7 @@ details.fold > summary:focus-visible {
1379
1451
  separately-wrapped columns. */
1380
1452
  .legend {
1381
1453
  list-style: none; padding: 0; margin: 0.7rem 0 0;
1382
- display: grid; gap: 0.4rem 1.4rem; font-size: 0.86rem;
1454
+ display: grid; gap: 0.4rem 1.4rem; font-size: var(--fs-base);
1383
1455
  }
1384
1456
  @media (min-width: 52rem) { .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
1385
1457
  .legend > li { line-height: 1.6; }
@@ -1395,7 +1467,7 @@ details.fold > summary:focus-visible {
1395
1467
  .dgm-zoomable { position: relative; cursor: zoom-in; }
1396
1468
  .dgm-zoomable::after {
1397
1469
  content: "⤢"; position: absolute; top: 0.4rem; right: 0.5rem;
1398
- font-size: 0.85rem; line-height: 1; opacity: 0.45; pointer-events: none;
1470
+ font-size: 0.85rem; line-height: 1; opacity: 0.45; pointer-events: none; /* not-text: the ⤢ corner hint */
1399
1471
  color: var(--muted-foreground);
1400
1472
  }
1401
1473
  .dgm-zoomable:hover::after, .dgm-zoomable:focus-visible::after { opacity: 1; color: var(--primary); }
@@ -1414,7 +1486,7 @@ html.dgm-locked, html.dgm-locked body { overflow: hidden; }
1414
1486
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--card);
1415
1487
  }
1416
1488
  .dgm-btn {
1417
- font: inherit; font-size: 0.82rem; cursor: pointer; padding: 0.3rem 0.7rem; min-height: 32px;
1489
+ font: inherit; font-size: var(--fs-base); cursor: pointer; padding: 0.3rem 0.7rem; min-height: 32px;
1418
1490
  background: transparent; border: 1px solid var(--border); color: var(--foreground);
1419
1491
  }
1420
1492
  .dgm-btn:hover { border-color: var(--primary); color: var(--primary); }
@@ -1668,7 +1740,7 @@ html.dgm-locked, html.dgm-locked body { overflow: hidden; }
1668
1740
  background: var(--card);
1669
1741
  margin: 1.6rem 0 1.5rem;
1670
1742
  }
1671
- .ticktable { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
1743
+ .ticktable { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
1672
1744
  .ticktable td { padding: 0.5rem 0.75rem; vertical-align: baseline; border: 0; white-space: nowrap; }
1673
1745
  /* Only the last column may grow, so the four fixed columns keep the same width on every row.
1674
1746
 
@@ -1696,7 +1768,7 @@ html.dgm-locked, html.dgm-locked body { overflow: hidden; }
1696
1768
  a printout has no colour at all), the COLOUR, and a left edge-marker that makes a bad row
1697
1769
  findable by shape alone when the strip is scanned rather than read. */
1698
1770
  .tick-dot {
1699
- font-size: 0.7em; width: 1.5rem; padding-right: 0 !important;
1771
+ font-size: 0.7em; width: 1.5rem; padding-right: 0 !important; /* not-text: the row edge-marker */
1700
1772
  border-left: 3px solid transparent; padding-left: 0.6rem !important;
1701
1773
  }
1702
1774
  /* --success is per-theme and AA-measured (0.3.0). `ok` used to borrow --primary — the BRAND
@@ -1746,7 +1818,7 @@ header.bar {
1746
1818
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
1747
1819
  padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--card);
1748
1820
  }
1749
- header.bar .brand { display: inline-flex; align-items: center; font-weight: 700; font-size: 1rem; }
1821
+ header.bar .brand { display: inline-flex; align-items: center; font-weight: 700; font-size: 1rem; } /* not-text: the wordmark */
1750
1822
  header.bar .brand, header.bar .brand a { color: inherit; text-decoration: none; }
1751
1823
  header.bar .dropdown summary { padding: 0.6rem 0.4rem; }
1752
1824
  .bar-right { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
@@ -1756,7 +1828,7 @@ footer.status {
1756
1828
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50; min-height: 2rem;
1757
1829
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
1758
1830
  padding: 0.35rem 1.25rem; border-top: 1px solid var(--border); background: var(--card);
1759
- font-size: 0.7rem;
1831
+ font-size: var(--fs-base);
1760
1832
  }
1761
1833
  footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0.4rem; }
1762
1834
  .status-left { color: var(--muted-foreground); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -1787,7 +1859,7 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
1787
1859
  .ls-group {
1788
1860
  display: block;
1789
1861
  padding: 0.55rem 0 0.15rem;
1790
- font-size: var(--fs-xs);
1862
+ font-size: var(--fs-base);
1791
1863
  letter-spacing: 0.08em;
1792
1864
  color: var(--muted-foreground);
1793
1865
  opacity: 0.75;
@@ -1826,7 +1898,7 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
1826
1898
  element toward `--primary`, and it must keep winning. */
1827
1899
  .ls-perm {
1828
1900
  color: color-mix(in srgb, var(--muted-foreground) 75%, var(--card));
1829
- font-size: 0.72rem; letter-spacing: 0;
1901
+ font-size: var(--fs-base); letter-spacing: 0;
1830
1902
  }
1831
1903
 
1832
1904
  /* DEPTH IS DRAWN, NOT JUST INDENTED. Whitespace alone did not carry it — with the
@@ -1991,7 +2063,7 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
1991
2063
  display: inline-flex; align-items: center; gap: 0.5rem;
1992
2064
  margin-left: 0.75rem;
1993
2065
  }
1994
- .ls-nav-title { font-weight: 700; font-size: 0.9rem; }
2066
+ .ls-nav-title { font-weight: 700; font-size: var(--fs-base); }
1995
2067
 
1996
2068
  /* The list is the only thing that scrolls — the head stays put, so the control
1997
2069
  that hides the rail cannot be scrolled out of reach. */
@@ -2078,7 +2150,7 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
2078
2150
  .site-nav > .ls-nav .ls-row:last-child { border-bottom: 0; }
2079
2151
  .mobile-nav .mobile-item {
2080
2152
  display: flex; align-items: baseline; gap: 0.9rem; padding: 0.65rem 0;
2081
- text-decoration: none; color: var(--foreground); font-size: 0.9rem;
2153
+ text-decoration: none; color: var(--foreground); font-size: var(--fs-base);
2082
2154
  border-bottom: 1px solid var(--border);
2083
2155
  }
2084
2156
  .mobile-nav li:last-child .mobile-item { border-bottom: 0; }
@@ -2098,7 +2170,7 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
2098
2170
  .mobile-footer {
2099
2171
  display: flex; flex-direction: column; gap: 0.55rem;
2100
2172
  margin-top: 0.8rem; border-top: 1px solid var(--border); padding-top: 0.8rem;
2101
- font-size: 0.85rem;
2173
+ font-size: var(--fs-base);
2102
2174
  }
2103
2175
  .mobile-footer .doc-link { padding: 0.2rem 0; }
2104
2176
  .mobile-footer .mobile-theme summary {
@@ -2149,7 +2221,7 @@ button[data-tip]::after {
2149
2221
  content: "\FE0E\24D8"; /* ⓘ, with VS15 so it stays a glyph and never an emoji */
2150
2222
  margin-inline-start: 0.35em;
2151
2223
  color: var(--muted-foreground);
2152
- font-size: 0.9em;
2224
+ font-size: 0.9em; /* not-text: the ⓘ glyph */
2153
2225
  font-weight: 400;
2154
2226
  /* The glyph is decoration: it must not be dragged into a copied selection, and it must not shift
2155
2227
  the baseline of the label it follows. */
@@ -2165,7 +2237,7 @@ button[data-tip]::after {
2165
2237
  position: fixed; z-index: 9999; display: none; max-width: 340px;
2166
2238
  background: var(--background); color: var(--foreground);
2167
2239
  border: 1px solid var(--muted-foreground); border-radius: var(--radius);
2168
- padding: 7px 10px; font-size: 0.72rem; line-height: 1.45; font-weight: 400;
2240
+ padding: 7px 10px; font-size: var(--fs-base); line-height: 1.45; font-weight: 400;
2169
2241
  text-align: left; white-space: normal; pointer-events: none;
2170
2242
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
2171
2243
  }
package/dist/danieldeusing-design.min.css CHANGED
@@ -1,2 +1,2 @@
1
- /*! danieldeusing-design v0.26.0 | MIT | https://github.com/danieldeusing/danieldeusing-design */
2
- *,*::before,*::after{box-sizing: border-box}*{margin: 0}html{-webkit-text-size-adjust: 100%;text-size-adjust: 100%;tab-size: 4}body{min-height: 100vh;min-height: 100dvh;line-height: 1.5}img,picture,video,canvas,svg{display: block;max-width: 100%}input,button,textarea,select{font: inherit;color: inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap: break-word}ul,ol{list-style: none;padding: 0}a{color: inherit;text-decoration: none}table{border-collapse: collapse}:root{--background: #f5efe2;--foreground: #43352a;--card: #efe7d4;--card-foreground: #43352a;--popover: #efe7d4;--popover-foreground: #43352a;--primary: #8a4516;--primary-foreground: #f8f3e8;--secondary: #ece3cf;--secondary-foreground: #43352a;--muted: #ece3cf;--muted-foreground: #71614e;--accent: #8a4516;--accent-foreground: #f8f3e8;--destructive: #a02c2c;--success: #1a6b2e;--warning: #845600;--info: #1c5f9e;--pending: #5f3dc4;--border: #d9cdb6;--input: #d9cdb6;--ring: #8a4516;--glow: rgba(160,82,45,0.1);--glow-soft: rgba(160,82,45,0.05);--scanline-opacity: 0.15;--radius: 0rem;--font-mono: "JetBrains Mono Variable","JetBrains Mono","Menlo",monospace}html[data-theme="green"]{--background: #020604;--foreground: #4fdd7d;--card: #04110a;--card-foreground: #4fdd7d;--popover: #04110a;--popover-foreground: #4fdd7d;--primary: #33ff66;--primary-foreground: #02160a;--secondary: #071509;--secondary-foreground: #4fdd7d;--muted: #071509;--muted-foreground: #3da45e;--accent: #33ff66;--accent-foreground: #02160a;--destructive: #ff5c5c;--success: #4ade80;--warning: #f5b32b;--info: #4dabf7;--pending: #b197fc;--border: #1c4a2c;--input: #1c4a2c;--ring: #33ff66;--glow: rgba(51,255,102,0.35);--glow-soft: rgba(51,255,102,0.12);--scanline-opacity: 0.5}html[data-theme="mono"]{--background: #050505;--foreground: #d4d4d4;--card: #0d0d0d;--card-foreground: #d4d4d4;--popover: #0d0d0d;--popover-foreground: #d4d4d4;--primary: #ffffff;--primary-foreground: #050505;--secondary: #111111;--secondary-foreground: #d4d4d4;--muted: #111111;--muted-foreground: #8a8a8a;--accent: #ffffff;--accent-foreground: #050505;--destructive: #ff5c5c;--success: #4ade80;--warning: #f5b32b;--info: #4dabf7;--pending: #b197fc;--border: #333333;--input: #333333;--ring: #ffffff;--glow: rgba(255,255,255,0.25);--glow-soft: rgba(255,255,255,0.08);--scanline-opacity: 0.45}html[data-theme="paper"]{--background: #fafafa;--foreground: #1f1f1f;--card: #f1f1f1;--card-foreground: #1f1f1f;--popover: #f1f1f1;--popover-foreground: #1f1f1f;--primary: #000000;--primary-foreground: #fafafa;--secondary: #efefef;--secondary-foreground: #1f1f1f;--muted: #efefef;--muted-foreground: #595959;--accent: #000000;--accent-foreground: #fafafa;--destructive: #b3261e;--success: #1a7031;--warning: #8f5d00;--info: #1c5f9e;--pending: #5f3dc4;--border: #d4d4d4;--input: #d4d4d4;--ring: #000000;--glow: rgba(0,0,0,0.06);--glow-soft: rgba(0,0,0,0.04);--scanline-opacity: 0.12}:root{--content-w: 78rem;--content-pad: 1.5rem;--fs-xs: 0.625rem;--fs-sm: 0.6875rem;--fs-base: 0.75rem;--fs-md: 0.8125rem;--fs-lg: 0.9375rem;--fs-xl: 1.125rem;--fs-2xl: 1.5rem;--lh-tight: 1.3;--lh-base: 1.5;--field-label-w: 8.5rem}html{scroll-behavior: smooth}*,*::before,*::after{border-color: var(--border)}:focus-visible{outline: 2px solid var(--ring);outline-offset: 2px}body{background: var(--background);color: var(--foreground);font-family: var(--font-mono);font-size: var(--fs-base);line-height: var(--lh-base);overflow-x: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}table{font-size: var(--fs-md);width: 100%}th,td{padding: 0.45rem 0.85rem;text-align: left;vertical-align: top;border-block-end: 1px solid color-mix(in srgb,var(--border) 55%,transparent)}thead th{border-block-end-color: var(--border);color: var(--muted-foreground);font-weight: 600}tbody tr:last-child>*{border-block-end: 0}tr>*:first-child{padding-inline-start: 0}tr>*:last-child{padding-inline-end: 0}tr[hidden]{display: none !important}button:not(:disabled),summary,[role="button"]{cursor: pointer}body::after{content: "";position: fixed;inset: 0;z-index: 40;pointer-events: none;background: repeating-linear-gradient( 0deg,rgba(0,0,0,0.25) 0px,rgba(0,0,0,0.25) 1px,transparent 1px,transparent 3px );opacity: var(--scanline-opacity)}::selection{background: var(--primary);color: var(--primary-foreground)}.glow{color: var(--primary);text-shadow: 0 0 8px var(--glow)}.glow-lg{color: var(--primary);text-shadow: 0 0 12px var(--glow)}.field-row{display: grid;grid-template-columns: var(--field-label-w) minmax(0,1fr);align-items: center;gap: 0.5rem 0.75rem;margin: 0.35rem 0}.field-row>.lbl{color: var(--muted-foreground);font-size: var(--fs-sm);text-align: left}.field-row>.field-val{display: flex;flex-wrap: wrap;align-items: center;gap: 0.4rem 0.9rem;min-width: 0}@media (max-width: 40rem){.field-row{grid-template-columns: 1fr;gap: 0.2rem}}.prompt{font-size: 0.75rem;font-weight: 700;color: var(--muted-foreground)}.prompt::before{content: "$ ";color: var(--primary)}.comment::before{content: "# ";color: var(--border)}.cursor-block{display: inline-block;width: 0.55em;height: 1em;margin-left: 8px;background: var(--primary);vertical-align: baseline;transform: translateY(0.12em);animation: ddd-blink 1.1s step-end infinite}@keyframes ddd-blink{50%{opacity: 0}}.btn-terminal{display: inline-block;background: var(--primary);color: var(--primary-foreground);font-weight: 700;padding: 12px 24px;box-shadow: 0 0 16px var(--glow);transition: box-shadow 0.15s ease,transform 0.15s ease}.btn-terminal::before{content: "> "}.btn-terminal--ghost{background: transparent;color: var(--primary);border: 1px solid var(--border);box-shadow: none;font-weight: 400}.btn-terminal--ghost::before{content: ""}.btn-terminal--ghost:hover{border-color: var(--primary);background: color-mix(in srgb,var(--primary) 10%,transparent);box-shadow: none}.btn-terminal:hover{box-shadow: 0 0 28px var(--glow);transform: translateY(-2px)}.btn-terminal:disabled{opacity: 0.45;cursor: default;box-shadow: none;transform: none}.btn-terminal--compact{padding: 0.28rem 0.7rem;font-size: var(--fs-sm)}.btn-terminal--destructive{display: inline-flex;align-items: center;justify-content: center;padding: 0.3rem;color: var(--destructive);border-color: color-mix(in srgb,var(--destructive) 45%,var(--border))}.btn-terminal--destructive::before{content: ""}.btn-terminal--destructive::after{content: "";display: block;width: 0.875rem;height: 0.875rem;background: currentColor;-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v3H9zM4 6h16v2H4zM6 9h12l-1 12H7z'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v3H9zM4 6h16v2H4zM6 9h12l-1 12H7z'/%3E%3C/svg%3E") center / contain no-repeat}.btn-terminal--destructive:hover{border-color: var(--destructive);background: color-mix(in srgb,var(--destructive) 12%,transparent);box-shadow: none}@media (pointer: coarse){.btn-terminal--destructive{min-width: 44px;min-height: 44px}}.btn-terminal--edit{display: inline-flex;align-items: center;justify-content: center;padding: 0.3rem}.btn-terminal--edit::before{content: ""}.btn-terminal--edit::after{content: "";display: block;width: 0.875rem;height: 0.875rem;background: currentColor;-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04l-3.75-3.75-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04l-3.75-3.75-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center / contain no-repeat}@media (pointer: coarse){.btn-terminal--edit{min-width: 44px;min-height: 44px}}.link-quiet{color: var(--muted-foreground);text-decoration: underline;text-underline-offset: 4px;transition: color 0.15s ease}.link-quiet:hover{color: var(--primary)}.anim-toggle{display: inline-flex;align-items: center;gap: 6px;font: inherit;color: var(--muted-foreground);background: none;border: 0;cursor: pointer;transition: color 0.15s ease}.anim-toggle:hover{color: var(--primary)}.anim-toggle[aria-pressed="true"] [data-anim-box]{color: var(--primary)}.dd-dot{display: inline-block;width: 11px;height: 11px;flex: none;border-radius: 50%;background: currentColor}.dd-flag{display: inline-block;width: 15px;height: 10px;flex: none;border: 1px solid var(--border);background-size: cover;background-repeat: no-repeat}.dd-flag-de{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='4' fill='%23262626'/><rect y='4' width='18' height='4' fill='%23c83232'/><rect y='8' width='18' height='4' fill='%23e8be32'/></svg>")}.dd-flag-en{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='12' fill='%23b22234'/><rect y='4' width='18' height='4' fill='%23ececec'/><rect width='8' height='6' fill='%233c3b6e'/></svg>")}.dd-flag-pt{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='12' fill='%231c9148'/><polygon points='9,1.5 15.5,6 9,10.5 2.5,6' fill='%23e8c832'/><rect x='8' y='5' width='2' height='2' fill='%232c3f87'/></svg>")}.dd-flag-es{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='6' height='12' fill='%2315734c'/><rect x='6' width='6' height='12' fill='%23ececec'/><rect x='12' width='6' height='12' fill='%23bf2233'/><rect x='8' y='5' width='2' height='2' fill='%237a5c3a'/></svg>")}.ascii-rule{margin: 1rem 0;border: 0;color: var(--border);line-height: 1;white-space: nowrap;overflow: hidden;user-select: none}.ascii-rule::before{content: "────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"}.card-terminal{background: var(--card);border: 1px solid var(--border);transition: border-color 0.15s ease,box-shadow 0.15s ease}.card-terminal:hover{border-color: var(--primary);box-shadow: 0 0 20px var(--glow-soft)}.dropdown{position: relative}.dropdown>summary{display: inline-flex;align-items: center;gap: 6px;cursor: pointer;user-select: none;list-style: none;color: var(--muted-foreground);transition: color 0.15s ease}.dropdown>summary::-webkit-details-marker{display: none}.dropdown>summary:hover,.dropdown[open]>summary{color: var(--primary)}.dropdown-panel{position: absolute;right: 0;bottom: calc(100% + 12px);z-index: 50;min-width: 128px;margin: 0;padding: 4px 0;list-style: none;background: var(--card);border: 1px solid var(--border);border-radius: var(--radius);box-shadow: 0 0 20px var(--glow-soft)}.dropdown-panel--down{top: calc(100% + 8px);bottom: auto;left: 0;right: auto}.dropdown-item{display: flex;align-items: center;gap: 8px;width: 100%;padding: 5px 14px;text-align: left;font: inherit;line-height: 1.5;background: none;border: 0;color: var(--muted-foreground);cursor: pointer;white-space: nowrap;transition: color 0.15s ease}.dropdown-item:hover{color: var(--primary);background: var(--muted)}.dropdown-item[aria-current="true"],html:not([data-theme]) .dropdown-item[data-theme-value="warm"],html[data-theme="green"] .dropdown-item[data-theme-value="green"],html[data-theme="mono"] .dropdown-item[data-theme-value="mono"],html[data-theme="paper"] .dropdown-item[data-theme-value="paper"],html[data-theme="warm"] .dropdown-item[data-theme-value="warm"]{color: var(--primary);text-shadow: 0 0 8px var(--glow)}input[type="text"],input[type="search"],input[type="url"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],input[type="date"],input:not([type]),textarea{max-width: 100%;padding: 0.35rem 0.5rem;font: inherit;font-size: var(--fs-sm);line-height: var(--lh-tight);color: var(--foreground);background-color: transparent;border: 1px solid color-mix(in srgb,var(--foreground) 60%,transparent);transition: border-color 0.15s ease}textarea{line-height: var(--lh-base)}input[type="text"]:hover,input[type="search"]:hover,input[type="url"]:hover,input[type="email"]:hover,input[type="password"]:hover,input[type="number"]:hover,input[type="tel"]:hover,input[type="date"]:hover,input:not([type]):hover,textarea:hover{border-color: var(--primary)}input:disabled,textarea:disabled{opacity: 0.55;cursor: not-allowed}select,.select-trigger{appearance: none;-webkit-appearance: none;max-width: 100%;padding: 0.35rem 1.45rem 0.35rem 0.5rem;font: inherit;font-size: var(--fs-sm);line-height: var(--lh-tight);text-align: left;color: var(--foreground);background-color: transparent;background-image: linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position: right 0.78rem center,right 0.5rem center;background-size: 0.28rem 0.28rem;background-repeat: no-repeat;border: 1px solid color-mix(in srgb,var(--foreground) 60%,transparent);cursor: pointer;transition: border-color 0.15s ease}select:hover,.select-trigger:hover,.select-trigger[aria-expanded="true"]{border-color: var(--primary)}select:disabled,.select-trigger:disabled{opacity: 0.45;cursor: default}.select-trigger[aria-expanded="true"]{background-image: linear-gradient(135deg,transparent 50%,currentColor 50%),linear-gradient(45deg,currentColor 50%,transparent 50%)}.select-field{position: relative;display: inline-flex;max-width: 100%;vertical-align: middle}.select-field>select{position: absolute;inset: 0;width: 100%;height: 100%;opacity: 0;pointer-events: none}.select-trigger{display: inline-flex;align-items: center;width: 100%}.select-value{min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.select-value::after{content: "\200b"}.select-panel{position: fixed;z-index: 60;margin: 0;padding: 0.15rem 0;overflow-y: auto;overscroll-behavior: contain;list-style: none;font-size: var(--fs-sm);line-height: var(--lh-tight);color: var(--popover-foreground);background: var(--popover);border: 1px solid color-mix(in srgb,var(--foreground) 60%,transparent);box-shadow: 0 0 20px var(--glow-soft)}.select-option{display: flex;align-items: center;gap: 0.4rem;padding: 0.28rem 0.9rem 0.28rem 0.55rem;border-inline-start: 2px solid transparent;white-space: nowrap;cursor: pointer}.select-option:hover,.select-option[data-active="true"]{background: var(--muted)}.select-option[aria-selected="true"]{color: var(--primary);font-weight: 700;border-inline-start-color: var(--primary)}.select-option[aria-disabled="true"]{color: color-mix(in srgb,var(--popover-foreground) 65%,var(--popover));cursor: default}.select-option[aria-disabled="true"]:hover{background: none}.select-group{padding: 0.35rem 0.9rem 0.15rem;color: var(--muted-foreground);font-size: var(--fs-xs);text-transform: uppercase;letter-spacing: 0.06em}.table-pager{display: flex;flex-wrap: wrap;align-items: center;gap: 0.45rem 0.9rem;margin-block-start: 0.6rem;font-size: var(--fs-sm)}.table-pager-status{margin: 0;color: var(--muted-foreground)}.table-pager-size{display: inline-flex;align-items: center;gap: 0.4rem;margin-inline-start: auto;color: var(--muted-foreground)}.table-pager-nav{display: inline-flex;gap: 0.4rem}.eli5{margin: 1.25em 0;padding: 0.7em 1em;color: var(--foreground);background: color-mix(in srgb,var(--primary) 7%,var(--card));border: 1px solid var(--border);border-left: 3px solid var(--primary);border-radius: var(--radius);font-size: 0.92em;line-height: 1.6}.eli5::before{content: "ELI5";display: inline-flex;align-items: center;justify-content: center;margin-right: 0.6em;vertical-align: 0.08em;font-family: var(--font-mono);font-size: 0.72em;font-weight: 700;line-height: 1;letter-spacing: 0.04em;padding: 0.34em 0.6em;border-radius: var(--radius);background: var(--destructive);color: var(--primary-foreground)}.eli5-term{font-weight: 700;color: var(--primary)}html.anim-off *,html.anim-off *::before,html.anim-off *::after{animation: none !important}html.anim-off .cursor-block{display: none}@media (prefers-reduced-motion: no-preference){html.term-anim [data-term] .prompt:not(.term-live),html.term-anim [data-term] .prompt:not(.term-live)::before{color: transparent}html.term-anim [data-term] [data-term-out]:not(.term-show){visibility: hidden}html.term-anim [data-term] [data-term-out].term-show{animation: ddd-term-output 0.2s steps(3,end) both}@keyframes ddd-term-output{from{opacity: 0}}html.term-anim [data-term] [data-term-out].term-show>*{animation: ddd-term-output 0.25s steps(3,end) both}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(2){animation-delay: 0.09s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(3){animation-delay: 0.18s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(4){animation-delay: 0.27s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(5){animation-delay: 0.36s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(6){animation-delay: 0.45s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(7){animation-delay: 0.54s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(8){animation-delay: 0.63s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(9){animation-delay: 0.72s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(10){animation-delay: 0.81s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(n + 11){animation-delay: 0.9s}.term-caret{display: inline-block;width: 0.55em;height: 1em;margin-left: 2px;background: var(--primary);vertical-align: baseline;transform: translateY(0.12em)}}.tabs{display: flex;flex-wrap: wrap;gap: 0.15rem;margin: 1.35rem 0 0;border-bottom: 2px solid color-mix(in srgb,var(--border) 80%,transparent)}.tab{background: transparent;border: 0;margin-bottom: -2px;font: inherit;font-size: 0.86em;cursor: pointer;padding: 0.5rem 0.95rem;color: var(--muted-foreground);transition: background 0.12s ease,color 0.12s ease}.tab:hover{color: var(--primary);background: color-mix(in srgb,var(--primary) 10%,transparent)}.tab[aria-selected="true"]{background: var(--primary);color: var(--background);font-weight: 700}.tab:focus-visible{outline: 2px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset: -2px}.tab--info{margin-inline-start: auto}@media (max-width: 40rem){.tab--info{margin-inline-start: 0}}@media (pointer: coarse),(max-width: 40rem){.tab{padding: 0.7rem 0.8rem;min-height: 44px}}section.doc.tab-panel{margin-top: 1.35rem}details.fold{border-top: 1px solid color-mix(in srgb,currentColor 15%,transparent)}details.fold>summary{display: flex;align-items: center;gap: 0.5rem;cursor: pointer;list-style: none;padding: 0.55rem 0;font-size: 0.85rem;color: var(--muted-foreground)}details.fold>summary::-webkit-details-marker{display: none}details.fold>summary::before{content: "\25B8";flex: none;opacity: 0.6}details.fold[open]>summary::before{content: "\25BE"}details.fold>summary:hover{color: var(--primary)}details.fold>summary:focus-visible{outline: 2px solid color-mix(in srgb,currentColor 45%,transparent);outline-offset: 2px}.fold-body{font-size: 0.9rem;padding: 0 0 0.7rem 1.1rem}.fold-body>* + *{margin-top: 0.6rem}.legend{list-style: none;padding: 0;margin: 0.7rem 0 0;display: grid;gap: 0.4rem 1.4rem;font-size: 0.86rem}@media (min-width: 52rem){.legend{grid-template-columns: repeat(2,minmax(0,1fr))}}.legend>li{line-height: 1.6}.legend>li>:first-child{margin-right: 0.45rem}.dgm-zoomable{position: relative;cursor: zoom-in}.dgm-zoomable::after{content: "⤢";position: absolute;top: 0.4rem;right: 0.5rem;font-size: 0.85rem;line-height: 1;opacity: 0.45;pointer-events: none;color: var(--muted-foreground)}.dgm-zoomable:hover::after,.dgm-zoomable:focus-visible::after{opacity: 1;color: var(--primary)}.dgm-zoomable:focus-visible{outline: 2px solid var(--primary);outline-offset: 3px}html.dgm-locked,html.dgm-locked body{overflow: hidden}.dgm-overlay{display: none;position: fixed;inset: 0;z-index: 90;background: color-mix(in srgb,var(--background) 96%,transparent);flex-direction: column}.dgm-overlay.open{display: flex}.dgm-bar{flex: none;display: flex;align-items: center;justify-content: flex-end;gap: 0.4rem;padding: 0.5rem 0.75rem;border-bottom: 1px solid var(--border);background: var(--card)}.dgm-btn{font: inherit;font-size: 0.82rem;cursor: pointer;padding: 0.3rem 0.7rem;min-height: 32px;background: transparent;border: 1px solid var(--border);color: var(--foreground)}.dgm-btn:hover{border-color: var(--primary);color: var(--primary)}.dgm-btn:focus-visible{outline: 2px solid var(--primary);outline-offset: 1px}.dgm-close{border-color: color-mix(in srgb,var(--destructive) 55%,transparent);color: var(--destructive)}.dgm-close:hover{border-color: var(--destructive);color: var(--destructive)}.dgm-stage{flex: 1;overflow: hidden;display: grid;place-items: center;cursor: grab;touch-action: none}.dgm-stage.is-grabbing{cursor: grabbing}.dgm-art{transform-origin: center center;will-change: transform}.dgm-art>svg,.dgm-art>img{display: block;max-width: none;max-height: none}@media print{.dgm-overlay,.dgm-zoomable::after{display: none !important}}.minimap{position: fixed;left: 0;top: var(--ls-nav-top,3rem);bottom: var(--ls-nav-bottom,2.2rem);z-index: 20;display: none;flex-direction: column;justify-content: center;gap: 0.5rem;width: 2rem;padding: 0.75rem 0 0.75rem 0.75rem;overflow-y: auto;overscroll-behavior: contain;scrollbar-width: none}.minimap::-webkit-scrollbar{display: none}@media (min-width: 64rem){.minimap{display: flex}}.minimap-bar{flex: 0 0 auto;width: var(--minimap-bar-w,100%);height: 2px;padding: 0;border: 0;border-radius: 1px;background: var(--border);cursor: pointer;transition: background 0.15s ease,transform 0.15s ease;transform-origin: left center}.minimap-bar:hover{background: var(--muted-foreground);transform: scaleY(2)}.minimap-bar[data-tip]{cursor: pointer}.minimap-bar:focus-visible{outline: 2px solid var(--ring);outline-offset: 3px}.minimap-bar.active{background: var(--primary);transform: scaleY(2)}@media print{.minimap{display: none !important}}.wrap{max-width: var(--content-w);margin-inline: auto;padding-inline: var(--content-pad)}.tablewrap{position: relative;overflow-x: auto;overflow-y: auto;max-block-size: var(--tablewrap-max-h,none)}.tablewrap::after{content: "";position: absolute;inset-block: 0;right: 0;width: 1.5rem;pointer-events: none;opacity: 0.9;background: linear-gradient(to right,transparent,var(--tablewrap-fade,var(--background,transparent)))}.tablewrap thead th{position: sticky;inset-block-start: 0;z-index: 1;background: var(--background,#f5efe2)}.tickstrip:not(:empty){--tablewrap-fade: var(--card);border: 1px solid var(--border);background: var(--card);margin: 1.6rem 0 1.5rem}.ticktable{width: 100%;border-collapse: collapse;font-size: 0.82rem}.ticktable td{padding: 0.5rem 0.75rem;vertical-align: baseline;border: 0;white-space: nowrap}.ticktable td.tick-stats{width: 100%;white-space: normal;text-align: right}.tick{border-bottom: 1px solid color-mix(in srgb,var(--border) 55%,transparent)}.tick:last-child{border-bottom: 0}.tick-dot{font-size: 0.7em;width: 1.5rem;padding-right: 0 !important;border-left: 3px solid transparent;padding-left: 0.6rem !important}.tick--ok .tick-dot{color: var(--success);border-left-color: color-mix(in srgb,var(--success) 45%,transparent)}.tick--stale .tick-dot{color: var(--destructive);border-left-color: var(--destructive)}.tick--never .tick-dot{color: var(--muted-foreground);border-left-color: color-mix(in srgb,var(--muted-foreground) 35%,transparent)}.tick-name{font-weight: 700;color: var(--foreground);letter-spacing: 0.01em}.tick-last,.tick-next{font-variant-numeric: tabular-nums;color: var(--muted-foreground)}.tick-next{opacity: 0.72}.tick--stale .tick-last{color: var(--destructive);font-weight: 700}.tick--never .tick-last{font-style: italic}.tick-stats{color: var(--muted-foreground)}.tick-stats b{font-weight: 700;color: var(--primary);font-variant-numeric: tabular-nums}.tick-sep{font-style: normal;opacity: 0.35;margin: 0 0.5rem}.tick--stale{background: color-mix(in srgb,var(--destructive) 8%,transparent)}@media (max-width: 40rem){.ticktable,.ticktable tbody,.tick,.ticktable td{display: block}.tick{padding: 0.4rem 0.5rem}.ticktable td{display: inline-block;padding: 0.1rem 0.5rem 0.1rem 0}.ticktable td.tick-stats{display: block;width: auto;text-align: left}}.skip-link{position: absolute;left: -999px;top: 0;z-index: 100;background: var(--card);border: 1px solid var(--primary);padding: 0.5rem 1rem;color: var(--primary)}.skip-link:focus{left: 0.5rem;top: 0.5rem}.visually-hidden{position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap}header.bar{position: sticky;top: 0;z-index: 30;display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 0.6rem 1.25rem;border-bottom: 1px solid var(--border);background: var(--card)}header.bar .brand{display: inline-flex;align-items: center;font-weight: 700;font-size: 1rem}header.bar .brand,header.bar .brand a{color: inherit;text-decoration: none}header.bar .dropdown summary{padding: 0.6rem 0.4rem}.bar-right{display: flex;align-items: center;gap: 1rem;flex-shrink: 0}footer.status{position: fixed;inset-inline: 0;bottom: 0;z-index: 50;min-height: 2rem;display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 0.35rem 1.25rem;border-top: 1px solid var(--border);background: var(--card);font-size: 0.7rem}footer.status .dropdown summary,footer.status .anim-toggle{padding: 0.55rem 0.4rem}.status-left{color: var(--muted-foreground);min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.status-right{display: flex;align-items: center;gap: 1rem;flex-shrink: 0}.sep{width: 1px;height: 0.9rem;background: var(--border)}.doc-link{color: var(--muted-foreground);text-decoration: none;transition: color 0.15s ease}.doc-link:hover{color: var(--primary)}.doc-link--forward{color: var(--primary);white-space: nowrap}.doc-link--forward:hover{color: var(--primary);text-decoration: underline}.ls-group{display: block;padding: 0.55rem 0 0.15rem;font-size: var(--fs-xs);letter-spacing: 0.08em;color: var(--muted-foreground);opacity: 0.75}.ls-panel>li:first-child .ls-group{padding-top: 0}.ls-row{display: flex;align-items: baseline;gap: 0.9rem}.ls-perm{color: color-mix(in srgb,var(--muted-foreground) 75%,var(--card));font-size: 0.72rem;letter-spacing: 0}.ls-row--sub .ls-name{margin-left: 0.55rem;padding-left: 0.75rem;border-left: 1px solid color-mix(in srgb,var(--muted-foreground) 40%,transparent)}.ls-row--sub2 .ls-name{margin-left: 1.7rem}.ls-panel .ls-name{color: var(--muted-foreground)}.ls-panel .ls-row--dir .ls-name{color: var(--primary);font-weight: 700}.ls-row[aria-current="page"]{background: color-mix(in srgb,var(--primary) 12%,transparent);box-shadow: inset 3px 0 0 0 var(--primary)}.ls-row[aria-current="page"] .ls-name{color: var(--primary);font-weight: 700;text-shadow: 0 0 8px var(--glow)}.ls-row[aria-current="page"] .ls-perm{color: color-mix(in srgb,var(--primary) 65%,transparent)}.ls-row[aria-current="page"]::after{content: "←";margin-left: auto;color: var(--primary)}.dropdown-panel.ls-panel{min-width: 17rem;left: auto !important;right: 0}:root{--ls-nav-w: 17rem;--ls-nav-top: 3rem;--ls-nav-bottom: 2.2rem}@media (min-width: 48.0625rem){html{--ls-nav-inset: 0rem}html:has(.ls-nav):not([data-ls-nav="off"]){--ls-nav-inset: var(--ls-nav-w)}body{padding-right: var(--ls-nav-inset)}header.bar,.bleed-rail{margin-right: calc(-1 * var(--ls-nav-inset))}.ls-nav{position: fixed;top: var(--ls-nav-top);right: 0;bottom: var(--ls-nav-bottom);width: var(--ls-nav-w);z-index: 25;display: flex;flex-direction: column;overflow: hidden;background: var(--card);border-left: 1px solid var(--border)}html:not(.anim-off) .ls-nav{transition: transform 0.18s ease}html[data-ls-nav="off"] .ls-nav{transform: translateX(100%)}.ls-nav-head{display: inline-flex;align-items: center;gap: 0.5rem;margin-left: 0.75rem}.ls-nav-title{font-weight: 700;font-size: 0.9rem}.ls-nav .ls-panel{flex: 1;min-height: 0;overflow-y: auto;list-style: none;margin: 0;padding: 0.5rem 0 1rem}.ls-nav-toggle{background: none;border: 0;font: inherit;cursor: pointer;line-height: 1;color: var(--muted-foreground);padding: 0.4rem 0.55rem}.ls-nav-toggle::after{content: "\00BB"}html[data-ls-nav="off"] .ls-nav-toggle::after{content: "\00AB"}.ls-nav-toggle:hover{color: var(--primary)}.ls-nav-toggle:focus-visible{outline: 2px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset: -2px}}.nav-burger{display: none;background: none;border: 0;color: var(--muted-foreground);cursor: pointer;padding: 0.55rem;margin: -0.3rem -0.3rem -0.3rem 0}.nav-burger:hover{color: var(--primary)}.mobile-nav{display: none;list-style: none;margin: 0;padding: 0}.mobile-footer{display: none}@media (max-width: 48rem){.nav-burger{display: inline-flex;align-items: center}.site-nav{display: none;position: absolute;top: 100%;left: 0;right: 0;z-index: 40;background: var(--card);border-bottom: 1px solid var(--border);padding: 0.4rem 1.25rem 0.9rem;max-height: calc(100vh - 6rem);overflow-y: auto}.site-nav.open{display: block}.site-nav>.ls-nav,.mobile-nav{display: flex;flex-direction: column}.site-nav:has(>.ls-nav) .mobile-nav{display: none}.site-nav>.ls-nav .ls-row{align-items: center;min-height: 44px;border-bottom: 1px solid var(--border)}.site-nav>.ls-nav .ls-row .ls-name{display: flex;align-items: center;flex: 1;min-height: 44px}.site-nav>.ls-nav .ls-row:last-child{border-bottom: 0}.mobile-nav .mobile-item{display: flex;align-items: baseline;gap: 0.9rem;padding: 0.65rem 0;text-decoration: none;color: var(--foreground);font-size: 0.9rem;border-bottom: 1px solid var(--border)}.mobile-nav li:last-child .mobile-item{border-bottom: 0}.mobile-nav .mobile-item:active .ls-name,.mobile-nav .mobile-item:hover .ls-name{color: var(--primary)}.ls-nav-toggle{display: none}footer.status{display: none}.mobile-footer{display: flex;flex-direction: column;gap: 0.55rem;margin-top: 0.8rem;border-top: 1px solid var(--border);padding-top: 0.8rem;font-size: 0.85rem}.mobile-footer .doc-link{padding: 0.2rem 0}.mobile-footer .mobile-theme summary{list-style: none;display: flex;align-items: center;gap: 0.5rem;color: var(--muted-foreground);cursor: pointer;padding: 0.2rem 0}.mobile-footer .mobile-theme summary::-webkit-details-marker{display: none}.mobile-footer .mf-chev{margin-left: auto;opacity: 0.7}.mobile-footer .mf-panel{display: flex;flex-direction: column;margin-top: 0.3rem}.mobile-footer .mf-panel .dropdown-item{text-align: left;padding: 0.4rem 0.6rem}.mobile-footer .anim-toggle{display: inline-flex;gap: 0.5rem;align-items: center;background: none;border: 0;padding: 0.2rem 0;color: var(--muted-foreground);font: inherit;cursor: pointer}}[data-tip]{cursor: help}span[data-tip]::after,th[data-tip]::after,button[data-tip]::after{content: "\FE0E\24D8";margin-inline-start: 0.35em;color: var(--muted-foreground);font-size: 0.9em;font-weight: 400;user-select: none;vertical-align: baseline}.minimap-bar[data-tip]::after,[data-tip][data-tip-bare]::after{content: none}#ddtip{position: fixed;z-index: 9999;display: none;max-width: 340px;background: var(--background);color: var(--foreground);border: 1px solid var(--muted-foreground);border-radius: var(--radius);padding: 7px 10px;font-size: 0.72rem;line-height: 1.45;font-weight: 400;text-align: left;white-space: normal;pointer-events: none;box-shadow: 0 4px 14px rgba(0,0,0,0.25)}@media print{@page{margin: 14mm 12mm}:root,html,html[data-theme]{--background: #ffffff;--foreground: #111111;--card: #ffffff;--card-foreground: #111111;--popover: #ffffff;--popover-foreground: #111111;--primary: #000000;--primary-foreground: #ffffff;--secondary: #ffffff;--secondary-foreground: #111111;--muted: #ffffff;--muted-foreground: #444444;--accent: #000000;--accent-foreground: #ffffff;--destructive: #7a1c1c;--border: #9a9a9a;--input: #9a9a9a;--ring: #000000;--glow: transparent;--glow-soft: transparent;--scanline-opacity: 0}html{zoom: 1 !important;font-size: 16px;scroll-behavior: auto}body{background: #ffffff;color: var(--foreground);font-size: 12px;line-height: 1.45;overflow: visible}body::after{display: none !important}*,*::before,*::after{animation: none !important;transition: none !important;text-shadow: none !important;box-shadow: none !important}html.term-anim [data-term] [data-term-out],html.term-anim [data-term] [data-term-out]:not(.term-show),html.term-anim [data-term] [data-term-out]>*{visibility: visible !important;opacity: 1 !important}html.term-anim [data-term] .prompt:not(.term-live){color: var(--muted-foreground) !important}html.term-anim [data-term] .prompt:not(.term-live)::before{color: var(--primary) !important}header.bar,footer.status,.site-nav,.nav-burger,.mobile-nav,.mobile-footer,.skip-link,.dropdown,.dropdown-panel,.select-panel,.anim-toggle,.cursor-block,.term-caret,.ascii-rule,.toc,#ddtip{display: none !important}body{padding-right: 0 !important}[data-tip]{cursor: auto}span[data-tip]::after,th[data-tip]::after,button[data-tip]::after{content: none}.wrap{max-width: none !important;margin: 0 !important;padding: 0 !important}.layout{display: block !important}.content{min-width: 0}h1,.title{font-size: 1.5rem !important}h2{font-size: 1.15rem !important}h3,.sub{font-size: 1rem !important}h4{font-size: 0.9rem !important}.prompt{font-size: 0.7rem}h1,h2,h3,h4,.prompt,.toc-label{break-after: avoid-page;break-inside: avoid}p,li,blockquote{orphans: 3;widows: 3}pre,figure,blockquote,tr,img,.eli5,.card-terminal{break-inside: avoid}svg{break-inside: auto}thead{display: table-header-group}.tablewrap,.table-scroll,pre,.diagram{overflow: visible !important;max-width: 100% !important}pre{white-space: pre-wrap !important;overflow-wrap: anywhere;font-size: 0.75rem !important;background: transparent !important}pre.mermaid[data-processed]{white-space: normal !important}code{background: transparent !important;overflow-wrap: anywhere}table{width: 100% !important;table-layout: auto;border-collapse: collapse;font-size: 0.75rem !important}th,td{overflow-wrap: break-word;white-space: normal !important}td code,th code,td a,th a{overflow-wrap: anywhere}a{color: inherit;text-decoration: underline;text-underline-offset: 2px}a.card-terminal,a[class*="card"]{text-decoration: none}.glow,.glow-lg{color: inherit}.btn-terminal{border: 1px solid var(--border);background: transparent;color: var(--foreground)}.mermaid svg{display: block;margin-inline: auto;width: auto !important;height: auto !important;max-width: 100% !important;max-height: 235mm !important}.mermaid svg .node rect,.mermaid svg .node polygon,.mermaid svg .node circle,.mermaid svg .node path,.mermaid svg .label-container,.mermaid svg .cluster rect,.mermaid svg .actor,.mermaid svg .note{fill: #ffffff !important;stroke: #333333 !important}.mermaid svg .edgePath path,.mermaid svg .flowchart-link,.mermaid svg line,.mermaid svg .messageLine0,.mermaid svg .messageLine1{stroke: #333333 !important}.mermaid svg .arrowheadPath,.mermaid svg marker path,.mermaid svg marker polygon{fill: #333333 !important;stroke: #333333 !important}.mermaid svg text,.mermaid svg .nodeLabel,.mermaid svg .edgeLabel,.mermaid svg .cluster-label,.mermaid svg .messageText,.mermaid svg foreignObject div,.mermaid svg foreignObject span,.mermaid svg p{fill: #111111 !important;color: #111111 !important;background: transparent !important}.mermaid svg .edgeLabel rect,.mermaid svg .edgeLabel foreignObject>div{fill: #ffffff !important;background: #ffffff !important}}
1
+ /*! danieldeusing-design v0.28.0 | MIT | https://github.com/danieldeusing/danieldeusing-design */
2
+ *,*::before,*::after{box-sizing: border-box}*{margin: 0}html{-webkit-text-size-adjust: 100%;text-size-adjust: 100%;tab-size: 4}body{min-height: 100vh;min-height: 100dvh;line-height: 1.5}img,picture,video,canvas,svg{display: block;max-width: 100%}input,button,textarea,select{font: inherit;color: inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap: break-word}ul,ol{list-style: none;padding: 0}a{color: inherit;text-decoration: none}table{border-collapse: collapse}:root{--background: #f5efe2;--foreground: #43352a;--card: #efe7d4;--card-foreground: #43352a;--popover: #efe7d4;--popover-foreground: #43352a;--primary: #8a4516;--primary-foreground: #f8f3e8;--secondary: #ece3cf;--secondary-foreground: #43352a;--muted: #ece3cf;--muted-foreground: #71614e;--accent: #8a4516;--accent-foreground: #f8f3e8;--destructive: #a02c2c;--success: #1a6b2e;--warning: #845600;--info: #1c5f9e;--pending: #5f3dc4;--border: #d9cdb6;--input: #d9cdb6;--ring: #8a4516;--glow: rgba(160,82,45,0.1);--glow-soft: rgba(160,82,45,0.05);--scanline-opacity: 0.15;--radius: 0rem;--font-mono: "JetBrains Mono Variable","JetBrains Mono","Menlo",monospace}html[data-theme="green"]{--background: #020604;--foreground: #4fdd7d;--card: #04110a;--card-foreground: #4fdd7d;--popover: #04110a;--popover-foreground: #4fdd7d;--primary: #33ff66;--primary-foreground: #02160a;--secondary: #071509;--secondary-foreground: #4fdd7d;--muted: #071509;--muted-foreground: #3da45e;--accent: #33ff66;--accent-foreground: #02160a;--destructive: #ff5c5c;--success: #4ade80;--warning: #f5b32b;--info: #4dabf7;--pending: #b197fc;--border: #1c4a2c;--input: #1c4a2c;--ring: #33ff66;--glow: rgba(51,255,102,0.35);--glow-soft: rgba(51,255,102,0.12);--scanline-opacity: 0.5}html[data-theme="mono"]{--background: #050505;--foreground: #d4d4d4;--card: #0d0d0d;--card-foreground: #d4d4d4;--popover: #0d0d0d;--popover-foreground: #d4d4d4;--primary: #ffffff;--primary-foreground: #050505;--secondary: #111111;--secondary-foreground: #d4d4d4;--muted: #111111;--muted-foreground: #8a8a8a;--accent: #ffffff;--accent-foreground: #050505;--destructive: #ff5c5c;--success: #4ade80;--warning: #f5b32b;--info: #4dabf7;--pending: #b197fc;--border: #333333;--input: #333333;--ring: #ffffff;--glow: rgba(255,255,255,0.25);--glow-soft: rgba(255,255,255,0.08);--scanline-opacity: 0.45}html[data-theme="paper"]{--background: #fafafa;--foreground: #1f1f1f;--card: #f1f1f1;--card-foreground: #1f1f1f;--popover: #f1f1f1;--popover-foreground: #1f1f1f;--primary: #000000;--primary-foreground: #fafafa;--secondary: #efefef;--secondary-foreground: #1f1f1f;--muted: #efefef;--muted-foreground: #595959;--accent: #000000;--accent-foreground: #fafafa;--destructive: #b3261e;--success: #1a7031;--warning: #8f5d00;--info: #1c5f9e;--pending: #5f3dc4;--border: #d4d4d4;--input: #d4d4d4;--ring: #000000;--glow: rgba(0,0,0,0.06);--glow-soft: rgba(0,0,0,0.04);--scanline-opacity: 0.12}:root{--content-w: 78rem;--content-pad: 1.5rem;--fs-base: 0.75rem;--fs-lg: 0.9375rem;--fs-xl: 1.125rem;--space-section: 2.5rem;--fs-2xl: 1.5rem;--lh-tight: 1.3;--lh-base: 1.5;--field-label-w: 8.5rem}html{scroll-behavior: smooth}*,*::before,*::after{border-color: var(--border)}:focus-visible{outline: 2px solid var(--ring);outline-offset: 2px}body{background: var(--background);color: var(--foreground);font-family: var(--font-mono);font-size: var(--fs-base);line-height: var(--lh-base);overflow-x: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}table{font-size: var(--fs-base);width: 100%}th,td{padding: 0.45rem 0.85rem;text-align: left;vertical-align: top;border-block-end: 1px solid color-mix(in srgb,var(--border) 55%,transparent)}thead th{border-block-end-color: var(--border);color: var(--muted-foreground);font-weight: 600}tbody tr:last-child>*{border-block-end: 0}tr>*:first-child{padding-inline-start: 0}tr>*:last-child{padding-inline-end: 0}tr[hidden]{display: none !important}button:not(:disabled),summary,[role="button"]{cursor: pointer}body::after{content: "";position: fixed;inset: 0;z-index: 40;pointer-events: none;background: repeating-linear-gradient( 0deg,rgba(0,0,0,0.25) 0px,rgba(0,0,0,0.25) 1px,transparent 1px,transparent 3px );opacity: var(--scanline-opacity)}::selection{background: var(--primary);color: var(--primary-foreground)}:where(section) + :where(section),:where(section.doc){margin-block-start: var(--space-section)}:where(section,.wrap,.body)>:where(h2){margin-block-start: var(--space-section)}:where(section,.wrap,.body)>:where(h3){margin-block-start: calc(var(--space-section) * 0.6)}:where(section,.wrap,.body)>:where(h2,h3):first-child{margin-block-start: 0}:where(h2,h3) + :where(p,table,.tablewrap,svg,.legend){margin-block-start: 0.6rem}.glow{color: var(--primary);text-shadow: 0 0 8px var(--glow)}.glow-lg{color: var(--primary);text-shadow: 0 0 12px var(--glow)}.field-row{display: grid;grid-template-columns: var(--field-label-w) minmax(0,1fr);align-items: center;gap: 0.5rem 0.75rem;margin: 0.35rem 0}.field-row>.lbl{color: var(--muted-foreground);font-size: var(--fs-base);text-align: left}.field-row>.field-val{display: flex;flex-wrap: wrap;align-items: center;gap: 0.4rem 0.9rem;min-width: 0}@media (max-width: 40rem){.field-row{grid-template-columns: 1fr;gap: 0.2rem}}.prompt{font-size: var(--fs-base);font-weight: 700;color: var(--muted-foreground)}.prompt::before{content: "$ ";color: var(--primary)}.comment::before{content: "# ";color: var(--border)}.cursor-block{display: inline-block;width: 0.55em;height: 1em;margin-left: 8px;background: var(--primary);vertical-align: baseline;transform: translateY(0.12em);animation: ddd-blink 1.1s step-end infinite}@keyframes ddd-blink{50%{opacity: 0}}.btn-terminal{display: inline-block;background: var(--primary);color: var(--primary-foreground);font-weight: 700;padding: 12px 24px;box-shadow: 0 0 16px var(--glow);transition: box-shadow 0.15s ease,transform 0.15s ease}.btn-terminal::before{content: "> "}.btn-terminal--ghost{background: transparent;color: var(--primary);border: 1px solid var(--border);box-shadow: none;font-weight: 400}.btn-terminal--ghost::before{content: ""}.btn-terminal--ghost:hover{border-color: var(--primary);background: color-mix(in srgb,var(--primary) 10%,transparent);box-shadow: none}.btn-terminal:hover{box-shadow: 0 0 28px var(--glow);transform: translateY(-2px)}.btn-terminal:disabled{opacity: 0.45;cursor: default;box-shadow: none;transform: none}.btn-terminal--compact{padding: 0.28rem 0.7rem;font-size: var(--fs-base)}.btn-terminal--destructive{display: inline-flex;align-items: center;justify-content: center;padding: 0.3rem;color: var(--destructive);border-color: color-mix(in srgb,var(--destructive) 45%,var(--border))}.btn-terminal--destructive::before{content: ""}.btn-terminal--destructive::after{content: "";display: block;width: 0.875rem;height: 0.875rem;background: currentColor;-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v3H9zM4 6h16v2H4zM6 9h12l-1 12H7z'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v3H9zM4 6h16v2H4zM6 9h12l-1 12H7z'/%3E%3C/svg%3E") center / contain no-repeat}.btn-terminal--destructive:hover{border-color: var(--destructive);background: color-mix(in srgb,var(--destructive) 12%,transparent);box-shadow: none}@media (pointer: coarse){.btn-terminal--destructive{min-width: 44px;min-height: 44px}}.btn-terminal--edit{display: inline-flex;align-items: center;justify-content: center;padding: 0.3rem}.btn-terminal--edit::before{content: ""}.btn-terminal--edit::after{content: "";display: block;width: 0.875rem;height: 0.875rem;background: currentColor;-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04l-3.75-3.75-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04l-3.75-3.75-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center / contain no-repeat}@media (pointer: coarse){.btn-terminal--edit{min-width: 44px;min-height: 44px}}.link-quiet{color: var(--muted-foreground);text-decoration: underline;text-underline-offset: 4px;transition: color 0.15s ease}.link-quiet:hover{color: var(--primary)}.anim-toggle{display: inline-flex;align-items: center;gap: 6px;font: inherit;color: var(--muted-foreground);background: none;border: 0;cursor: pointer;transition: color 0.15s ease}.anim-toggle:hover{color: var(--primary)}.anim-toggle[aria-pressed="true"] [data-anim-box]{color: var(--primary)}.dd-dot{display: inline-block;width: 11px;height: 11px;flex: none;border-radius: 50%;background: currentColor}.dd-flag{display: inline-block;width: 15px;height: 10px;flex: none;border: 1px solid var(--border);background-size: cover;background-repeat: no-repeat}.dd-flag-de{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='4' fill='%23262626'/><rect y='4' width='18' height='4' fill='%23c83232'/><rect y='8' width='18' height='4' fill='%23e8be32'/></svg>")}.dd-flag-en{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='12' fill='%23b22234'/><rect y='4' width='18' height='4' fill='%23ececec'/><rect width='8' height='6' fill='%233c3b6e'/></svg>")}.dd-flag-pt{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='12' fill='%231c9148'/><polygon points='9,1.5 15.5,6 9,10.5 2.5,6' fill='%23e8c832'/><rect x='8' y='5' width='2' height='2' fill='%232c3f87'/></svg>")}.dd-flag-es{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='6' height='12' fill='%2315734c'/><rect x='6' width='6' height='12' fill='%23ececec'/><rect x='12' width='6' height='12' fill='%23bf2233'/><rect x='8' y='5' width='2' height='2' fill='%237a5c3a'/></svg>")}.ascii-rule{margin: 1rem 0;border: 0;color: var(--border);line-height: 1;white-space: nowrap;overflow: hidden;user-select: none}.ascii-rule::before{content: "────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"}.card-terminal{background: var(--card);border: 1px solid var(--border);transition: border-color 0.15s ease,box-shadow 0.15s ease}.card-terminal:hover{border-color: var(--primary);box-shadow: 0 0 20px var(--glow-soft)}.dropdown{position: relative}.dropdown>summary{display: inline-flex;align-items: center;gap: 6px;cursor: pointer;user-select: none;list-style: none;color: var(--muted-foreground);transition: color 0.15s ease}.dropdown>summary::-webkit-details-marker{display: none}.dropdown>summary:hover,.dropdown[open]>summary{color: var(--primary)}.dropdown-panel{position: absolute;right: 0;bottom: calc(100% + 12px);z-index: 50;min-width: 128px;margin: 0;padding: 4px 0;list-style: none;background: var(--card);border: 1px solid var(--border);border-radius: var(--radius);box-shadow: 0 0 20px var(--glow-soft)}.dropdown-panel--down{top: calc(100% + 8px);bottom: auto;left: 0;right: auto}.dropdown-item{display: flex;align-items: center;gap: 8px;width: 100%;padding: 5px 14px;text-align: left;font: inherit;line-height: 1.5;background: none;border: 0;color: var(--muted-foreground);cursor: pointer;white-space: nowrap;transition: color 0.15s ease}.dropdown-item:hover{color: var(--primary);background: var(--muted)}.dropdown-item[aria-current="true"],html:not([data-theme]) .dropdown-item[data-theme-value="warm"],html[data-theme="green"] .dropdown-item[data-theme-value="green"],html[data-theme="mono"] .dropdown-item[data-theme-value="mono"],html[data-theme="paper"] .dropdown-item[data-theme-value="paper"],html[data-theme="warm"] .dropdown-item[data-theme-value="warm"]{color: var(--primary);text-shadow: 0 0 8px var(--glow)}input[type="text"],input[type="search"],input[type="url"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],input[type="date"],input:not([type]),textarea{max-width: 100%;padding: 0.35rem 0.5rem;font: inherit;font-size: var(--fs-base);line-height: var(--lh-tight);color: var(--foreground);background-color: transparent;border: 1px solid color-mix(in srgb,var(--foreground) 60%,transparent);transition: border-color 0.15s ease}textarea{line-height: var(--lh-base)}input[type="text"]:hover,input[type="search"]:hover,input[type="url"]:hover,input[type="email"]:hover,input[type="password"]:hover,input[type="number"]:hover,input[type="tel"]:hover,input[type="date"]:hover,input:not([type]):hover,textarea:hover{border-color: var(--primary)}input:disabled,textarea:disabled{opacity: 0.55;cursor: not-allowed}select,.select-trigger{appearance: none;-webkit-appearance: none;max-width: 100%;padding: 0.35rem 1.45rem 0.35rem 0.5rem;font: inherit;font-size: var(--fs-base);line-height: var(--lh-tight);text-align: left;color: var(--foreground);background-color: transparent;background-image: linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position: right 0.78rem center,right 0.5rem center;background-size: 0.28rem 0.28rem;background-repeat: no-repeat;border: 1px solid color-mix(in srgb,var(--foreground) 60%,transparent);cursor: pointer;transition: border-color 0.15s ease}select:hover,.select-trigger:hover,.select-trigger[aria-expanded="true"]{border-color: var(--primary)}select:disabled,.select-trigger:disabled{opacity: 0.45;cursor: default}.select-trigger[aria-expanded="true"]{background-image: linear-gradient(135deg,transparent 50%,currentColor 50%),linear-gradient(45deg,currentColor 50%,transparent 50%)}.select-field{position: relative;display: inline-flex;max-width: 100%;vertical-align: middle}.select-field>select{position: absolute;inset: 0;width: 100%;height: 100%;opacity: 0;pointer-events: none}.select-trigger{display: inline-flex;align-items: center;width: 100%}.select-value{min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.select-value::after{content: "\200b"}.select-panel{position: fixed;z-index: 60;margin: 0;padding: 0.15rem 0;overflow-y: auto;overscroll-behavior: contain;list-style: none;font-size: var(--fs-base);line-height: var(--lh-tight);color: var(--popover-foreground);background: var(--popover);border: 1px solid color-mix(in srgb,var(--foreground) 60%,transparent);box-shadow: 0 0 20px var(--glow-soft)}.select-option{display: flex;align-items: center;gap: 0.4rem;padding: 0.28rem 0.9rem 0.28rem 0.55rem;border-inline-start: 2px solid transparent;white-space: nowrap;cursor: pointer}.select-option:hover,.select-option[data-active="true"]{background: var(--muted)}.select-option[aria-selected="true"]{color: var(--primary);font-weight: 700;border-inline-start-color: var(--primary)}.select-option[aria-disabled="true"]{color: color-mix(in srgb,var(--popover-foreground) 65%,var(--popover));cursor: default}.select-option[aria-disabled="true"]:hover{background: none}.select-group{padding: 0.35rem 0.9rem 0.15rem;color: var(--muted-foreground);font-size: var(--fs-base);text-transform: uppercase;letter-spacing: 0.06em}.table-pager{display: flex;flex-wrap: wrap;align-items: center;gap: 0.45rem 0.9rem;margin-block-start: 0.6rem;font-size: var(--fs-base)}.table-pager-status{margin: 0;color: var(--muted-foreground)}.table-pager-size{display: inline-flex;align-items: center;gap: 0.4rem;margin-inline-start: auto;color: var(--muted-foreground)}.table-pager-nav{display: inline-flex;gap: 0.4rem}.eli5{margin: 1.25em 0;padding: 0.7em 1em;color: var(--foreground);background: color-mix(in srgb,var(--primary) 7%,var(--card));border: 1px solid var(--border);border-left: 3px solid var(--primary);border-radius: var(--radius);font-size: var(--fs-base);line-height: 1.6}.eli5::before{content: "ELI5";display: inline-flex;align-items: center;justify-content: center;margin-right: 0.6em;vertical-align: 0.08em;font-family: var(--font-mono);font-size: 0.72em;font-weight: 700;line-height: 1;letter-spacing: 0.04em;padding: 0.34em 0.6em;border-radius: var(--radius);background: var(--destructive);color: var(--primary-foreground)}.eli5-term{font-weight: 700;color: var(--primary)}html.anim-off *,html.anim-off *::before,html.anim-off *::after{animation: none !important}html.anim-off .cursor-block{display: none}@media (prefers-reduced-motion: no-preference){html.term-anim [data-term] .prompt:not(.term-live),html.term-anim [data-term] .prompt:not(.term-live)::before{color: transparent}html.term-anim [data-term] [data-term-out]:not(.term-show){visibility: hidden}html.term-anim [data-term] [data-term-out].term-show{animation: ddd-term-output 0.2s steps(3,end) both}@keyframes ddd-term-output{from{opacity: 0}}html.term-anim [data-term] [data-term-out].term-show>*{animation: ddd-term-output 0.25s steps(3,end) both}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(2){animation-delay: 0.09s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(3){animation-delay: 0.18s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(4){animation-delay: 0.27s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(5){animation-delay: 0.36s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(6){animation-delay: 0.45s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(7){animation-delay: 0.54s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(8){animation-delay: 0.63s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(9){animation-delay: 0.72s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(10){animation-delay: 0.81s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(n + 11){animation-delay: 0.9s}.term-caret{display: inline-block;width: 0.55em;height: 1em;margin-left: 2px;background: var(--primary);vertical-align: baseline;transform: translateY(0.12em)}}.tabs{display: flex;flex-wrap: wrap;gap: 0.15rem;margin: 1.35rem 0 0;border-bottom: 2px solid color-mix(in srgb,var(--border) 80%,transparent)}.tab{background: transparent;border: 0;margin-bottom: -2px;font: inherit;font-size: var(--fs-base);cursor: pointer;padding: 0.5rem 0.95rem;color: var(--muted-foreground);transition: background 0.12s ease,color 0.12s ease}.tab:hover{color: var(--primary);background: color-mix(in srgb,var(--primary) 10%,transparent)}.tab[aria-selected="true"]{background: var(--primary);color: var(--background);font-weight: 700}.tab:focus-visible{outline: 2px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset: -2px}.tab--info{margin-inline-start: auto}@media (max-width: 40rem){.tab--info{margin-inline-start: 0}}@media (pointer: coarse),(max-width: 40rem){.tab{padding: 0.7rem 0.8rem;min-height: 44px}}section.doc.tab-panel{margin-top: 1.35rem}details.fold{border-top: 1px solid color-mix(in srgb,currentColor 15%,transparent)}details.fold>summary{display: flex;align-items: center;gap: 0.5rem;cursor: pointer;list-style: none;padding: 0.55rem 0;font-size: var(--fs-base);color: var(--muted-foreground)}details.fold>summary::-webkit-details-marker{display: none}details.fold>summary::before{content: "\25B8";flex: none;opacity: 0.6}details.fold[open]>summary::before{content: "\25BE"}details.fold>summary:hover{color: var(--primary)}details.fold>summary:focus-visible{outline: 2px solid color-mix(in srgb,currentColor 45%,transparent);outline-offset: 2px}.fold-body{font-size: var(--fs-base);padding: 0 0 0.7rem 1.1rem}.fold-body>* + *{margin-top: 0.6rem}.legend{list-style: none;padding: 0;margin: 0.7rem 0 0;display: grid;gap: 0.4rem 1.4rem;font-size: var(--fs-base)}@media (min-width: 52rem){.legend{grid-template-columns: repeat(2,minmax(0,1fr))}}.legend>li{line-height: 1.6}.legend>li>:first-child{margin-right: 0.45rem}.dgm-zoomable{position: relative;cursor: zoom-in}.dgm-zoomable::after{content: "⤢";position: absolute;top: 0.4rem;right: 0.5rem;font-size: 0.85rem;line-height: 1;opacity: 0.45;pointer-events: none;color: var(--muted-foreground)}.dgm-zoomable:hover::after,.dgm-zoomable:focus-visible::after{opacity: 1;color: var(--primary)}.dgm-zoomable:focus-visible{outline: 2px solid var(--primary);outline-offset: 3px}html.dgm-locked,html.dgm-locked body{overflow: hidden}.dgm-overlay{display: none;position: fixed;inset: 0;z-index: 90;background: color-mix(in srgb,var(--background) 96%,transparent);flex-direction: column}.dgm-overlay.open{display: flex}.dgm-bar{flex: none;display: flex;align-items: center;justify-content: flex-end;gap: 0.4rem;padding: 0.5rem 0.75rem;border-bottom: 1px solid var(--border);background: var(--card)}.dgm-btn{font: inherit;font-size: var(--fs-base);cursor: pointer;padding: 0.3rem 0.7rem;min-height: 32px;background: transparent;border: 1px solid var(--border);color: var(--foreground)}.dgm-btn:hover{border-color: var(--primary);color: var(--primary)}.dgm-btn:focus-visible{outline: 2px solid var(--primary);outline-offset: 1px}.dgm-close{border-color: color-mix(in srgb,var(--destructive) 55%,transparent);color: var(--destructive)}.dgm-close:hover{border-color: var(--destructive);color: var(--destructive)}.dgm-stage{flex: 1;overflow: hidden;display: grid;place-items: center;cursor: grab;touch-action: none}.dgm-stage.is-grabbing{cursor: grabbing}.dgm-art{transform-origin: center center;will-change: transform}.dgm-art>svg,.dgm-art>img{display: block;max-width: none;max-height: none}@media print{.dgm-overlay,.dgm-zoomable::after{display: none !important}}.minimap{position: fixed;left: 0;top: var(--ls-nav-top,3rem);bottom: var(--ls-nav-bottom,2.2rem);z-index: 20;display: none;flex-direction: column;justify-content: center;gap: 0.5rem;width: 2rem;padding: 0.75rem 0 0.75rem 0.75rem;overflow-y: auto;overscroll-behavior: contain;scrollbar-width: none}.minimap::-webkit-scrollbar{display: none}@media (min-width: 64rem){.minimap{display: flex}}.minimap-bar{flex: 0 0 auto;width: var(--minimap-bar-w,100%);height: 2px;padding: 0;border: 0;border-radius: 1px;background: var(--border);cursor: pointer;transition: background 0.15s ease,transform 0.15s ease;transform-origin: left center}.minimap-bar:hover{background: var(--muted-foreground);transform: scaleY(2)}.minimap-bar[data-tip]{cursor: pointer}.minimap-bar:focus-visible{outline: 2px solid var(--ring);outline-offset: 3px}.minimap-bar.active{background: var(--primary);transform: scaleY(2)}@media print{.minimap{display: none !important}}.wrap{max-width: var(--content-w);margin-inline: auto;padding-inline: var(--content-pad)}.tablewrap{position: relative;overflow-x: auto;overflow-y: auto;max-block-size: var(--tablewrap-max-h,none)}.tablewrap::after{content: "";position: absolute;inset-block: 0;right: 0;width: 1.5rem;pointer-events: none;opacity: 0.9;background: linear-gradient(to right,transparent,var(--tablewrap-fade,var(--background,transparent)))}.tablewrap thead th{position: sticky;inset-block-start: 0;z-index: 1;background: var(--background,#f5efe2)}.tickstrip:not(:empty){--tablewrap-fade: var(--card);border: 1px solid var(--border);background: var(--card);margin: 1.6rem 0 1.5rem}.ticktable{width: 100%;border-collapse: collapse;font-size: var(--fs-base)}.ticktable td{padding: 0.5rem 0.75rem;vertical-align: baseline;border: 0;white-space: nowrap}.ticktable td.tick-stats{width: 100%;white-space: normal;text-align: right}.tick{border-bottom: 1px solid color-mix(in srgb,var(--border) 55%,transparent)}.tick:last-child{border-bottom: 0}.tick-dot{font-size: 0.7em;width: 1.5rem;padding-right: 0 !important;border-left: 3px solid transparent;padding-left: 0.6rem !important}.tick--ok .tick-dot{color: var(--success);border-left-color: color-mix(in srgb,var(--success) 45%,transparent)}.tick--stale .tick-dot{color: var(--destructive);border-left-color: var(--destructive)}.tick--never .tick-dot{color: var(--muted-foreground);border-left-color: color-mix(in srgb,var(--muted-foreground) 35%,transparent)}.tick-name{font-weight: 700;color: var(--foreground);letter-spacing: 0.01em}.tick-last,.tick-next{font-variant-numeric: tabular-nums;color: var(--muted-foreground)}.tick-next{opacity: 0.72}.tick--stale .tick-last{color: var(--destructive);font-weight: 700}.tick--never .tick-last{font-style: italic}.tick-stats{color: var(--muted-foreground)}.tick-stats b{font-weight: 700;color: var(--primary);font-variant-numeric: tabular-nums}.tick-sep{font-style: normal;opacity: 0.35;margin: 0 0.5rem}.tick--stale{background: color-mix(in srgb,var(--destructive) 8%,transparent)}@media (max-width: 40rem){.ticktable,.ticktable tbody,.tick,.ticktable td{display: block}.tick{padding: 0.4rem 0.5rem}.ticktable td{display: inline-block;padding: 0.1rem 0.5rem 0.1rem 0}.ticktable td.tick-stats{display: block;width: auto;text-align: left}}.skip-link{position: absolute;left: -999px;top: 0;z-index: 100;background: var(--card);border: 1px solid var(--primary);padding: 0.5rem 1rem;color: var(--primary)}.skip-link:focus{left: 0.5rem;top: 0.5rem}.visually-hidden{position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap}header.bar{position: sticky;top: 0;z-index: 30;display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 0.6rem 1.25rem;border-bottom: 1px solid var(--border);background: var(--card)}header.bar .brand{display: inline-flex;align-items: center;font-weight: 700;font-size: 1rem}header.bar .brand,header.bar .brand a{color: inherit;text-decoration: none}header.bar .dropdown summary{padding: 0.6rem 0.4rem}.bar-right{display: flex;align-items: center;gap: 1rem;flex-shrink: 0}footer.status{position: fixed;inset-inline: 0;bottom: 0;z-index: 50;min-height: 2rem;display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 0.35rem 1.25rem;border-top: 1px solid var(--border);background: var(--card);font-size: var(--fs-base)}footer.status .dropdown summary,footer.status .anim-toggle{padding: 0.55rem 0.4rem}.status-left{color: var(--muted-foreground);min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.status-right{display: flex;align-items: center;gap: 1rem;flex-shrink: 0}.sep{width: 1px;height: 0.9rem;background: var(--border)}.doc-link{color: var(--muted-foreground);text-decoration: none;transition: color 0.15s ease}.doc-link:hover{color: var(--primary)}.doc-link--forward{color: var(--primary);white-space: nowrap}.doc-link--forward:hover{color: var(--primary);text-decoration: underline}.ls-group{display: block;padding: 0.55rem 0 0.15rem;font-size: var(--fs-base);letter-spacing: 0.08em;color: var(--muted-foreground);opacity: 0.75}.ls-panel>li:first-child .ls-group{padding-top: 0}.ls-row{display: flex;align-items: baseline;gap: 0.9rem}.ls-perm{color: color-mix(in srgb,var(--muted-foreground) 75%,var(--card));font-size: var(--fs-base);letter-spacing: 0}.ls-row--sub .ls-name{margin-left: 0.55rem;padding-left: 0.75rem;border-left: 1px solid color-mix(in srgb,var(--muted-foreground) 40%,transparent)}.ls-row--sub2 .ls-name{margin-left: 1.7rem}.ls-panel .ls-name{color: var(--muted-foreground)}.ls-panel .ls-row--dir .ls-name{color: var(--primary);font-weight: 700}.ls-row[aria-current="page"]{background: color-mix(in srgb,var(--primary) 12%,transparent);box-shadow: inset 3px 0 0 0 var(--primary)}.ls-row[aria-current="page"] .ls-name{color: var(--primary);font-weight: 700;text-shadow: 0 0 8px var(--glow)}.ls-row[aria-current="page"] .ls-perm{color: color-mix(in srgb,var(--primary) 65%,transparent)}.ls-row[aria-current="page"]::after{content: "←";margin-left: auto;color: var(--primary)}.dropdown-panel.ls-panel{min-width: 17rem;left: auto !important;right: 0}:root{--ls-nav-w: 17rem;--ls-nav-top: 3rem;--ls-nav-bottom: 2.2rem}@media (min-width: 48.0625rem){html{--ls-nav-inset: 0rem}html:has(.ls-nav):not([data-ls-nav="off"]){--ls-nav-inset: var(--ls-nav-w)}body{padding-right: var(--ls-nav-inset)}header.bar,.bleed-rail{margin-right: calc(-1 * var(--ls-nav-inset))}.ls-nav{position: fixed;top: var(--ls-nav-top);right: 0;bottom: var(--ls-nav-bottom);width: var(--ls-nav-w);z-index: 25;display: flex;flex-direction: column;overflow: hidden;background: var(--card);border-left: 1px solid var(--border)}html:not(.anim-off) .ls-nav{transition: transform 0.18s ease}html[data-ls-nav="off"] .ls-nav{transform: translateX(100%)}.ls-nav-head{display: inline-flex;align-items: center;gap: 0.5rem;margin-left: 0.75rem}.ls-nav-title{font-weight: 700;font-size: var(--fs-base)}.ls-nav .ls-panel{flex: 1;min-height: 0;overflow-y: auto;list-style: none;margin: 0;padding: 0.5rem 0 1rem}.ls-nav-toggle{background: none;border: 0;font: inherit;cursor: pointer;line-height: 1;color: var(--muted-foreground);padding: 0.4rem 0.55rem}.ls-nav-toggle::after{content: "\00BB"}html[data-ls-nav="off"] .ls-nav-toggle::after{content: "\00AB"}.ls-nav-toggle:hover{color: var(--primary)}.ls-nav-toggle:focus-visible{outline: 2px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset: -2px}}.nav-burger{display: none;background: none;border: 0;color: var(--muted-foreground);cursor: pointer;padding: 0.55rem;margin: -0.3rem -0.3rem -0.3rem 0}.nav-burger:hover{color: var(--primary)}.mobile-nav{display: none;list-style: none;margin: 0;padding: 0}.mobile-footer{display: none}@media (max-width: 48rem){.nav-burger{display: inline-flex;align-items: center}.site-nav{display: none;position: absolute;top: 100%;left: 0;right: 0;z-index: 40;background: var(--card);border-bottom: 1px solid var(--border);padding: 0.4rem 1.25rem 0.9rem;max-height: calc(100vh - 6rem);overflow-y: auto}.site-nav.open{display: block}.site-nav>.ls-nav,.mobile-nav{display: flex;flex-direction: column}.site-nav:has(>.ls-nav) .mobile-nav{display: none}.site-nav>.ls-nav .ls-row{align-items: center;min-height: 44px;border-bottom: 1px solid var(--border)}.site-nav>.ls-nav .ls-row .ls-name{display: flex;align-items: center;flex: 1;min-height: 44px}.site-nav>.ls-nav .ls-row:last-child{border-bottom: 0}.mobile-nav .mobile-item{display: flex;align-items: baseline;gap: 0.9rem;padding: 0.65rem 0;text-decoration: none;color: var(--foreground);font-size: var(--fs-base);border-bottom: 1px solid var(--border)}.mobile-nav li:last-child .mobile-item{border-bottom: 0}.mobile-nav .mobile-item:active .ls-name,.mobile-nav .mobile-item:hover .ls-name{color: var(--primary)}.ls-nav-toggle{display: none}footer.status{display: none}.mobile-footer{display: flex;flex-direction: column;gap: 0.55rem;margin-top: 0.8rem;border-top: 1px solid var(--border);padding-top: 0.8rem;font-size: var(--fs-base)}.mobile-footer .doc-link{padding: 0.2rem 0}.mobile-footer .mobile-theme summary{list-style: none;display: flex;align-items: center;gap: 0.5rem;color: var(--muted-foreground);cursor: pointer;padding: 0.2rem 0}.mobile-footer .mobile-theme summary::-webkit-details-marker{display: none}.mobile-footer .mf-chev{margin-left: auto;opacity: 0.7}.mobile-footer .mf-panel{display: flex;flex-direction: column;margin-top: 0.3rem}.mobile-footer .mf-panel .dropdown-item{text-align: left;padding: 0.4rem 0.6rem}.mobile-footer .anim-toggle{display: inline-flex;gap: 0.5rem;align-items: center;background: none;border: 0;padding: 0.2rem 0;color: var(--muted-foreground);font: inherit;cursor: pointer}}[data-tip]{cursor: help}span[data-tip]::after,th[data-tip]::after,button[data-tip]::after{content: "\FE0E\24D8";margin-inline-start: 0.35em;color: var(--muted-foreground);font-size: 0.9em;font-weight: 400;user-select: none;vertical-align: baseline}.minimap-bar[data-tip]::after,[data-tip][data-tip-bare]::after{content: none}#ddtip{position: fixed;z-index: 9999;display: none;max-width: 340px;background: var(--background);color: var(--foreground);border: 1px solid var(--muted-foreground);border-radius: var(--radius);padding: 7px 10px;font-size: var(--fs-base);line-height: 1.45;font-weight: 400;text-align: left;white-space: normal;pointer-events: none;box-shadow: 0 4px 14px rgba(0,0,0,0.25)}@media print{@page{margin: 14mm 12mm}:root,html,html[data-theme]{--background: #ffffff;--foreground: #111111;--card: #ffffff;--card-foreground: #111111;--popover: #ffffff;--popover-foreground: #111111;--primary: #000000;--primary-foreground: #ffffff;--secondary: #ffffff;--secondary-foreground: #111111;--muted: #ffffff;--muted-foreground: #444444;--accent: #000000;--accent-foreground: #ffffff;--destructive: #7a1c1c;--border: #9a9a9a;--input: #9a9a9a;--ring: #000000;--glow: transparent;--glow-soft: transparent;--scanline-opacity: 0}html{zoom: 1 !important;font-size: 16px;scroll-behavior: auto}body{background: #ffffff;color: var(--foreground);font-size: 12px;line-height: 1.45;overflow: visible}body::after{display: none !important}*,*::before,*::after{animation: none !important;transition: none !important;text-shadow: none !important;box-shadow: none !important}html.term-anim [data-term] [data-term-out],html.term-anim [data-term] [data-term-out]:not(.term-show),html.term-anim [data-term] [data-term-out]>*{visibility: visible !important;opacity: 1 !important}html.term-anim [data-term] .prompt:not(.term-live){color: var(--muted-foreground) !important}html.term-anim [data-term] .prompt:not(.term-live)::before{color: var(--primary) !important}header.bar,footer.status,.site-nav,.nav-burger,.mobile-nav,.mobile-footer,.skip-link,.dropdown,.dropdown-panel,.select-panel,.anim-toggle,.cursor-block,.term-caret,.ascii-rule,.toc,#ddtip{display: none !important}body{padding-right: 0 !important}[data-tip]{cursor: auto}span[data-tip]::after,th[data-tip]::after,button[data-tip]::after{content: none}.wrap{max-width: none !important;margin: 0 !important;padding: 0 !important}.layout{display: block !important}.content{min-width: 0}h1,.title{font-size: 1.5rem !important}h2{font-size: 1.15rem !important}h3,.sub{font-size: 1rem !important}h4{font-size: 0.9rem !important}.prompt{font-size: 0.7rem}h1,h2,h3,h4,.prompt,.toc-label{break-after: avoid-page;break-inside: avoid}p,li,blockquote{orphans: 3;widows: 3}pre,figure,blockquote,tr,img,.eli5,.card-terminal{break-inside: avoid}svg{break-inside: auto}thead{display: table-header-group}.tablewrap,.table-scroll,pre,.diagram{overflow: visible !important;max-width: 100% !important}pre{white-space: pre-wrap !important;overflow-wrap: anywhere;font-size: 0.75rem !important;background: transparent !important}pre.mermaid[data-processed]{white-space: normal !important}code{background: transparent !important;overflow-wrap: anywhere}table{width: 100% !important;table-layout: auto;border-collapse: collapse;font-size: 0.75rem !important}th,td{overflow-wrap: break-word;white-space: normal !important}td code,th code,td a,th a{overflow-wrap: anywhere}a{color: inherit;text-decoration: underline;text-underline-offset: 2px}a.card-terminal,a[class*="card"]{text-decoration: none}.glow,.glow-lg{color: inherit}.btn-terminal{border: 1px solid var(--border);background: transparent;color: var(--foreground)}.mermaid svg{display: block;margin-inline: auto;width: auto !important;height: auto !important;max-width: 100% !important;max-height: 235mm !important}.mermaid svg .node rect,.mermaid svg .node polygon,.mermaid svg .node circle,.mermaid svg .node path,.mermaid svg .label-container,.mermaid svg .cluster rect,.mermaid svg .actor,.mermaid svg .note{fill: #ffffff !important;stroke: #333333 !important}.mermaid svg .edgePath path,.mermaid svg .flowchart-link,.mermaid svg line,.mermaid svg .messageLine0,.mermaid svg .messageLine1{stroke: #333333 !important}.mermaid svg .arrowheadPath,.mermaid svg marker path,.mermaid svg marker polygon{fill: #333333 !important;stroke: #333333 !important}.mermaid svg text,.mermaid svg .nodeLabel,.mermaid svg .edgeLabel,.mermaid svg .cluster-label,.mermaid svg .messageText,.mermaid svg foreignObject div,.mermaid svg foreignObject span,.mermaid svg p{fill: #111111 !important;color: #111111 !important;background: transparent !important}.mermaid svg .edgeLabel rect,.mermaid svg .edgeLabel foreignObject>div{fill: #ffffff !important;background: #ffffff !important}}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@danieldeusing/design",
3
- "version": "0.26.0",
4
- "description": "The danieldeusing terminal design system — framework-agnostic CSS tokens, components, and a vanilla-JS runtime for the CRT/JetBrains-Mono look used across danieldeusing.de, seedr, and briefs.",
3
+ "version": "0.28.0",
4
+ "description": "The danieldeusing terminal design system \u2014 framework-agnostic CSS tokens, components, and a vanilla-JS runtime for the CRT/JetBrains-Mono look used across danieldeusing.de, seedr, and briefs.",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "author": "Daniel Deusing",
package/src/base.css CHANGED
@@ -41,9 +41,17 @@ body {
41
41
  They had been picking: cockpit's documentation tables sat at 15px while the containers
42
42
  dashboard's sat at 12px, a 3px gap between two pages of the same site. Nobody chose
43
43
  that; the two numbers were set years apart and never compared. A page with a genuine
44
- reason to differ still can, but it now has to say so instead of inheriting an accident. */
44
+ reason to differ still can, but it now has to say so instead of inheriting an accident.
45
+
46
+ ⚠️ This rule said `--fs-md` (13px) until 2026-08-11, while the sentence above it said "body
47
+ copy" — the comment and the code had disagreed since the day the rule was written, and the
48
+ comment was the one telling the truth about the intent. So every table in the estate rendered
49
+ one step LOUDER than the body around it, and in a cockpit form row that put the cells at 13px
50
+ beside an 11px label: the caption read as a footnote to the data it was introducing. Nobody
51
+ asked for that emphasis. It existed because the scale had a 13px step and a table is the
52
+ obvious place to spend one. */
45
53
  table {
46
- font-size: var(--fs-md);
54
+ font-size: var(--fs-base);
47
55
  width: 100%;
48
56
  }
49
57
 
@@ -131,3 +139,40 @@ body::after {
131
139
  background: var(--primary);
132
140
  color: var(--primary-foreground);
133
141
  }
142
+
143
+
144
+ /* ── SECTION AND HEADING RHYTHM ────────────────────────────────────────────────
145
+ Wrapped in :where(), so every one of these rules has specificity ZERO. That is
146
+ deliberate and it is what makes this safe to add to a package five surfaces
147
+ already depend on: any existing declaration a surface carries — cockpit's
148
+ `section.doc h2 { margin: 0.3rem 0 0 }`, for instance — beats these without
149
+ needing !important or a load-order argument. Nothing that already had an
150
+ answer changes; only surfaces that had NO answer gain one.
151
+
152
+ Sections and headings, not a generic `* + *` stack, because the gap that reads
153
+ as "a new part of the page starts here" is a different quantity from the gap
154
+ between two paragraphs, and collapsing them is what makes a long page feel
155
+ like an undifferentiated column. */
156
+ :where(section) + :where(section),
157
+ :where(section.doc) {
158
+ margin-block-start: var(--space-section);
159
+ }
160
+
161
+ /* A heading that opens its container needs no gap above it — the container's own
162
+ spacing already provides it, and doubling the two is the usual cause of a
163
+ first section sitting oddly low. */
164
+ :where(section, .wrap, .body) > :where(h2) {
165
+ margin-block-start: var(--space-section);
166
+ }
167
+ :where(section, .wrap, .body) > :where(h3) {
168
+ margin-block-start: calc(var(--space-section) * 0.6);
169
+ }
170
+ :where(section, .wrap, .body) > :where(h2, h3):first-child {
171
+ margin-block-start: 0;
172
+ }
173
+
174
+ /* A table or a chart immediately under its heading belongs to that heading, so
175
+ the gap there is small — the rhythm is BETWEEN sections, not inside them. */
176
+ :where(h2, h3) + :where(p, table, .tablewrap, svg, .legend) {
177
+ margin-block-start: 0.6rem;
178
+ }
package/src/chrome.css CHANGED
@@ -168,7 +168,7 @@
168
168
  background: var(--card);
169
169
  margin: 1.6rem 0 1.5rem;
170
170
  }
171
- .ticktable { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
171
+ .ticktable { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
172
172
  .ticktable td { padding: 0.5rem 0.75rem; vertical-align: baseline; border: 0; white-space: nowrap; }
173
173
  /* Only the last column may grow, so the four fixed columns keep the same width on every row.
174
174
 
@@ -196,7 +196,7 @@
196
196
  a printout has no colour at all), the COLOUR, and a left edge-marker that makes a bad row
197
197
  findable by shape alone when the strip is scanned rather than read. */
198
198
  .tick-dot {
199
- font-size: 0.7em; width: 1.5rem; padding-right: 0 !important;
199
+ font-size: 0.7em; width: 1.5rem; padding-right: 0 !important; /* not-text: the row edge-marker */
200
200
  border-left: 3px solid transparent; padding-left: 0.6rem !important;
201
201
  }
202
202
  /* --success is per-theme and AA-measured (0.3.0). `ok` used to borrow --primary — the BRAND
@@ -246,7 +246,7 @@ header.bar {
246
246
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
247
247
  padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--card);
248
248
  }
249
- header.bar .brand { display: inline-flex; align-items: center; font-weight: 700; font-size: 1rem; }
249
+ header.bar .brand { display: inline-flex; align-items: center; font-weight: 700; font-size: 1rem; } /* not-text: the wordmark */
250
250
  header.bar .brand, header.bar .brand a { color: inherit; text-decoration: none; }
251
251
  header.bar .dropdown summary { padding: 0.6rem 0.4rem; }
252
252
  .bar-right { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
@@ -256,7 +256,7 @@ footer.status {
256
256
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50; min-height: 2rem;
257
257
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
258
258
  padding: 0.35rem 1.25rem; border-top: 1px solid var(--border); background: var(--card);
259
- font-size: 0.7rem;
259
+ font-size: var(--fs-base);
260
260
  }
261
261
  footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0.4rem; }
262
262
  .status-left { color: var(--muted-foreground); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -287,7 +287,7 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
287
287
  .ls-group {
288
288
  display: block;
289
289
  padding: 0.55rem 0 0.15rem;
290
- font-size: var(--fs-xs);
290
+ font-size: var(--fs-base);
291
291
  letter-spacing: 0.08em;
292
292
  color: var(--muted-foreground);
293
293
  opacity: 0.75;
@@ -326,7 +326,7 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
326
326
  element toward `--primary`, and it must keep winning. */
327
327
  .ls-perm {
328
328
  color: color-mix(in srgb, var(--muted-foreground) 75%, var(--card));
329
- font-size: 0.72rem; letter-spacing: 0;
329
+ font-size: var(--fs-base); letter-spacing: 0;
330
330
  }
331
331
 
332
332
  /* DEPTH IS DRAWN, NOT JUST INDENTED. Whitespace alone did not carry it — with the
@@ -491,7 +491,7 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
491
491
  display: inline-flex; align-items: center; gap: 0.5rem;
492
492
  margin-left: 0.75rem;
493
493
  }
494
- .ls-nav-title { font-weight: 700; font-size: 0.9rem; }
494
+ .ls-nav-title { font-weight: 700; font-size: var(--fs-base); }
495
495
 
496
496
  /* The list is the only thing that scrolls — the head stays put, so the control
497
497
  that hides the rail cannot be scrolled out of reach. */
@@ -578,7 +578,7 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
578
578
  .site-nav > .ls-nav .ls-row:last-child { border-bottom: 0; }
579
579
  .mobile-nav .mobile-item {
580
580
  display: flex; align-items: baseline; gap: 0.9rem; padding: 0.65rem 0;
581
- text-decoration: none; color: var(--foreground); font-size: 0.9rem;
581
+ text-decoration: none; color: var(--foreground); font-size: var(--fs-base);
582
582
  border-bottom: 1px solid var(--border);
583
583
  }
584
584
  .mobile-nav li:last-child .mobile-item { border-bottom: 0; }
@@ -598,7 +598,7 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
598
598
  .mobile-footer {
599
599
  display: flex; flex-direction: column; gap: 0.55rem;
600
600
  margin-top: 0.8rem; border-top: 1px solid var(--border); padding-top: 0.8rem;
601
- font-size: 0.85rem;
601
+ font-size: var(--fs-base);
602
602
  }
603
603
  .mobile-footer .doc-link { padding: 0.2rem 0; }
604
604
  .mobile-footer .mobile-theme summary {
package/src/components.css CHANGED
@@ -45,7 +45,7 @@
45
45
  gap: 0.5rem 0.75rem;
46
46
  margin: 0.35rem 0;
47
47
  }
48
- .field-row > .lbl { color: var(--muted-foreground); font-size: var(--fs-sm); text-align: left; }
48
+ .field-row > .lbl { color: var(--muted-foreground); font-size: var(--fs-base); text-align: left; }
49
49
  /* The value cell: controls sit on one row and wrap together, rather than each finding its own. */
50
50
  .field-row > .field-val {
51
51
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; min-width: 0;
@@ -59,7 +59,7 @@
59
59
  Shell affordances — `$ command` section headers and `# comment` lines.
60
60
  ───────────────────────────────────────────────────────────────────────── */
61
61
  .prompt {
62
- font-size: 0.75rem;
62
+ font-size: var(--fs-base);
63
63
  font-weight: 700;
64
64
  color: var(--muted-foreground);
65
65
  }
@@ -166,7 +166,7 @@
166
166
  lost to `padding: 12px 24px` and every compact button in the estate rendered at CTA size. Only
167
167
  the font-size appeared to work, because `.btn-terminal` happens not to set one, which is what
168
168
  made it look like a class that was working. Position is load-bearing here, not tidiness. */
169
- .btn-terminal--compact { padding: 0.28rem 0.7rem; font-size: var(--fs-sm); }
169
+ .btn-terminal--compact { padding: 0.28rem 0.7rem; font-size: var(--fs-base); }
170
170
 
171
171
  /* THE DESTRUCTIVE ROW ACTION — square, red, a bin, and nothing else.
172
172
 
@@ -508,7 +508,7 @@ textarea {
508
508
  max-width: 100%;
509
509
  padding: 0.35rem 0.5rem;
510
510
  font: inherit;
511
- font-size: var(--fs-sm);
511
+ font-size: var(--fs-base);
512
512
  line-height: var(--lh-tight);
513
513
  color: var(--foreground);
514
514
  background-color: transparent;
@@ -543,7 +543,7 @@ select,
543
543
  together. */
544
544
  padding: 0.35rem 1.45rem 0.35rem 0.5rem;
545
545
  font: inherit;
546
- font-size: var(--fs-sm);
546
+ font-size: var(--fs-base);
547
547
  line-height: var(--lh-tight);
548
548
  text-align: left;
549
549
  color: var(--foreground);
@@ -636,7 +636,7 @@ select:disabled,
636
636
  overflow-y: auto;
637
637
  overscroll-behavior: contain;
638
638
  list-style: none;
639
- font-size: var(--fs-sm);
639
+ font-size: var(--fs-base);
640
640
  line-height: var(--lh-tight);
641
641
  color: var(--popover-foreground);
642
642
  background: var(--popover);
@@ -689,7 +689,7 @@ select:disabled,
689
689
  .select-group {
690
690
  padding: 0.35rem 0.9rem 0.15rem;
691
691
  color: var(--muted-foreground);
692
- font-size: var(--fs-xs);
692
+ font-size: var(--fs-base);
693
693
  text-transform: uppercase;
694
694
  letter-spacing: 0.06em;
695
695
  }
@@ -721,7 +721,7 @@ select:disabled,
721
721
  align-items: center;
722
722
  gap: 0.45rem 0.9rem;
723
723
  margin-block-start: 0.6rem;
724
- font-size: var(--fs-sm);
724
+ font-size: var(--fs-base);
725
725
  }
726
726
  .table-pager-status {
727
727
  margin: 0;
@@ -750,7 +750,7 @@ select:disabled,
750
750
  border: 1px solid var(--border);
751
751
  border-left: 3px solid var(--primary);
752
752
  border-radius: var(--radius);
753
- font-size: 0.92em;
753
+ font-size: var(--fs-base);
754
754
  line-height: 1.6;
755
755
  }
756
756
  .eli5::before {
@@ -761,7 +761,7 @@ select:disabled,
761
761
  margin-right: 0.6em;
762
762
  vertical-align: 0.08em;
763
763
  font-family: var(--font-mono);
764
- font-size: 0.72em;
764
+ font-size: 0.72em; /* not-text: the ELI5 marker glyph, sized against its own box */
765
765
  font-weight: 700;
766
766
  line-height: 1;
767
767
  letter-spacing: 0.04em;
@@ -868,7 +868,7 @@ html.anim-off .cursor-block {
868
868
  }
869
869
  .tab {
870
870
  background: transparent; border: 0; margin-bottom: -2px;
871
- font: inherit; font-size: 0.86em; cursor: pointer; padding: 0.5rem 0.95rem;
871
+ font: inherit; font-size: var(--fs-base); cursor: pointer; padding: 0.5rem 0.95rem;
872
872
  color: var(--muted-foreground); transition: background 0.12s ease, color 0.12s ease;
873
873
  }
874
874
  .tab:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
@@ -911,7 +911,7 @@ section.doc.tab-panel { margin-top: 1.35rem; }
911
911
  details.fold { border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
912
912
  details.fold > summary {
913
913
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
914
- padding: 0.55rem 0; font-size: 0.85rem; color: var(--muted-foreground);
914
+ padding: 0.55rem 0; font-size: var(--fs-base); color: var(--muted-foreground);
915
915
  }
916
916
  details.fold > summary::-webkit-details-marker { display: none; }
917
917
  details.fold > summary::before { content: "\25B8"; flex: none; opacity: 0.6; }
@@ -920,7 +920,7 @@ details.fold > summary:hover { color: var(--primary); }
920
920
  details.fold > summary:focus-visible {
921
921
  outline: 2px solid color-mix(in srgb, currentColor 45%, transparent); outline-offset: 2px;
922
922
  }
923
- .fold-body { font-size: 0.9rem; padding: 0 0 0.7rem 1.1rem; }
923
+ .fold-body { font-size: var(--fs-base); padding: 0 0 0.7rem 1.1rem; }
924
924
  .fold-body > * + * { margin-top: 0.6rem; }
925
925
 
926
926
  /* ── legend: one rendering of each state, beside the thing it keys ─────────────────────────────
@@ -929,7 +929,7 @@ details.fold > summary:focus-visible {
929
929
  separately-wrapped columns. */
930
930
  .legend {
931
931
  list-style: none; padding: 0; margin: 0.7rem 0 0;
932
- display: grid; gap: 0.4rem 1.4rem; font-size: 0.86rem;
932
+ display: grid; gap: 0.4rem 1.4rem; font-size: var(--fs-base);
933
933
  }
934
934
  @media (min-width: 52rem) { .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
935
935
  .legend > li { line-height: 1.6; }
@@ -945,7 +945,7 @@ details.fold > summary:focus-visible {
945
945
  .dgm-zoomable { position: relative; cursor: zoom-in; }
946
946
  .dgm-zoomable::after {
947
947
  content: "⤢"; position: absolute; top: 0.4rem; right: 0.5rem;
948
- font-size: 0.85rem; line-height: 1; opacity: 0.45; pointer-events: none;
948
+ font-size: 0.85rem; line-height: 1; opacity: 0.45; pointer-events: none; /* not-text: the ⤢ corner hint */
949
949
  color: var(--muted-foreground);
950
950
  }
951
951
  .dgm-zoomable:hover::after, .dgm-zoomable:focus-visible::after { opacity: 1; color: var(--primary); }
@@ -964,7 +964,7 @@ html.dgm-locked, html.dgm-locked body { overflow: hidden; }
964
964
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--card);
965
965
  }
966
966
  .dgm-btn {
967
- font: inherit; font-size: 0.82rem; cursor: pointer; padding: 0.3rem 0.7rem; min-height: 32px;
967
+ font: inherit; font-size: var(--fs-base); cursor: pointer; padding: 0.3rem 0.7rem; min-height: 32px;
968
968
  background: transparent; border: 1px solid var(--border); color: var(--foreground);
969
969
  }
970
970
  .dgm-btn:hover { border-color: var(--primary); color: var(--primary); }
package/src/tailwind.css CHANGED
@@ -57,14 +57,14 @@
57
57
  --radius-xl: var(--radius);
58
58
  /* Layout + type, so a Tailwind app reaches the same measurements as a plain
59
59
  one: `max-w-content` is the shared column, `text-fs-*` the shared scale.
60
- Tailwind's OWN text-xs/sm/base are deliberately left alone — this scale
61
- bottoms out at 10px for terminal chrome, and silently remapping the default
62
- names would reskin every existing utility in a consuming app. Opt in. */
60
+ Tailwind's OWN text-xs/sm/base are deliberately left alone — silently
61
+ remapping the default names would reskin every existing utility in a
62
+ consuming app. Opt in.
63
+ `text-fs-xs`, `-sm` and `-md` are GONE with the tokens behind them: there is
64
+ one text size now, so a utility offering four was offering a choice the
65
+ system no longer makes. A Tailwind app that used them wants `text-fs-base`. */
63
66
  --container-content: var(--content-w);
64
- --text-fs-xs: var(--fs-xs);
65
- --text-fs-sm: var(--fs-sm);
66
67
  --text-fs-base: var(--fs-base);
67
- --text-fs-md: var(--fs-md);
68
68
  --text-fs-lg: var(--fs-lg);
69
69
  --text-fs-xl: var(--fs-xl);
70
70
  --text-fs-2xl: var(--fs-2xl);
package/src/tokens.css CHANGED
@@ -215,12 +215,39 @@ html[data-theme="paper"] {
215
215
  four widths in the first place. */
216
216
  --content-pad: 1.5rem;
217
217
 
218
- --fs-xs: 0.625rem; /* 10px — table micro-labels, badge text, meta lines */
219
- --fs-sm: 0.6875rem; /* 11px — secondary and muted copy */
220
- --fs-base: 0.75rem; /* 12px — body. THE reference; base.css sets it on <body> */
221
- --fs-md: 0.8125rem; /* 13px — emphasised body, card headings, table headers */
218
+ /* ONE SIZE FOR TEXT (Daniel, 2026-08-11). There used to be four — `--fs-xs` 10px, `--fs-sm`
219
+ 11px, `--fs-base` 12px, `--fs-md` 13px — and they are gone, not renamed.
220
+
221
+ They were never a hierarchy. Four sizes one pixel apart cannot be told apart on sight, so
222
+ nothing in the estate ever CHOSE between them: every surface picked whichever felt right at
223
+ the time, and one repository card ended up rendering text at 10.2px, 10.8px, 10.88px, 11px,
224
+ 12px and 13px at once. Differences that small do not read as emphasis, they read as a page
225
+ that has not been finished — which is exactly how Daniel found this, by looking at a card and
226
+ asking why the words were different sizes.
227
+
228
+ The fix is not discipline, it is REMOVING THE CHOICE. With one text size there is no near-miss
229
+ to pick, and `font-size` stops being a decision anybody makes while writing a component.
230
+
231
+ What survives is the part that is genuinely a hierarchy: three heading steps, each a clear
232
+ jump rather than a nudge. If something needs to be quieter than body text, that is what
233
+ `--muted-foreground` and `opacity` are for — colour and weight separate a label from its value
234
+ far better than one pixel ever did, and they keep working at any zoom. */
235
+ --fs-base: 0.75rem; /* 12px — ALL normal text: body, tables, labels, badges, notes, controls */
222
236
  --fs-lg: 0.9375rem; /* 15px — h3 / section heads */
223
237
  --fs-xl: 1.125rem; /* 18px — h2 / page title */
238
+
239
+ /* ── VERTICAL RHYTHM BETWEEN SECTIONS ──────────────────────────────────────
240
+ The reset zeroes every margin (`* { margin: 0 }`) and nothing here ever put
241
+ heading spacing back, so for as long as this package has existed each
242
+ surface has invented its own gap. cockpit carries
243
+ `section.doc { margin-top: 2.5rem }` privately in portal.css; the family
244
+ financing page had nothing at all and read as one unbroken column. Two
245
+ surfaces, two answers, and the drift is invisible until they are seen side
246
+ by side — which is the whole reason this package exists.
247
+
248
+ 2.5rem is cockpit's existing value, promoted rather than invented, so the
249
+ surface that already had a considered answer does not move. */
250
+ --space-section: 2.5rem;
224
251
  --fs-2xl: 1.5rem; /* 24px — h1 / hero, display only */
225
252
 
226
253
  --lh-tight: 1.3; /* headings and single-line chrome */
package/src/tooltip.css CHANGED
@@ -30,7 +30,7 @@ button[data-tip]::after {
30
30
  content: "\FE0E\24D8"; /* ⓘ, with VS15 so it stays a glyph and never an emoji */
31
31
  margin-inline-start: 0.35em;
32
32
  color: var(--muted-foreground);
33
- font-size: 0.9em;
33
+ font-size: 0.9em; /* not-text: the ⓘ glyph */
34
34
  font-weight: 400;
35
35
  /* The glyph is decoration: it must not be dragged into a copied selection, and it must not shift
36
36
  the baseline of the label it follows. */
@@ -46,7 +46,7 @@ button[data-tip]::after {
46
46
  position: fixed; z-index: 9999; display: none; max-width: 340px;
47
47
  background: var(--background); color: var(--foreground);
48
48
  border: 1px solid var(--muted-foreground); border-radius: var(--radius);
49
- padding: 7px 10px; font-size: 0.72rem; line-height: 1.45; font-weight: 400;
49
+ padding: 7px 10px; font-size: var(--fs-base); line-height: 1.45; font-weight: 400;
50
50
  text-align: left; white-space: normal; pointer-events: none;
51
51
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
52
52
  }
package/templates/documentation.html CHANGED
@@ -98,13 +98,13 @@
98
98
  on docs.danieldeusing.de, NOT for a doc opened from disk over file://. -->
99
99
  <link
100
100
  rel="stylesheet"
101
- href="https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.26.0/dist/danieldeusing-design.min.css"
102
- onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.26.0.min.css'"
101
+ href="https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.28.0/dist/danieldeusing-design.min.css"
102
+ onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.28.0.min.css'"
103
103
  />
104
104
  <link
105
105
  rel="stylesheet"
106
- href="https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.26.0/src/fonts.css"
107
- onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.26.0.fonts.css'"
106
+ href="https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.28.0/src/fonts.css"
107
+ onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.28.0.fonts.css'"
108
108
  />
109
109
 
110
110
  <style>
@@ -298,7 +298,9 @@ flowchart TD
298
298
  B -- no --> D["{{FLOW_NO}}"]
299
299
 
300
300
  class D warn
301
- classDef warn fill:#a02c2c22,stroke:var(--destructive, #a02c2c),stroke-width:2px
301
+ %% Literal hex only: a comma inside var() splits Mermaid's style list and the
302
+ %% whole diagram fails to parse, falling back to its source silently.
303
+ classDef warn fill:#a02c2c22,stroke:#a02c2c,stroke-width:2px
302
304
  </pre>
303
305
  </div>
304
306
  </section>
@@ -341,7 +343,7 @@ flowchart TD
341
343
 
342
344
  <script type="module">
343
345
  import { applyStoredTheme, initThemeSwitcher, initDropdowns, initSelects, initTerminal, initAnimToggle, initBurgerNav, initLsNav, initTableScroll, initDiagramZoom, initMinimap, initTooltips } from
344
- "https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.26.0/runtime/index.js";
346
+ "https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.28.0/runtime/index.js";
345
347
  applyStoredTheme();
346
348
  initThemeSwitcher();
347
349
  initDropdowns();
package/tokens/tokens.json CHANGED
@@ -32,16 +32,9 @@
32
32
  "font-mono": "\"JetBrains Mono Variable\", \"JetBrains Mono\", \"Menlo\", monospace",
33
33
  "content-w": "78rem",
34
34
  "content-pad": "1.5rem",
35
- "fs-xs": "0.625rem",
36
- "fs-sm": "0.6875rem",
37
35
  "fs-base": "0.75rem",
38
- "fs-md": "0.8125rem",
39
36
  "fs-lg": "0.9375rem",
40
- "fs-xl": "1.125rem",
41
- "fs-2xl": "1.5rem",
42
- "lh-tight": "1.3",
43
- "lh-base": "1.5",
44
- "field-label-w": "8.5rem"
37
+ "fs-xl": "1.125rem"
45
38
  },
46
39
  "green": {
47
40
  "background": "#020604",