@danieldeusing/design 0.25.0 → 0.27.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 (12) hide show
  1. package/README.md +1 -1
  2. package/dist/danieldeusing-design.css +122 -34
  3. package/dist/danieldeusing-design.min.css +2 -2
  4. package/package.json +1 -1
  5. package/src/base.css +10 -2
  6. package/src/chrome.css +9 -9
  7. package/src/components.css +82 -16
  8. package/src/tailwind.css +6 -6
  9. package/src/tokens.css +18 -4
  10. package/src/tooltip.css +2 -2
  11. package/templates/documentation.html +5 -5
  12. package/tokens/tokens.json +0 -3
package/README.md CHANGED
@@ -173,7 +173,7 @@ silent accessibility regression that reads as a tidy-up in the diff:
173
173
 
174
174
  The panel sets `aria-describedby` on the anchor while it is shown and removes it on hide, so a
175
175
  `data-tip` is announced the way a `title` was. An `<option>`'s `title`/`data-tip` is carried onto the
176
- rendered `.select-option` by `initSelects()` — before 0.25.0 it was dropped, so per-option
176
+ rendered `.select-option` by `initSelects()` — before 0.26.0 it was dropped, so per-option
177
177
  explanations were unreachable no matter which attribute they used.
178
178
 
179
179
  ## Repo layout
package/dist/danieldeusing-design.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! danieldeusing-design v0.25.0 | MIT | https://github.com/danieldeusing/danieldeusing-design */
1
+ /*! danieldeusing-design v0.27.0 | MIT | https://github.com/danieldeusing/danieldeusing-design */
2
2
  /* ===== reset.css ===== */
3
3
  /*
4
4
  * danieldeusing-design — minimal reset.
@@ -293,10 +293,24 @@ 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 */
302
316
  --fs-2xl: 1.5rem; /* 24px — h1 / hero, display only */
