@danieldeusing/design 0.1.4 → 0.1.6

package/dist/danieldeusing-design.css

@@ -1,4 +1,4 @@
-/*! danieldeusing-design v0.1.4 | MIT | https://github.com/danieldeusing/danieldeusing-design */
+/*! danieldeusing-design v0.1.6 | MIT | https://github.com/danieldeusing/danieldeusing-design */
 /* ===== reset.css ===== */
 /*
  * danieldeusing-design — minimal reset.
@@ -742,3 +742,374 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
     font: inherit; cursor: pointer;
   }
 }
+
+/* ===== tooltip.css ===== */
+/*
+ * tooltip.css — styles for the [data-tip] tooltip system (runtime/tooltip.js).
+ * The panel is a body-level singleton with position:fixed — it can never be
+ * clipped by overflow containers and always sits on top.
+ */
+[data-tip] { cursor: help; }
+span[data-tip], th[data-tip] { border-bottom: 1px dotted var(--muted-foreground); }
+
+#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: 4px;
+  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);
+}
+
+/* ===== print.css ===== */
+/*
+ * danieldeusing-design — print layer.
+ *
+ * Paper is a different device, not a narrow screen. This layer strips the parts
+ * of the terminal look that only exist to sell "a CRT is running" — scanlines,
+ * phosphor glow, sticky chrome, the reveal animation — and lays the content out
+ * as a document: black on white, 12px body text, sane page breaks.
+ *
+ * Load LAST (index.css imports it after every other layer) so its token
+ * overrides win on source order without needing !important on each one.
+ *
+ * Three things here are load-bearing and easy to lose in a refactor:
+ *
+ *   1. The terminal reveal is forced open. runtime/terminal.js only reveals a
+ *      [data-term-out] once its section scrolls into view, so a long page that
+ *      is printed straight after load has most of its content sitting at
+ *      visibility:hidden. Printing it would silently produce blank pages — the
+ *      reader only finds out on paper. Everything is forced visible here
+ *      regardless of animation state.
+ *   2. `zoom` is reset. Pages that use the resolution-independent zoom trick
+ *      (html.style.zoom = innerWidth / 1920) carry that multiplier into the
+ *      print box, which is what makes a printout come out oversized.
+ *   3. Mermaid bakes the ACTIVE theme's colours into the SVG at render time, so
+ *      a diagram rendered under `green`/`mono` is dark-on-dark on paper no
+ *      matter what the page tokens say. The SVG parts are repainted below.
+ */
+
+@media print {
+  @page {
+    margin: 14mm 12mm;
+  }
+
+  /* ── ink-frugal palette, whatever theme is on screen ────────────────────
+     `html[data-theme]` matches the specificity of the themed token blocks in
+     tokens.css and comes later in the bundle, so it wins for every theme. */
+  :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;
+  }
+
+  /* ── document metrics ──────────────────────────────────────────────────
+     The rem baseline is pinned so the design's rem scale lands where it was
+     drawn, and the body size is stated in px so it is 12px on paper whatever
+     the browser's default font size is. `zoom` is a screen-only device. */
+  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;
+  }
+
+  /* CRT scanline overlay: a fixed, full-viewport gradient — on paper it is a
+     grey wash over the page. */
+  body::after {
+    display: none !important;
+  }
+
+  /* ── nothing animates on paper ─────────────────────────────────────────
+     Also the mechanism that un-hides the terminal reveal: the keyframes use
+     `both`, so killing the animation restores the element's own opacity. */
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+    text-shadow: none !important;
+    box-shadow: none !important;
+  }
+
+  /* ── the reveal must never decide what lands on paper ──────────────────
+     See note 1 at the top of this file. */
+  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;
+  }
+
+  /* ── screen-only chrome ────────────────────────────────────────────────
+     .toc is the "On this page" navigator: a screen affordance with no meaning
+     on paper, and the first thing that makes a printout look broken. */
+  header.bar,
+  footer.status,
+  .site-nav,
+  .nav-burger,
+  .mobile-nav,
+  .mobile-footer,
+  .skip-link,
+  .dropdown,
+  .dropdown-panel,
+  .anim-toggle,
+  .cursor-block,
+  .term-caret,
+  .ascii-rule,
+  .toc,
+  #ddtip {
+    display: none !important;
+  }
+
+  [data-tip] {
+    cursor: auto;
+  }
+  span[data-tip],
+  th[data-tip] {
+    border-bottom: 0;
+  }
+
+  /* ── layout: the page is the column ────────────────────────────────────
+     .wrap/.layout/.content are the documentation-template vocabulary shipped
+     in templates/documentation.html. */
+  .wrap {
+    max-width: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+  .layout {
+    display: block !important;
+  }
+  .content {
+    min-width: 0;
+  }
+
+  /* ── heading hierarchy against a 12px body ─────────────────────────────
+     24 / 18 / 16 / 14 px. !important because page-level rules give these
+     classes a higher specificity than a bare element selector. */
+  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;
+  }
+
+  /* ── page breaks ───────────────────────────────────────────────────────
+     A heading (or a `$ command` section header) must never be the last thing
+     on a page. Tables break between rows and repeat their header; everything
+     that reads as one unit stays together. */
+  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;
+  }
+  /* NOT svg. A mermaid flowchart is routinely taller than a printed page;
+     `break-inside: avoid` on the SVG pushes it past the page boundary while its
+     wrapper stays behind, which prints an entire page as an empty bordered box.
+     Let the SVG break where the wrapper breaks. */
+  svg {
+    break-inside: auto;
+  }
+  thead {
+    display: table-header-group;
+  }
+
+  /* ── nothing scrolls on paper ──────────────────────────────────────────
+     An overflow-x container has no scrollbar in print: whatever sits past the
+     right edge is simply gone. Let it wrap instead. */
+  .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;
+  }
+  /* `overflow-wrap: break-word` and NOT `anywhere`: `anywhere` also shrinks a
+     cell's min-content width to one character, and the auto table layout then
+     collapses a short column to nothing ("Orchestrator" set as "Orche/strat/or"
+     down a 6-character column). Only the elements that actually hold
+     unbreakable strings — paths, URLs, identifiers — get to break anywhere. */
+  th,
+  td {
+    overflow-wrap: break-word;
+    white-space: normal !important;
+  }
+  td code,
+  th code,
+  td a,
+  th a {
+    overflow-wrap: anywhere;
+  }
+
+  /* ── links read as text ────────────────────────────────────────────────
+     The URL is deliberately NOT printed after the link. These are internal
+     documents whose links are mostly in-page anchors and hosts already named
+     in the prose; appending every href would add noise and pages without
+     adding information. To turn it on, add:
+       a[href^="http"]::after { content: " (" attr(href) ")"; } */
+  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 diagrams ──────────────────────────────────────────────────
+     See note 3 at the top of this file: the palette is baked into the SVG at
+     render time, so a diagram rendered under a dark theme prints as dark
+     boxes with invisible labels. Repaint the standard mermaid parts. */
+  /* Every diagram is scaled to fit ONE page. Not cosmetic: Chromium will not
+     start an over-tall diagram in the space left on the current page, so an
+     uncapped flowchart (they run to 2500px in a narrow column) prints a blank
+     page, then an empty bordered box, then the diagram — six such pages in the
+     executor design doc alone. `width/height: auto` with both max-* set is what
+     makes the browser scale it proportionally instead of squashing it.
+     A diagram that ends up too small to read is a diagram that is too tall for
+     paper: split it, or lay it out left-to-right. */
+  .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/dist/danieldeusing-design.min.css

