Only the lines for the libraries the app uses. .credit-v-design writes the design system's own version
(--mek-version), so it's never stale; the others are written in (an update workflow can keep them). Static: no
fetch, nothing recorded on a press. Above the page, under dialogs, tooltips and toasts (--z-sticky). Tucked, its
12px sit in the page's side gutter, so the page needn't make room for it. .held holds it in its box instead of the
window (a demo, a frame). Off paper. Games put a quiet foot in their pause or settings screen instead of a tab over the play: .credit-list.
It overrides nothing of the flyout, button or box: .credit is a wrapper of its own round a plain .flyout, so it
looks the same in a project that links the components unlayered (css/components.css) as in one on mek.css. */
@layer mek.parts {
.credit { --credit-peek: 12px; --credit-off: var(--line-hover);
position: fixed; z-index: var(--z-sticky); right: env(safe-area-inset-right); bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
.credit.held { position: absolute; }
/* The tab: a 36px square (the icon button's), moved only by translate (nothing else sets it, so nothing overrides
it): out, 8px of it (its right corners) past the edge, so only its left side steps out of the edge; tucked, all but
--credit-peek (12px) of it. So it travels 16px, and slides a whole pixel every display frame (--px-frame, 60fps):
16 frames, about a quarter of a second, smooth and never between pixels. Change the size or the peek, change the
16 with them. */
.credit-tab { box-sizing: border-box; width: 36px; height: 36px; justify-content: center;
--ink: var(--text-soft); --ink-to: var(--text-strong); color: var(--ink);
translate: calc(100% - var(--credit-peek)) 0; transition: translate calc(16 * var(--px-frame)) steps(16, end); }
.credit-tab:is(:hover, :focus-visible, [aria-expanded="true"]) { translate: var(--space-2) 0; } /* out: its right corners 8px past the edge */
.credit-mark { display: block; width: 17px; height: 17px; fill: currentColor; shape-rendering: crispEdges; }
/* The panel: the flyout's (it opens above, held to the window's right), its lines in a column. "Powered by:" is its
heading (the flyout moves a first .t-label into its head line). */
.credit-panel { flex-direction: column; font-size: var(--text-sm); }
.credit-panel p { margin: 0; white-space: nowrap; }
.credit-line { display: flex; align-items: center; gap: var(--space-2); color: var(--text); }
.credit-lib { flex: none; width: 16px; height: 16px; fill: var(--credit-off); shape-rendering: crispEdges; } /* the lit square is currentColor, the rest this fill */
.credit-v { margin-inline-start: auto; padding-inline-start: var(--space-4); font: var(--text-crisp)/18px var(--font-mono); color: var(--text-muted); }
.credit-v-design::after { content: var(--mek-version); }
.credit-by { color: var(--text-muted); }
/* In a game: no tab over the play; a quiet foot in its pause or settings screen, centred on the screen's own line, the
quietest thing there: a 1px rule, MEK.txt's mark with "Powered by MEK.txt" (the link, its arrow), and the versions
in one dim Mono line under it. The page sets the room above it.