@@ -356,9 +370,17 @@ body {
356
370
  They had been picking: cockpit's documentation tables sat at 15px while the containers
357
371
  dashboard's sat at 12px, a 3px gap between two pages of the same site. Nobody chose
358
372
  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. */
373
+ reason to differ still can, but it now has to say so instead of inheriting an accident.
374
+
375
+ ⚠️ This rule said `--fs-md` (13px) until 2026-08-11, while the sentence above it said "body
376
+ copy" — the comment and the code had disagreed since the day the rule was written, and the
377
+ comment was the one telling the truth about the intent. So every table in the estate rendered
378
+ one step LOUDER than the body around it, and in a cockpit form row that put the cells at 13px
379
+ beside an 11px label: the caption read as a footnote to the data it was introducing. Nobody
380
+ asked for that emphasis. It existed because the scale had a 13px step and a table is the
381
+ obvious place to spend one. */
360
382
  table {
361
- font-size: var(--fs-md);
383
+ font-size: var(--fs-base);
362
384
  width: 100%;
363
385
  }
364
386
 
@@ -495,7 +517,7 @@ body::after {
495
517
  gap: 0.5rem 0.75rem;
496
518
  margin: 0.35rem 0;
497
519
  }
498
- .field-row > .lbl { color: var(--muted-foreground); font-size: var(--fs-sm); text-align: left; }
520
+ .field-row > .lbl { color: var(--muted-foreground); font-size: var(--fs-base); text-align: left; }
499
521
  /* The value cell: controls sit on one row and wrap together, rather than each finding its own. */
500
522
  .field-row > .field-val {
501
523
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; min-width: 0;
@@ -509,7 +531,7 @@ body::after {
509
531
  Shell affordances — `$ command` section headers and `# comment` lines.
510
532
  ───────────────────────────────────────────────────────────────────────── */
511
533
  .prompt {
512
- font-size: 0.75rem;
534
+ font-size: var(--fs-base);
513
535
  font-weight: 700;
514
536
  color: var(--muted-foreground);
515
537
  }
@@ -616,7 +638,7 @@ body::after {
616
638
  lost to `padding: 12px 24px` and every compact button in the estate rendered at CTA size. Only
617
639
  the font-size appeared to work, because `.btn-terminal` happens not to set one, which is what
618
640
  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); }
641
+ .btn-terminal--compact { padding: 0.28rem 0.7rem; font-size: var(--fs-base); }
620
642
 
621
643
  /* THE DESTRUCTIVE ROW ACTION — square, red, a bin, and nothing else.
622
644
 
@@ -920,14 +942,80 @@ html[data-theme="warm"] .dropdown-item[data-theme-value="warm"] {
920
942
  because a `<select>` cannot have generated content. Two abutting squares,
921
943
  each half-filled on the diagonal, draw the same ▾ on both renderings.
922
944
  ───────────────────────────────────────────────────────────────────────── */
945
+ /* ── TEXT INPUTS, and why they were the last control with no declaration ─────
946
+ Until 0.26.0 this file styled `select` and said NOTHING about `input`. That
947
+ asymmetry is the whole bug: every consumer hand-rolled its own box (cockpit's
948
+ `.cfg-in`, redeclared per page — the same five-copies-that-disagree shape the
949
+ select rule below was written to end), and any input WITHOUT that class fell
950
+ through to the user agent's default. Measured on the real stylesheet, warm
951
+ theme: select 25.23px, `.cfg-in` 25.22px, a bare `input[type=search]` — every
952
+ column filter in every cockpit table — 24.00px, and `.btn-terminal--compact`
953
+ 27.44px. Three heights for controls that sit on one row.
954
+
955
+ ONE BOX FOR EVERY CONTROL, AT THE BUTTON'S HEIGHT. Daniel, 2026-08-11: "select
956
+ should have the same height as input fields (everywhere) ... it might be better
957
+ to increase the height of the input instead of decreasing the height of the
958
+ selects. Like this it would also fit with the buttons." So the button is the
959
+ reference and the controls rise to meet it rather than the button shrinking — a
960
+ filter box, a dropdown and a `refresh` button share a row constantly.
961
+
962
+ TYPE-SCOPED, NEVER BARE `input`. A bare selector would catch checkboxes and
963
+ radios, and this estate is full of them (every repository row on
964
+ /automation/config carries one) — handing those a padded 27px box would not be
965
+ a restyle, it would be a broken form. Only the types that render a text field
966
+ are listed, plus `:not([type])`, which is a valid text input.
967
+
968
+ `textarea` takes the box but NOT the tight line-height: --lh-tight is for
969
+ single-line chrome, and multi-line prose set at 1.3 is unreadable. */
970
+ input[type="text"],
971
+ input[type="search"],
972
+ input[type="url"],
973
+ input[type="email"],
974
+ input[type="password"],
975
+ input[type="number"],
976
+ input[type="tel"],
977
+ input[type="date"],
978
+ input:not([type]),
979
+ textarea {
980
+ max-width: 100%;
981
+ padding: 0.35rem 0.5rem;
982
+ font: inherit;
983
+ font-size: var(--fs-base);
984
+ line-height: var(--lh-tight);
985
+ color: var(--foreground);
986
+ background-color: transparent;
987
+ /* The same 60%-of-foreground edge as the select below, for the same measured
988
+ reason: --border is a container hairline and misses WCAG 1.4.11's 3:1 for a
989
+ control edge on all four themes. A control is a control. */
990
+ border: 1px solid color-mix(in srgb, var(--foreground) 60%, transparent);
991
+ transition: border-color 0.15s ease;
992
+ }
993
+ textarea { line-height: var(--lh-base); }
994
+ input[type="text"]:hover,
995
+ input[type="search"]:hover,
996
+ input[type="url"]:hover,
997
+ input[type="email"]:hover,
998
+ input[type="password"]:hover,
999
+ input[type="number"]:hover,
1000
+ input[type="tel"]:hover,
1001
+ input[type="date"]:hover,
1002
+ input:not([type]):hover,
1003
+ textarea:hover { border-color: var(--primary); }
1004
+ input:disabled,
1005
+ textarea:disabled { opacity: 0.55; cursor: not-allowed; }
1006
+
923
1007
  select,
924
1008
  .select-trigger {
925
1009
  appearance: none;
926
1010
  -webkit-appearance: none;
927
1011
  max-width: 100%;
928
- padding: 0.28rem 1.45rem 0.28rem 0.5rem;
1012
+ /* 0.35rem, not 0.28rem, since 0.26.0 — this is what lifts the closed control
1013
+ onto the button's height so a filter box, a dropdown and a button line up.
1014
+ It changes BOTH renderings at once, which is exactly why they are declared
1015
+ together. */
1016
+ padding: 0.35rem 1.45rem 0.35rem 0.5rem;
929
1017
  font: inherit;
930
- font-size: var(--fs-sm);
1018
+ font-size: var(--fs-base);
931
1019
  line-height: var(--lh-tight);
932
1020
  text-align: left;
933
1021
  color: var(--foreground);
@@ -1020,7 +1108,7 @@ select:disabled,
1020
1108
  overflow-y: auto;
1021
1109
  overscroll-behavior: contain;
1022
1110
  list-style: none;
1023
- font-size: var(--fs-sm);
1111
+ font-size: var(--fs-base);
1024
1112
  line-height: var(--lh-tight);
1025
1113
  color: var(--popover-foreground);
1026
1114
  background: var(--popover);
@@ -1073,7 +1161,7 @@ select:disabled,
1073
1161
  .select-group {
1074
1162
  padding: 0.35rem 0.9rem 0.15rem;
1075
1163
  color: var(--muted-foreground);
1076
- font-size: var(--fs-xs);
1164
+ font-size: var(--fs-base);
1077
1165
  text-transform: uppercase;
1078
1166
  letter-spacing: 0.06em;
1079
1167
  }
@@ -1105,7 +1193,7 @@ select:disabled,
1105
1193
  align-items: center;
1106
1194
  gap: 0.45rem 0.9rem;
1107
1195
  margin-block-start: 0.6rem;
1108
- font-size: var(--fs-sm);
1196
+ font-size: var(--fs-base);
1109
1197
  }
1110
1198
  .table-pager-status {
1111
1199
  margin: 0;
@@ -1134,7 +1222,7 @@ select:disabled,
1134
1222
  border: 1px solid var(--border);
1135
1223
  border-left: 3px solid var(--primary);
1136
1224
  border-radius: var(--radius);
1137
- font-size: 0.92em;
1225
+ font-size: var(--fs-base);
1138
1226
  line-height: 1.6;
1139
1227
  }
1140
1228
  .eli5::before {
@@ -1145,7 +1233,7 @@ select:disabled,
1145
1233
  margin-right: 0.6em;
1146
1234
  vertical-align: 0.08em;
1147
1235
  font-family: var(--font-mono);
1148
- font-size: 0.72em;
1236
+ font-size: 0.72em; /* not-text: the ELI5 marker glyph, sized against its own box */
1149
1237
  font-weight: 700;
1150
1238
  line-height: 1;
1151
1239
  letter-spacing: 0.04em;
@@ -1252,7 +1340,7 @@ html.anim-off .cursor-block {
1252
1340
  }
1253
1341
  .tab {
1254
1342
  background: transparent; border: 0; margin-bottom: -2px;
1255
- font: inherit; font-size: 0.86em; cursor: pointer; padding: 0.5rem 0.95rem;
1343
+ font: inherit; font-size: var(--fs-base); cursor: pointer; padding: 0.5rem 0.95rem;
1256
1344
  color: var(--muted-foreground); transition: background 0.12s ease, color 0.12s ease;
1257
1345
  }
1258
1346
  .tab:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
@@ -1295,7 +1383,7 @@ section.doc.tab-panel { margin-top: 1.35rem; }
1295
1383
  details.fold { border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
1296
1384
  details.fold > summary {
1297
1385
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
1298
- padding: 0.55rem 0; font-size: 0.85rem; color: var(--muted-foreground);
1386
+ padding: 0.55rem 0; font-size: var(--fs-base); color: var(--muted-foreground);
1299
1387
  }
1300
1388
  details.fold > summary::-webkit-details-marker { display: none; }
1301
1389
  details.fold > summary::before { content: "\25B8"; flex: none; opacity: 0.6; }
@@ -1304,7 +1392,7 @@ details.fold > summary:hover { color: var(--primary); }
1304
1392
  details.fold > summary:focus-visible {
1305
1393
  outline: 2px solid color-mix(in srgb, currentColor 45%, transparent); outline-offset: 2px;
1306
1394
  }
1307
- .fold-body { font-size: 0.9rem; padding: 0 0 0.7rem 1.1rem; }
1395
+ .fold-body { font-size: var(--fs-base); padding: 0 0 0.7rem 1.1rem; }
1308
1396
  .fold-body > * + * { margin-top: 0.6rem; }
1309
1397
 
1310
1398
  /* ── legend: one rendering of each state, beside the thing it keys ─────────────────────────────
@@ -1313,7 +1401,7 @@ details.fold > summary:focus-visible {
1313
1401
  separately-wrapped columns. */
1314
1402
  .legend {
1315
1403
  list-style: none; padding: 0; margin: 0.7rem 0 0;
1316
- display: grid; gap: 0.4rem 1.4rem; font-size: 0.86rem;
1404
+ display: grid; gap: 0.4rem 1.4rem; font-size: var(--fs-base);
1317
1405
  }
1318
1406
  @media (min-width: 52rem) { .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
1319
1407
  .legend > li { line-height: 1.6; }
@@ -1329,7 +1417,7 @@ details.fold > summary:focus-visible {
1329
1417
  .dgm-zoomable { position: relative; cursor: zoom-in; }
1330
1418
  .dgm-zoomable::after {
1331
1419
  content: "⤢"; position: absolute; top: 0.4rem; right: 0.5rem;
1332
- font-size: 0.85rem; line-height: 1; opacity: 0.45; pointer-events: none;
1420
+ font-size: 0.85rem; line-height: 1; opacity: 0.45; pointer-events: none; /* not-text: the ⤢ corner hint */
1333
1421
  color: var(--muted-foreground);
1334
1422
  }
1335
1423
  .dgm-zoomable:hover::after, .dgm-zoomable:focus-visible::after { opacity: 1; color: var(--primary); }
@@ -1348,7 +1436,7 @@ html.dgm-locked, html.dgm-locked body { overflow: hidden; }
1348
1436
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--card);
1349
1437
  }
1350
1438
  .dgm-btn {
1351
- font: inherit; font-size: 0.82rem; cursor: pointer; padding: 0.3rem 0.7rem; min-height: 32px;
1439
+ font: inherit; font-size: var(--fs-base); cursor: pointer; padding: 0.3rem 0.7rem; min-height: 32px;
1352
1440
  background: transparent; border: 1px solid var(--border); color: var(--foreground);
1353
1441
  }
1354
1442
  .dgm-btn:hover { border-color: var(--primary); color: var(--primary); }
@@ -1602,7 +1690,7 @@ html.dgm-locked, html.dgm-locked body { overflow: hidden; }
1602
1690
  background: var(--card);
1603
1691
  margin: 1.6rem 0 1.5rem;
1604
1692
  }
1605
- .ticktable { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
1693
+ .ticktable { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
1606
1694
  .ticktable td { padding: 0.5rem 0.75rem; vertical-align: baseline; border: 0; white-space: nowrap; }
1607
1695
  /* Only the last column may grow, so the four fixed columns keep the same width on every row.
1608
1696
 
@@ -1630,7 +1718,7 @@ html.dgm-locked, html.dgm-locked body { overflow: hidden; }
1630
1718
  a printout has no colour at all), the COLOUR, and a left edge-marker that makes a bad row
1631
1719
  findable by shape alone when the strip is scanned rather than read. */
1632
1720
  .tick-dot {
1633
- font-size: 0.7em; width: 1.5rem; padding-right: 0 !important;
1721
+ font-size: 0.7em; width: 1.5rem; padding-right: 0 !important; /* not-text: the row edge-marker */
1634
1722
  border-left: 3px solid transparent; padding-left: 0.6rem !important;
1635
1723
  }
1636
1724
  /* --success is per-theme and AA-measured (0.3.0). `ok` used to borrow --primary — the BRAND
@@ -1680,7 +1768,7 @@ header.bar {
1680
1768
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
1681
1769
  padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--card);
1682
1770
  }
1683
- header.bar .brand { display: inline-flex; align-items: center; font-weight: 700; font-size: 1rem; }
1771
+ header.bar .brand { display: inline-flex; align-items: center; font-weight: 700; font-size: 1rem; } /* not-text: the wordmark */
1684
1772
  header.bar .brand, header.bar .brand a { color: inherit; text-decoration: none; }
1685
1773
  header.bar .dropdown summary { padding: 0.6rem 0.4rem; }
1686
1774
  .bar-right { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
@@ -1690,7 +1778,7 @@ footer.status {
1690
1778
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50; min-height: 2rem;
1691
1779
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
1692
1780
  padding: 0.35rem 1.25rem; border-top: 1px solid var(--border); background: var(--card);
1693
- font-size: 0.7rem;
1781
+ font-size: var(--fs-base);
1694
1782
  }
1695
1783
  footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0.4rem; }
1696
1784
  .status-left { color: var(--muted-foreground); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -1721,7 +1809,7 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
1721
1809
  .ls-group {
1722
1810
  display: block;
1723
1811
  padding: 0.55rem 0 0.15rem;
1724
- font-size: var(--fs-xs);
1812
+ font-size: var(--fs-base);
1725
1813
  letter-spacing: 0.08em;
1726
1814
  color: var(--muted-foreground);
1727
1815
  opacity: 0.75;
@@ -1760,7 +1848,7 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
1760
1848
  element toward `--primary`, and it must keep winning. */
1761
1849
  .ls-perm {
1762
1850
  color: color-mix(in srgb, var(--muted-foreground) 75%, var(--card));
1763
- font-size: 0.72rem; letter-spacing: 0;
1851
+ font-size: var(--fs-base); letter-spacing: 0;
1764
1852
  }
1765
1853
 
1766
1854
  /* DEPTH IS DRAWN, NOT JUST INDENTED. Whitespace alone did not carry it — with the
@@ -1925,7 +2013,7 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
1925
2013
  display: inline-flex; align-items: center; gap: 0.5rem;
1926
2014
  margin-left: 0.75rem;
1927
2015
  }
1928
- .ls-nav-title { font-weight: 700; font-size: 0.9rem; }
2016
+ .ls-nav-title { font-weight: 700; font-size: var(--fs-base); }
1929
2017
 
1930
2018
  /* The list is the only thing that scrolls — the head stays put, so the control
1931
2019
  that hides the rail cannot be scrolled out of reach. */
@@ -2012,7 +2100,7 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
2012
2100
  .site-nav > .ls-nav .ls-row:last-child { border-bottom: 0; }
2013
2101
  .mobile-nav .mobile-item {
2014
2102
  display: flex; align-items: baseline; gap: 0.9rem; padding: 0.65rem 0;
2015
- text-decoration: none; color: var(--foreground); font-size: 0.9rem;
2103
+ text-decoration: none; color: var(--foreground); font-size: var(--fs-base);
2016
2104
  border-bottom: 1px solid var(--border);
2017
2105
  }
2018
2106
  .mobile-nav li:last-child .mobile-item { border-bottom: 0; }
@@ -2032,7 +2120,7 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
2032
2120
  .mobile-footer {
2033
2121
  display: flex; flex-direction: column; gap: 0.55rem;
2034
2122
  margin-top: 0.8rem; border-top: 1px solid var(--border); padding-top: 0.8rem;
2035
- font-size: 0.85rem;
2123
+ font-size: var(--fs-base);
2036
2124
  }
2037
2125
  .mobile-footer .doc-link { padding: 0.2rem 0; }
2038
2126
  .mobile-footer .mobile-theme summary {
@@ -2083,7 +2171,7 @@ button[data-tip]::after {
2083
2171
  content: "\FE0E\24D8"; /* ⓘ, with VS15 so it stays a glyph and never an emoji */
2084
2172
  margin-inline-start: 0.35em;
2085
2173
  color: var(--muted-foreground);
2086
- font-size: 0.9em;
2174
+ font-size: 0.9em; /* not-text: the ⓘ glyph */
2087
2175
  font-weight: 400;
2088
2176
  /* The glyph is decoration: it must not be dragged into a copied selection, and it must not shift
2089
2177
  the baseline of the label it follows. */
@@ -2099,7 +2187,7 @@ button[data-tip]::after {
2099
2187
  position: fixed; z-index: 9999; display: none; max-width: 340px;
2100
2188
  background: var(--background); color: var(--foreground);
2101
2189
  border: 1px solid var(--muted-foreground); border-radius: var(--radius);
2102
- padding: 7px 10px; font-size: 0.72rem; line-height: 1.45; font-weight: 400;
2190
+ padding: 7px 10px; font-size: var(--fs-base); line-height: 1.45; font-weight: 400;
2103
2191
  text-align: left; white-space: normal; pointer-events: none;
2104
2192
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
2105
2193
  }
package/dist/danieldeusing-design.min.css CHANGED
@@ -1,2 +1,2 @@
1
- /*! danieldeusing-design v0.25.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)}select,.select-trigger{appearance: none;-webkit-appearance: none;max-width: 100%;padding: 0.28rem 1.45rem 0.28rem 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.27.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;--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)}.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,6 +1,6 @@
1
1
  {
2
2
  "name": "@danieldeusing/design",
3
- "version": "0.25.0",
3
+ "version": "0.27.0",
4
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.",
5
5
  "type": "module",
6
6
  "license": "MIT",
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
 
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
 
@@ -470,14 +470,80 @@ html[data-theme="warm"] .dropdown-item[data-theme-value="warm"] {
470
470
  because a `<select>` cannot have generated content. Two abutting squares,
471
471
  each half-filled on the diagonal, draw the same ▾ on both renderings.
472
472
  ───────────────────────────────────────────────────────────────────────── */
473
+ /* ── TEXT INPUTS, and why they were the last control with no declaration ─────
474
+ Until 0.26.0 this file styled `select` and said NOTHING about `input`. That
475
+ asymmetry is the whole bug: every consumer hand-rolled its own box (cockpit's
476
+ `.cfg-in`, redeclared per page — the same five-copies-that-disagree shape the
477
+ select rule below was written to end), and any input WITHOUT that class fell
478
+ through to the user agent's default. Measured on the real stylesheet, warm
479
+ theme: select 25.23px, `.cfg-in` 25.22px, a bare `input[type=search]` — every
480
+ column filter in every cockpit table — 24.00px, and `.btn-terminal--compact`
481
+ 27.44px. Three heights for controls that sit on one row.
482
+
483
+ ONE BOX FOR EVERY CONTROL, AT THE BUTTON'S HEIGHT. Daniel, 2026-08-11: "select
484
+ should have the same height as input fields (everywhere) ... it might be better
485
+ to increase the height of the input instead of decreasing the height of the
486
+ selects. Like this it would also fit with the buttons." So the button is the
487
+ reference and the controls rise to meet it rather than the button shrinking — a
488
+ filter box, a dropdown and a `refresh` button share a row constantly.
489
+
490
+ TYPE-SCOPED, NEVER BARE `input`. A bare selector would catch checkboxes and
491
+ radios, and this estate is full of them (every repository row on
492
+ /automation/config carries one) — handing those a padded 27px box would not be
493
+ a restyle, it would be a broken form. Only the types that render a text field
494
+ are listed, plus `:not([type])`, which is a valid text input.
495
+
496
+ `textarea` takes the box but NOT the tight line-height: --lh-tight is for
497
+ single-line chrome, and multi-line prose set at 1.3 is unreadable. */
498
+ input[type="text"],
499
+ input[type="search"],
500
+ input[type="url"],
501
+ input[type="email"],
502
+ input[type="password"],
503
+ input[type="number"],
504
+ input[type="tel"],
505
+ input[type="date"],
506
+ input:not([type]),
507
+ textarea {
508
+ max-width: 100%;
509
+ padding: 0.35rem 0.5rem;
510
+ font: inherit;
511
+ font-size: var(--fs-base);
512
+ line-height: var(--lh-tight);
513
+ color: var(--foreground);
514
+ background-color: transparent;
515
+ /* The same 60%-of-foreground edge as the select below, for the same measured
516
+ reason: --border is a container hairline and misses WCAG 1.4.11's 3:1 for a
517
+ control edge on all four themes. A control is a control. */
518
+ border: 1px solid color-mix(in srgb, var(--foreground) 60%, transparent);
519
+ transition: border-color 0.15s ease;
520
+ }
521
+ textarea { line-height: var(--lh-base); }
522
+ input[type="text"]:hover,
523
+ input[type="search"]:hover,
524
+ input[type="url"]:hover,
525
+ input[type="email"]:hover,
526
+ input[type="password"]:hover,
527
+ input[type="number"]:hover,
528
+ input[type="tel"]:hover,
529
+ input[type="date"]:hover,
530
+ input:not([type]):hover,
531
+ textarea:hover { border-color: var(--primary); }
532
+ input:disabled,
533
+ textarea:disabled { opacity: 0.55; cursor: not-allowed; }
534
+
473
535
  select,
474
536
  .select-trigger {
475
537
  appearance: none;
476
538
  -webkit-appearance: none;
477
539
  max-width: 100%;
478
- padding: 0.28rem 1.45rem 0.28rem 0.5rem;
540
+ /* 0.35rem, not 0.28rem, since 0.26.0 — this is what lifts the closed control
541
+ onto the button's height so a filter box, a dropdown and a button line up.
542
+ It changes BOTH renderings at once, which is exactly why they are declared
543
+ together. */
544
+ padding: 0.35rem 1.45rem 0.35rem 0.5rem;
479
545
  font: inherit;
480
- font-size: var(--fs-sm);
546
+ font-size: var(--fs-base);
481
547
  line-height: var(--lh-tight);
482
548
  text-align: left;
483
549
  color: var(--foreground);
@@ -570,7 +636,7 @@ select:disabled,
570
636
  overflow-y: auto;
571
637
  overscroll-behavior: contain;
572
638
  list-style: none;
573
- font-size: var(--fs-sm);
639
+ font-size: var(--fs-base);
574
640
  line-height: var(--lh-tight);
575
641
  color: var(--popover-foreground);
576
642
  background: var(--popover);
@@ -623,7 +689,7 @@ select:disabled,
623
689
  .select-group {
624
690
  padding: 0.35rem 0.9rem 0.15rem;
625
691
  color: var(--muted-foreground);
626
- font-size: var(--fs-xs);
692
+ font-size: var(--fs-base);
627
693
  text-transform: uppercase;
628
694
  letter-spacing: 0.06em;
629
695
  }
@@ -655,7 +721,7 @@ select:disabled,
655
721
  align-items: center;
656
722
  gap: 0.45rem 0.9rem;
657
723
  margin-block-start: 0.6rem;
658
- font-size: var(--fs-sm);
724
+ font-size: var(--fs-base);
659
725
  }
660
726
  .table-pager-status {
661
727
  margin: 0;
@@ -684,7 +750,7 @@ select:disabled,
684
750
  border: 1px solid var(--border);
685
751
  border-left: 3px solid var(--primary);
686
752
  border-radius: var(--radius);
687
- font-size: 0.92em;
753
+ font-size: var(--fs-base);
688
754
  line-height: 1.6;
689
755
  }
690
756
  .eli5::before {
@@ -695,7 +761,7 @@ select:disabled,
695
761
  margin-right: 0.6em;
696
762
  vertical-align: 0.08em;
697
763
  font-family: var(--font-mono);
698
- font-size: 0.72em;
764
+ font-size: 0.72em; /* not-text: the ELI5 marker glyph, sized against its own box */
699
765
  font-weight: 700;
700
766
  line-height: 1;
701
767
  letter-spacing: 0.04em;
@@ -802,7 +868,7 @@ html.anim-off .cursor-block {
802
868
  }
803
869
  .tab {
804
870
  background: transparent; border: 0; margin-bottom: -2px;
805
- 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;
806
872
  color: var(--muted-foreground); transition: background 0.12s ease, color 0.12s ease;
807
873
  }
808
874
  .tab:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
@@ -845,7 +911,7 @@ section.doc.tab-panel { margin-top: 1.35rem; }
845
911
  details.fold { border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
846
912
  details.fold > summary {
847
913
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
848
- 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);
849
915
  }
850
916
  details.fold > summary::-webkit-details-marker { display: none; }
851
917
  details.fold > summary::before { content: "\25B8"; flex: none; opacity: 0.6; }
@@ -854,7 +920,7 @@ details.fold > summary:hover { color: var(--primary); }
854
920
  details.fold > summary:focus-visible {
855
921
  outline: 2px solid color-mix(in srgb, currentColor 45%, transparent); outline-offset: 2px;
856
922
  }
857
- .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; }
858
924
  .fold-body > * + * { margin-top: 0.6rem; }
859
925
 
860
926
  /* ── legend: one rendering of each state, beside the thing it keys ─────────────────────────────
@@ -863,7 +929,7 @@ details.fold > summary:focus-visible {
863
929
  separately-wrapped columns. */
864
930
  .legend {
865
931
  list-style: none; padding: 0; margin: 0.7rem 0 0;
866
- display: grid; gap: 0.4rem 1.4rem; font-size: 0.86rem;
932
+ display: grid; gap: 0.4rem 1.4rem; font-size: var(--fs-base);
867
933
  }
868
934
  @media (min-width: 52rem) { .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
869
935
  .legend > li { line-height: 1.6; }
@@ -879,7 +945,7 @@ details.fold > summary:focus-visible {
879
945
  .dgm-zoomable { position: relative; cursor: zoom-in; }
880
946
  .dgm-zoomable::after {
881
947
  content: "⤢"; position: absolute; top: 0.4rem; right: 0.5rem;
882
- 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 */
883
949
  color: var(--muted-foreground);
884
950
  }
885
951
  .dgm-zoomable:hover::after, .dgm-zoomable:focus-visible::after { opacity: 1; color: var(--primary); }
@@ -898,7 +964,7 @@ html.dgm-locked, html.dgm-locked body { overflow: hidden; }
898
964
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--card);
899
965
  }
900
966
  .dgm-btn {
901
- 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;
902
968
  background: transparent; border: 1px solid var(--border); color: var(--foreground);
903
969
  }
904
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,10 +215,24 @@ 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 */
224
238
  --fs-2xl: 1.5rem; /* 24px — h1 / hero, display only */
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.25.0/dist/danieldeusing-design.min.css"
102
- onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.25.0.min.css'"
101
+ href="https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.27.0/dist/danieldeusing-design.min.css"
102
+ onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.27.0.min.css'"
103
103
  />
104
104
  <link
105
105
  rel="stylesheet"
106
- href="https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.25.0/src/fonts.css"
107
- onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.25.0.fonts.css'"
106
+ href="https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.27.0/src/fonts.css"
107
+ onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.27.0.fonts.css'"
108
108
  />
109
109
 
110
110
  <style>
@@ -341,7 +341,7 @@ flowchart TD
341
341
 
342
342
  <script type="module">
343
343
  import { applyStoredTheme, initThemeSwitcher, initDropdowns, initSelects, initTerminal, initAnimToggle, initBurgerNav, initLsNav, initTableScroll, initDiagramZoom, initMinimap, initTooltips } from
344
- "https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.25.0/runtime/index.js";
344
+ "https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.27.0/runtime/index.js";
345
345
  applyStoredTheme();
346
346
  initThemeSwitcher();
347
347
  initDropdowns();
package/tokens/tokens.json CHANGED
@@ -32,10 +32,7 @@
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
37
  "fs-xl": "1.125rem",
41
38
  "fs-2xl": "1.5rem",