@@ -1,2 +1,2 @@
-/*! danieldeusing-design v0.1.4 | MIT | https://github.com/danieldeusing/danieldeusing-design */
-*,*::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;--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;--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;--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;--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}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: 0.75rem;line-height: 1.5;overflow-x: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}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)}.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:hover{box-shadow: 0 0 28px var(--glow);transform: translateY(-2px)}.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: 0;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)}.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: 5px;background: #b42318;color: #fff}.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)}}.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)}.ls-row{display: flex;align-items: baseline;gap: 0.9rem}.ls-perm{color: var(--muted-foreground);font-size: 0.72rem;letter-spacing: 0}.ls-row--sub .ls-name{padding-left: 1rem}.ls-panel{min-width: 17rem;left: auto !important;right: 0}#nav{position: relative}.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>.dropdown{display: none}.mobile-nav{display: flex;flex-direction: column}.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)}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}}
+/*! danieldeusing-design v0.1.6 | MIT | https://github.com/danieldeusing/danieldeusing-design */
+*,*::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;--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;--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;--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;--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}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: 0.75rem;line-height: 1.5;overflow-x: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}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)}.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:hover{box-shadow: 0 0 28px var(--glow);transform: translateY(-2px)}.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: 0;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)}.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: 5px;background: #b42318;color: #fff}.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)}}.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)}.ls-row{display: flex;align-items: baseline;gap: 0.9rem}.ls-perm{color: var(--muted-foreground);font-size: 0.72rem;letter-spacing: 0}.ls-row--sub .ls-name{padding-left: 1rem}.ls-panel{min-width: 17rem;left: auto !important;right: 0}#nav{position: relative}.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>.dropdown{display: none}.mobile-nav{display: flex;flex-direction: column}.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)}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],th[data-tip]{border-bottom: 1px dotted var(--muted-foreground)}#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: 4px;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,.anim-toggle,.cursor-block,.term-caret,.ascii-rule,.toc,#ddtip{display: none !important}[data-tip]{cursor: auto}span[data-tip],th[data-tip]{border-bottom: 0}.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}.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

@@ -1,6 +1,6 @@
 {
   "name": "@danieldeusing/design",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "The danieldeusing terminal design system \u2014 framework-agnostic CSS tokens, components, and a vanilla-JS runtime for the CRT/JetBrains-Mono look used across danieldeusing.de, seedr, and briefs.",
   "type": "module",
   "license": "MIT",

package/runtime/index.js

@@ -16,3 +16,4 @@ export * from "./dropdown.js";
 export * from "./anim.js";
 export * from "./terminal.js";
 export * from "./nav.js";
+export * from "./tooltip.js";

package/runtime/terminal.js

@@ -19,6 +19,10 @@
  * After the initial on-screen sections finish, it sets window.termContentDone
  * and dispatches a "term:contentdone" event — a hook for chaining a follow-up
  * animation (e.g. a nav that "runs" once the page has finished printing).
+ *
+ * On `beforeprint` the whole session is fast-forwarded, so a page printed while
+ * it is still typing prints complete. src/print.css covers the CSS half of this
+ * (nothing stays hidden); only the truncated prompt text needs JS.
  */
 
 export function initTerminal() {
@@ -103,7 +107,25 @@ export function initTerminal() {
     sequence = sequence.then(() => playSection(section));
   };
 
+  // Printing must never show a half-typed page. src/print.css forces the
+  // revealed state for everything CSS can reach, but a prompt caught mid-type
+  // has been truncated in the DOM — no stylesheet can put those characters
+  // back. Snapshot the text up front and restore it synchronously when the
+  // browser announces a print.
+  const finishForPrint = () => {
+    document.querySelectorAll("[data-term] .prompt").forEach((prompt) => {
+      if (prompt.dataset.termText !== undefined) prompt.textContent = prompt.dataset.termText;
+      prompt.classList.add("term-live");
+    });
+    document.querySelectorAll("[data-term] [data-term-out]").forEach((chunk) => chunk.classList.add("term-show"));
+  };
+
   const start = () => {
+    document.querySelectorAll("[data-term] .prompt").forEach((prompt) => {
+      prompt.dataset.termText = (prompt.textContent || "").trim();
+    });
+    window.addEventListener("beforeprint", finishForPrint);
+
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {

package/runtime/tooltip.js

@@ -0,0 +1,54 @@
+/*
+ * tooltip.js — viewport-clamped hover/focus tooltips for `[data-tip]`.
+ *
+ * Markup contract:
+ *   <span data-tip="Explanation shown on hover">metric</span>
+ *
+ * One singleton panel (`#ddtip`, styled in src/tooltip.css) is appended to
+ * <body> and positioned with `position: fixed`, so it escapes every overflow/
+ * clip context and always renders on top. Placement prefers below the anchor,
+ * flips above when there is no room, and clamps horizontally to the viewport —
+ * a tooltip must never be cut off. Event delegation means dynamically rendered
+ * [data-tip] nodes just work.
+ */
+export function initTooltips() {
+  if (document.getElementById("ddtip")) return;
+  const tip = document.createElement("div");
+  tip.id = "ddtip";
+  tip.setAttribute("role", "tooltip");
+  document.body.appendChild(tip);
+
+  let anchor = null;
+  function show(el) {
+    anchor = el;
+    tip.textContent = el.getAttribute("data-tip");
+    tip.style.display = "block";
+    tip.style.left = "0px";
+    tip.style.top = "0px";
+    const margin = 8;
+    const r = el.getBoundingClientRect();
+    const t = tip.getBoundingClientRect();
+    const x = Math.min(Math.max(r.left, margin), window.innerWidth - t.width - margin);
+    let y = r.bottom + 6;
+    if (y + t.height > window.innerHeight - margin) y = r.top - t.height - 6;
+    if (y < margin) y = margin;
+    tip.style.left = x + "px";
+    tip.style.top = y + "px";
+  }
+  function hide() {
+    anchor = null;
+    tip.style.display = "none";
+  }
+
+  document.addEventListener("mouseover", (event) => {
+    const el = event.target.closest("[data-tip]");
+    if (el) show(el);
+    else if (anchor) hide();
+  });
+  document.addEventListener("focusin", (event) => {
+    const el = event.target.closest("[data-tip]");
+    if (el) show(el);
+  });
+  document.addEventListener("focusout", hide);
+  document.addEventListener("scroll", () => anchor && show(anchor), true);
+}

package/src/index.css

@@ -3,8 +3,9 @@
  *
  * The no-Tailwind entry point. Import this one file and you get the full
  * terminal theme: a minimal reset, the four-theme token set, the document base,
- * and every component primitive. Works in plain HTML, React, Angular, Vue, a
- * Tauri webview — anywhere CSS @import is understood, with no build step.
+ * every component primitive, and the print layer. Works in plain HTML, React,
+ * Angular, Vue, a Tauri webview — anywhere CSS @import is understood, with no
+ * build step.
  *
  *   import "@danieldeusing/design";          // package "." export
  *   <link rel="stylesheet" href=".../dist/danieldeusing-design.css">  // CDN
@@ -18,3 +19,5 @@
 @import "./base.css";
 @import "./components.css";
 @import "./chrome.css";
+@import "./tooltip.css";
+@import "./print.css";

package/src/print.css

@@ -0,0 +1,351 @@
+/*
+ * danieldeusing-design — print layer.
+ *
+ * Paper is a different device, not a narrow screen. This layer strips the parts
+ * of the terminal look that only exist to sell "a CRT is running" — scanlines,
+ * phosphor glow, sticky chrome, the reveal animation — and lays the content out
+ * as a document: black on white, 12px body text, sane page breaks.
+ *
+ * Load LAST (index.css imports it after every other layer) so its token
+ * overrides win on source order without needing !important on each one.
+ *
+ * Three things here are load-bearing and easy to lose in a refactor:
+ *
+ *   1. The terminal reveal is forced open. runtime/terminal.js only reveals a
+ *      [data-term-out] once its section scrolls into view, so a long page that
+ *      is printed straight after load has most of its content sitting at
+ *      visibility:hidden. Printing it would silently produce blank pages — the
+ *      reader only finds out on paper. Everything is forced visible here
+ *      regardless of animation state.
+ *   2. `zoom` is reset. Pages that use the resolution-independent zoom trick
+ *      (html.style.zoom = innerWidth / 1920) carry that multiplier into the
+ *      print box, which is what makes a printout come out oversized.
+ *   3. Mermaid bakes the ACTIVE theme's colours into the SVG at render time, so
+ *      a diagram rendered under `green`/`mono` is dark-on-dark on paper no
+ *      matter what the page tokens say. The SVG parts are repainted below.
+ */
+
+@media print {
+  @page {
+    margin: 14mm 12mm;
+  }
+
+  /* ── ink-frugal palette, whatever theme is on screen ────────────────────
+     `html[data-theme]` matches the specificity of the themed token blocks in
+     tokens.css and comes later in the bundle, so it wins for every theme. */
+  :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;
+  }
+
+  /* ── document metrics ──────────────────────────────────────────────────
+     The rem baseline is pinned so the design's rem scale lands where it was
+     drawn, and the body size is stated in px so it is 12px on paper whatever
+     the browser's default font size is. `zoom` is a screen-only device. */
+  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;
+  }
+
+  /* CRT scanline overlay: a fixed, full-viewport gradient — on paper it is a
+     grey wash over the page. */
+  body::after {
+    display: none !important;
+  }
+
+  /* ── nothing animates on paper ─────────────────────────────────────────
+     Also the mechanism that un-hides the terminal reveal: the keyframes use
+     `both`, so killing the animation restores the element's own opacity. */
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+    text-shadow: none !important;
+    box-shadow: none !important;
+  }
+
+  /* ── the reveal must never decide what lands on paper ──────────────────
+     See note 1 at the top of this file. */
+  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;
+  }
+
+  /* ── screen-only chrome ────────────────────────────────────────────────
+     .toc is the "On this page" navigator: a screen affordance with no meaning
+     on paper, and the first thing that makes a printout look broken. */
+  header.bar,
+  footer.status,
+  .site-nav,
+  .nav-burger,
+  .mobile-nav,
+  .mobile-footer,
+  .skip-link,
+  .dropdown,
+  .dropdown-panel,
+  .anim-toggle,
+  .cursor-block,
+  .term-caret,
+  .ascii-rule,
+  .toc,
+  #ddtip {
+    display: none !important;
+  }
+
+  [data-tip] {
+    cursor: auto;
+  }
+  span[data-tip],
+  th[data-tip] {
+    border-bottom: 0;
+  }
+
+  /* ── layout: the page is the column ────────────────────────────────────
+     .wrap/.layout/.content are the documentation-template vocabulary shipped
+     in templates/documentation.html. */
+  .wrap {
+    max-width: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+  .layout {
+    display: block !important;
+  }
+  .content {
+    min-width: 0;
+  }
+
+  /* ── heading hierarchy against a 12px body ─────────────────────────────
+     24 / 18 / 16 / 14 px. !important because page-level rules give these
+     classes a higher specificity than a bare element selector. */
+  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;
+  }
+
+  /* ── page breaks ───────────────────────────────────────────────────────
+     A heading (or a `$ command` section header) must never be the last thing
+     on a page. Tables break between rows and repeat their header; everything
+     that reads as one unit stays together. */
+  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;
+  }
+  /* NOT svg. A mermaid flowchart is routinely taller than a printed page;
+     `break-inside: avoid` on the SVG pushes it past the page boundary while its
+     wrapper stays behind, which prints an entire page as an empty bordered box.
+     Let the SVG break where the wrapper breaks. */
+  svg {
+    break-inside: auto;
+  }
+  thead {
+    display: table-header-group;
+  }
+
+  /* ── nothing scrolls on paper ──────────────────────────────────────────
+     An overflow-x container has no scrollbar in print: whatever sits past the
+     right edge is simply gone. Let it wrap instead. */
+  .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;
+  }
+  /* `overflow-wrap: break-word` and NOT `anywhere`: `anywhere` also shrinks a
+     cell's min-content width to one character, and the auto table layout then
+     collapses a short column to nothing ("Orchestrator" set as "Orche/strat/or"
+     down a 6-character column). Only the elements that actually hold
+     unbreakable strings — paths, URLs, identifiers — get to break anywhere. */
+  th,
+  td {
+    overflow-wrap: break-word;
+    white-space: normal !important;
+  }
+  td code,
+  th code,
+  td a,
+  th a {
+    overflow-wrap: anywhere;
+  }
+
+  /* ── links read as text ────────────────────────────────────────────────
+     The URL is deliberately NOT printed after the link. These are internal
+     documents whose links are mostly in-page anchors and hosts already named
+     in the prose; appending every href would add noise and pages without
+     adding information. To turn it on, add:
+       a[href^="http"]::after { content: " (" attr(href) ")"; } */
+  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 diagrams ──────────────────────────────────────────────────
+     See note 3 at the top of this file: the palette is baked into the SVG at
+     render time, so a diagram rendered under a dark theme prints as dark
+     boxes with invisible labels. Repaint the standard mermaid parts. */
+  /* Every diagram is scaled to fit ONE page. Not cosmetic: Chromium will not
+     start an over-tall diagram in the space left on the current page, so an
+     uncapped flowchart (they run to 2500px in a narrow column) prints a blank
+     page, then an empty bordered box, then the diagram — six such pages in the
+     executor design doc alone. `width/height: auto` with both max-* set is what
+     makes the browser scale it proportionally instead of squashing it.
+     A diagram that ends up too small to read is a diagram that is too tall for
+     paper: split it, or lay it out left-to-right. */
+  .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/src/tailwind.css

@@ -18,6 +18,8 @@
 @import "./base.css";
 @import "./components.css";
 @import "./chrome.css";
+@import "./tooltip.css";
+@import "./print.css";
 
 @theme inline {
   --color-background: var(--background);

package/src/tooltip.css

@@ -0,0 +1,16 @@
+/*
+ * tooltip.css — styles for the [data-tip] tooltip system (runtime/tooltip.js).
+ * The panel is a body-level singleton with position:fixed — it can never be
+ * clipped by overflow containers and always sits on top.
+ */
+[data-tip] { cursor: help; }
+span[data-tip], th[data-tip] { border-bottom: 1px dotted var(--muted-foreground); }
+
+#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: 4px;
+  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);
+}