@certrev/cert-block 1.1.1 → 1.2.0-canary.1

package/src/reader/logo.ts

@@ -0,0 +1,28 @@
+/**
+ * The CertREV mark the reader face paints in the card cap (18px) and the memo footer (17px): the Liquid
+ * `certrev-reader-logo` snippet's inline SVG data URI, byte for byte, so a Builder page and a Shopify page carry the
+ * same image. White on a dark accent, black (the demo's logo-mono) on a light one.
+ *
+ * The four `d` strings below are the snippet's, copied rather than retyped; the golden tests compare the whole
+ * element, so a slipped digit fails there.
+ */
+import { escapeHtml } from '../components/escape.js'
+
+export type ReaderLogoInk = 'white' | 'mono'
+
+const MARK_PATHS: readonly string[] = [
+	'M67.59 221.77L138.77 292.95C145.8 299.98 145.8 311.44 138.77 318.47L123.02 334.22C116 341.25 104.54 341.25 97.5 334.22L26.32 263.04C19.29 256.01 19.29 244.55 26.32 237.52L42.07 221.77C49.1 214.74 60.56 214.74 67.59 221.77Z',
+	'M96.79 335.08L81.12 319.42C73.8 312.1 73.8 300.23 81.12 292.92L315.88 58.16C323.2 50.85 335.06 50.85 342.38 58.16L358.04 73.83C365.36 81.14 365.36 93.01 358.04 100.33L123.29 335.08C115.97 342.4 104.1 342.4 96.79 335.08Z',
+	'M203.5 335.14L187.83 319.48C180.52 312.16 180.52 300.29 187.83 292.98L315.88 164.93C323.2 157.62 335.06 157.62 342.38 164.93L358.04 180.6C365.36 187.92 365.36 199.78 358.04 207.1L230 335.14C222.68 342.46 210.82 342.46 203.5 335.14Z',
+	'M310.21 335.2L294.54 319.54C287.23 312.22 287.23 300.36 294.54 293.04L315.88 271.71C323.2 264.39 335.06 264.39 342.38 271.71L358.04 287.37C365.36 294.69 365.36 306.55 358.04 313.87L336.71 335.2C329.39 342.52 317.53 342.52 310.21 335.2Z',
+]
+
+/** The `<img>` for the mark: `size` is the pixel width and height, `alt` is '' where the words carry the meaning. */
+export function readerLogo(ink: ReaderLogoInk, size: number, alt: string): string {
+	const fill = ink === 'white' ? 'ffffff' : '000000'
+	const paths = MARK_PATHS.map((d) => `%3Cpath fill='%23${fill}' d='${d}'/%3E`).join('')
+	return (
+		`<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 375'%3E${paths}%3C/svg%3E" ` +
+		`alt="${escapeHtml(alt)}" width="${escapeHtml(String(size))}" height="${escapeHtml(String(size))}" decoding="async">`
+	)
+}

package/src/reader/reader-css.generated.ts

@@ -0,0 +1,5 @@
+// biome-ignore-all format: generated file
+// biome-ignore-all lint: generated file
+// GENERATED by scripts/refresh-reader.mjs from src/reader/reader.css (the portal reader stylesheet, byte for
+// byte). Do not edit: run the script. reader-css.test.ts asserts this string equals the .css file.
+export const READER_CSS = "/* CERTREV-READER-GEN:BEGIN */\n/* GENERATED by scripts/build-cert-reader-css.mjs from src/lib/cert-render/reader/site-snapshot/ (certrev.com,\n * component Reader, \"What your reader sees\"). DO NOT EDIT: run `pnpm build:cert-reader-css`. The face is driven by\n * four variables the Liquid root sets inline: --cr-ba accent, --cr-ba-fg accent foreground, --cr-br corner, --cr-bf\n * font. */\n.certrev-reader {\n\tcolor: #141414;\n\tfont-family: var(--cr-bf);\n\tfont-size: 16px;\n\tline-height: 1.65;\n\t-webkit-font-smoothing: antialiased;\n\ttext-rendering: optimizelegibility;\n}\n.certrev-reader,\n.certrev-reader *,\n.certrev-reader *:before,\n.certrev-reader *:after {\n\tbox-sizing: border-box;\n}\n.certrev-reader .certrev-r-card {\n\tz-index: 1;\n\tborder: 1px solid #14141421;\n\tborder-radius: calc(var(--cr-br) * 0.7);\n\tbackground: #fff;\n\tflex-shrink: 0;\n\tmargin: 12px 0 0;\n\tposition: relative;\n\toverflow: hidden;\n}\n.certrev-reader .certrev-r-card.pad {\n\tpadding: 15px 18px;\n\toverflow: visible;\n}\n.certrev-reader .certrev-r-card.pad .certrev-r-bys {\n\tgap: 14px;\n}\n.certrev-reader .certrev-r-cap {\n\twhite-space: nowrap;\n\tbackground: var(--cr-ba);\n\tcolor: var(--cr-ba-fg);\n\tfont-family: \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n\tletter-spacing: 0.14em;\n\ttext-transform: uppercase;\n\talign-items: center;\n\tgap: 11px;\n\tpadding: 14px 20px;\n\tfont-size: 10.5px;\n\tfont-weight: 700;\n\tdisplay: flex;\n}\n.certrev-reader .certrev-r-cap.center {\n\tletter-spacing: 0.16em;\n\tjustify-content: center;\n\tpadding: 12px;\n}\n.certrev-reader .certrev-r-cap img {\n\tflex-shrink: 0;\n\twidth: 18px;\n\theight: 18px;\n\tdisplay: block;\n}\n.certrev-reader .certrev-r-cap-body {\n\tpadding: 15px 18px 13px;\n}\n.certrev-reader .certrev-r-bys {\n\tgrid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);\n\tgap: 20px;\n\tdisplay: grid;\n}\n.certrev-reader .certrev-r-by {\n\talign-items: flex-start;\n\tgap: 12px;\n\tdisplay: flex;\n}\n.certrev-reader .certrev-r-by > div {\n\tmin-width: 0;\n}\n.certrev-reader .certrev-r-by b {\n\tfont-size: 14.5px;\n\tfont-weight: 700;\n\tline-height: 1.3;\n\tdisplay: block;\n}\n.certrev-reader .certrev-r-by em {\n\tcolor: #14141495;\n\tmargin-top: 4px;\n\tfont-size: 12.5px;\n\tfont-style: normal;\n\tline-height: 1.45;\n\tdisplay: block;\n}\n.certrev-reader .certrev-r-role {\n\tfont-family: \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n\tletter-spacing: 0.14em;\n\ttext-transform: uppercase;\n\tcolor: #14141495;\n\tmargin-top: 9px;\n\tfont-size: 9px;\n\tdisplay: block;\n}\n.certrev-reader .certrev-r-role.on {\n\tcolor: #141414;\n\tfont-weight: 700;\n}\n.certrev-reader .certrev-r-face {\n\tbackground: #14141412;\n\twidth: 42px;\n\theight: 42px;\n\tcolor: #141414;\n\tborder-radius: 50%;\n\tflex-shrink: 0;\n\tdisplay: block;\n\toverflow: hidden;\n}\n.certrev-reader .certrev-r-face.sm {\n\twidth: 36px;\n\theight: 36px;\n}\n.certrev-reader .certrev-r-face.lg {\n\twidth: 46px;\n\theight: 46px;\n}\n.certrev-reader .certrev-r-face svg {\n\tfill: currentColor;\n\topacity: 0.38;\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: block;\n}\n.certrev-reader .certrev-r-rule {\n\tbackground: #14141421;\n\theight: 1px;\n\tmargin: 15px 0 12px;\n}\n.certrev-reader .certrev-r-foot {\n\tjustify-content: space-between;\n\talign-items: center;\n\tgap: 16px;\n\tfont-size: 12.5px;\n\tdisplay: flex;\n}\n.certrev-reader .certrev-r-foot span {\n\twhite-space: nowrap;\n}\n.certrev-reader .certrev-r-foot em {\n\tfont-style: normal;\n\tfont-family: \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n\tletter-spacing: 0.14em;\n\ttext-transform: uppercase;\n\tcolor: #14141495;\n\tmargin-right: 9px;\n\tfont-size: 9.5px;\n}\n.certrev-reader .certrev-r-foot span + span {\n\tcolor: #14141495;\n}\n.certrev-reader .certrev-r-kick {\n\tfont-family: \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n\tletter-spacing: 0.16em;\n\ttext-transform: uppercase;\n\tcolor: #14141495;\n\tmargin-bottom: 14px;\n\tfont-size: 9.5px;\n}\n.certrev-reader .certrev-r-memo {\n\tgap: 15px;\n\tdisplay: flex;\n}\n.certrev-reader .certrev-r-memo > div {\n\tflex: 1;\n\tmin-width: 0;\n}\n.certrev-reader .certrev-r-memo-name {\n\tcolor: #14141495;\n\tmargin-bottom: 11px;\n\tfont-size: 15px;\n}\n.certrev-reader .certrev-r-memo-name b {\n\tcolor: #141414;\n\tfont-weight: 700;\n}\n.certrev-reader blockquote {\n\tborder-left: 3px solid var(--cr-ba);\n\tcolor: #141414b8;\n\ttext-wrap: pretty;\n\tmargin: 0;\n\tpadding-left: 16px;\n\tfont-size: 13.5px;\n\tfont-style: italic;\n\tline-height: 1.55;\n}\n.certrev-reader .certrev-r-links {\n\tgap: 22px;\n\tmargin-top: 14px;\n\tdisplay: flex;\n}\n.certrev-reader .certrev-r-links a {\n\tcolor: #141414;\n\twhite-space: nowrap;\n\tfont-size: 13.5px;\n\tfont-weight: 700;\n\ttext-decoration: none;\n}\n.certrev-reader .certrev-r-links a:hover {\n\tcolor: var(--cr-ba);\n}\n.certrev-reader .certrev-r-vfoot {\n\talign-items: baseline;\n\tgap: 16px;\n\tdisplay: flex;\n}\n.certrev-reader .certrev-r-vfoot .certrev-r-scope {\n\tflex: 1;\n\tmin-width: 0;\n\tmargin-top: 0;\n}\n.certrev-reader .certrev-r-verified {\n\tcolor: #141414b8;\n\tflex-shrink: 0;\n\talign-items: center;\n\tgap: 9px;\n\tfont-size: 12.5px;\n\tdisplay: inline-flex;\n}\n.certrev-reader .certrev-r-verified img {\n\tflex-shrink: 0;\n\twidth: 17px;\n\theight: 17px;\n\tdisplay: block;\n}\n.certrev-reader .certrev-r-verified b {\n\tfont-family: \"Plus Jakarta Sans\", -apple-system, system-ui, Helvetica, Arial, sans-serif;\n\tfont-weight: 800;\n}\n.certrev-reader .certrev-r-scope {\n\tcolor: #14141495;\n\ttext-wrap: pretty;\n\tmargin-top: 9px;\n\tfont-size: 12.5px;\n\tline-height: 1.5;\n}\n.certrev-reader .certrev-r-scope em {\n\tfont-style: normal;\n\tfont-family: \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n\tletter-spacing: 0.1em;\n\ttext-transform: uppercase;\n\tfont-size: 9.5px;\n}\n.certrev-reader .certrev-r-side {\n\tz-index: 1;\n\tfloat: right;\n\tborder: 1px solid #14141421;\n\tborder-radius: var(--cr-br);\n\twidth: 268px;\n\tbox-shadow: 0 4px 18px #14141412;\n\tbackground: #fff;\n\tmargin: 2px 0 18px 28px;\n\tposition: relative;\n\toverflow: hidden;\n}\n.certrev-reader .certrev-r-side-body {\n\tpadding: 18px;\n}\n.certrev-reader .certrev-r-side-body .certrev-r-by b {\n\tfont-size: 14px;\n}\n.certrev-reader .certrev-r-side-body p {\n\tcolor: #141414b8;\n\ttext-wrap: pretty;\n\tmargin: 15px 0 0;\n\tfont-size: 13px;\n\tline-height: 1.55;\n}\n.certrev-reader .certrev-r-side-body blockquote {\n\tmargin-top: 15px;\n\tpadding-left: 15px;\n\tfont-size: 13.5px;\n\tline-height: 1.55;\n}\n.certrev-reader .certrev-r-side-body .certrev-r-scope {\n\tmargin-top: 15px;\n\tfont-size: 11.5px;\n}\n.certrev-reader .certrev-r-side-links {\n\tborder-top: 1px solid #14141421;\n\tgrid-template-columns: 1fr 1fr;\n\tdisplay: grid;\n}\n.certrev-reader .certrev-r-side-links a {\n\ttext-align: center;\n\tcolor: #141414;\n\tpadding: 13px;\n\tfont-size: 13px;\n\tfont-weight: 700;\n\ttext-decoration: none;\n}\n.certrev-reader .certrev-r-side-links a:first-child {\n\tborder-right: 1px solid #14141421;\n}\n.certrev-reader .certrev-r-side-links a:hover {\n\tcolor: var(--cr-ba);\n}\n.certrev-reader .certrev-r-pill {\n\tz-index: 3;\n\tbackground: var(--cr-ba);\n\tcolor: var(--cr-ba-fg);\n\tborder-radius: 999px;\n\talign-items: center;\n\tgap: 13px;\n\tpadding: 12px 21px;\n\tdisplay: inline-flex;\n\tposition: absolute;\n\tbottom: 26px;\n\tright: 26px;\n\tbox-shadow: 0 10px 26px #14141429;\n}\n.certrev-reader .certrev-r-pill span {\n\twhite-space: nowrap;\n\tfont-family: \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n\tletter-spacing: 0.14em;\n\ttext-transform: uppercase;\n\tfont-size: 10.5px;\n\tfont-weight: 700;\n}\n.certrev-reader .certrev-r-pill a {\n\tcolor: inherit;\n\ttext-underline-offset: 3px;\n\tfont-size: 13.5px;\n\tfont-weight: 700;\n\ttext-decoration: underline;\n}\n.certrev-reader .certrev-r-pill i {\n\topacity: 0.42;\n\tfont-style: normal;\n}\n@media (max-width: 820px) {\n\t.certrev-reader .certrev-r-side {\n\t\tfloat: none;\n\t\twidth: auto;\n\t\tmargin: 20px 0;\n\t}\n\t.certrev-reader .certrev-r-bys {\n\t\tgrid-template-columns: 1fr;\n\t\tgap: 18px;\n\t}\n\t.certrev-reader .certrev-r-cap {\n\t\tletter-spacing: 0.1em;\n\t\tpadding: 12px 16px;\n\t\tfont-size: 9.5px;\n\t}\n\t.certrev-reader .certrev-r-cap-body,\n\t.certrev-reader .certrev-r-card.pad {\n\t\tpadding: 16px 18px;\n\t}\n\t.certrev-reader .certrev-r-pill {\n\t\tgap: 10px;\n\t\tpadding: 10px 16px;\n\t\tbottom: 20px;\n\t\tright: 20px;\n\t}\n}\n@media (max-width: 560px) {\n\t.certrev-reader .certrev-r-links {\n\t\tflex-direction: column;\n\t\tgap: 9px;\n\t}\n\t.certrev-reader .certrev-r-foot {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 6px;\n\t}\n\t.certrev-reader .certrev-r-foot span {\n\t\twhite-space: normal;\n\t}\n\t.certrev-reader .certrev-r-vfoot {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 10px;\n\t}\n\t.certrev-reader .certrev-r-vfoot .certrev-r-scope {\n\t\twidth: 100%;\n\t}\n\t.certrev-reader .certrev-r-cap {\n\t\twhite-space: normal;\n\t\tletter-spacing: 0.08em;\n\t\tpadding: 11px 14px;\n\t\tfont-size: 9px;\n\t}\n\t.certrev-reader .certrev-r-cap-body,\n\t.certrev-reader .certrev-r-card.pad {\n\t\tpadding: 14px 15px;\n\t}\n\t.certrev-reader .certrev-r-foot {\n\t\tflex-wrap: wrap;\n\t\tgap: 8px 14px;\n\t}\n\t.certrev-reader .certrev-r-links {\n\t\tflex-wrap: wrap;\n\t\tgap: 16px;\n\t}\n\t.certrev-reader .certrev-r-vfoot {\n\t\tflex-wrap: wrap;\n\t\tgap: 10px;\n\t}\n\t.certrev-reader .certrev-r-face.lg {\n\t\twidth: 38px;\n\t\theight: 38px;\n\t}\n\t.certrev-reader .certrev-r-side {\n\t\tmargin: 16px 0;\n\t}\n\t.certrev-reader .certrev-r-side-links a {\n\t\tpadding: 12px 8px;\n\t}\n\t.certrev-reader .certrev-r-pill {\n\t\ttext-align: center;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: center;\n\t\tgap: 6px 12px;\n\t\tpadding: 11px 14px;\n\t\tbottom: 14px;\n\t\tleft: 14px;\n\t\tright: 14px;\n\t}\n\t.certrev-reader .certrev-r-pill span {\n\t\twhite-space: normal;\n\t}\n}\n/* Theme-bleed armor (hand-written, not from the snapshot; see build-cert-reader-css.mjs). */\n.certrev-reader img {\n\tmargin: 0 !important;\n\tmax-width: 100% !important;\n\tfloat: none !important;\n}\n.certrev-reader a {\n\tbackground-image: none !important;\n}\n.certrev-reader .certrev-r-links a,\n.certrev-reader .certrev-r-side-links a {\n\ttext-decoration: none !important;\n}\n.certrev-reader .certrev-r-links a:not(:hover),\n.certrev-reader .certrev-r-side-links a:not(:hover) {\n\tcolor: #141414 !important;\n}\n.certrev-reader .certrev-r-links a:hover,\n.certrev-reader .certrev-r-side-links a:hover {\n\tcolor: var(--cr-ba) !important;\n}\n.certrev-reader .certrev-r-pill a {\n\tcolor: inherit !important;\n\ttext-decoration: underline !important;\n}\n.certrev-reader .certrev-r-face img {\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n.certrev-reader .certrev-r-bys.solo {\n\tgrid-template-columns: minmax(0, 1fr);\n}\n.certrev-reader .certrev-r-foot a {\n\tcolor: inherit !important;\n\ttext-decoration: underline !important;\n}\n.certrev-reader .certrev-r-pill {\n\tposition: fixed;\n\tmargin-bottom: env(safe-area-inset-bottom, 0px);\n}\n.certrev-memo-wrap[data-certrev-placement=\"rail\"] .certrev-reader .certrev-r-side {\n\tfloat: none;\n\twidth: auto;\n\tmargin: 0;\n}\n.certrev-memo-wrap[data-certrev-placement=\"body-fallback\"] .certrev-reader .certrev-r-side,\n.certrev-sidebar-wrap:not([data-certrev-placement]) .certrev-reader .certrev-r-side {\n\tfloat: none;\n\twidth: auto;\n\tmax-width: 360px;\n\tmargin: 0 auto;\n}\n.certrev-reader .certrev-r-side-links.single {\n\tgrid-template-columns: minmax(0, 1fr);\n}\n.certrev-reader .certrev-r-side-links.single a:first-child {\n\tborder-right: 0;\n}\n/* Reader-only font aliases (generated from the CERTREV-FONTS rules above: the same files and unicode ranges, only the family and\n * the weight range differ, so the reader paints weights the legacy card does not declare). */\n@font-face {\n\tfont-family: \"CertREV Reader Serif\";\n\tfont-style: normal;\n\tfont-weight: 400 700;\n\tfont-display: swap;\n\tsrc: url(\"https://assets.certrev.com/fonts/cert-playfair-latin-ext.woff2\") format(\"woff2\");\n\tunicode-range:\n\t\tU+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n\n@font-face {\n\tfont-family: \"CertREV Reader Serif\";\n\tfont-style: normal;\n\tfont-weight: 400 700;\n\tfont-display: swap;\n\tsrc: url(\"https://assets.certrev.com/fonts/cert-playfair-latin.woff2\") format(\"woff2\");\n\tunicode-range:\n\t\tU+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n\n@font-face {\n\tfont-family: \"CertREV Reader Serif\";\n\tfont-style: italic;\n\tfont-weight: 400 700;\n\tfont-display: swap;\n\tsrc: url(\"https://assets.certrev.com/fonts/cert-playfair-italic-latin-ext.woff2\") format(\"woff2\");\n\tunicode-range:\n\t\tU+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n\n@font-face {\n\tfont-family: \"CertREV Reader Serif\";\n\tfont-style: italic;\n\tfont-weight: 400 700;\n\tfont-display: swap;\n\tsrc: url(\"https://assets.certrev.com/fonts/cert-playfair-italic-latin.woff2\") format(\"woff2\");\n\tunicode-range:\n\t\tU+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n\n@font-face {\n\tfont-family: \"CertREV Reader Grotesk\";\n\tfont-style: normal;\n\tfont-weight: 400 800;\n\tfont-display: swap;\n\tsrc: url(\"https://assets.certrev.com/fonts/cert-jakarta-latin-ext.woff2\") format(\"woff2\");\n\tunicode-range:\n\t\tU+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n\n@font-face {\n\tfont-family: \"CertREV Reader Grotesk\";\n\tfont-style: normal;\n\tfont-weight: 400 800;\n\tfont-display: swap;\n\tsrc: url(\"https://assets.certrev.com/fonts/cert-jakarta-latin.woff2\") format(\"woff2\");\n\tunicode-range:\n\t\tU+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* CERTREV-READER-GEN:END */\n"

package/src/reader/reader.css

@@ -0,0 +1,550 @@
+/* CERTREV-READER-GEN:BEGIN */
+/* GENERATED by scripts/build-cert-reader-css.mjs from src/lib/cert-render/reader/site-snapshot/ (certrev.com,
+ * component Reader, "What your reader sees"). DO NOT EDIT: run `pnpm build:cert-reader-css`. The face is driven by
+ * four variables the Liquid root sets inline: --cr-ba accent, --cr-ba-fg accent foreground, --cr-br corner, --cr-bf
+ * font. */
+.certrev-reader {
+	color: #141414;
+	font-family: var(--cr-bf);
+	font-size: 16px;
+	line-height: 1.65;
+	-webkit-font-smoothing: antialiased;
+	text-rendering: optimizelegibility;
+}
+.certrev-reader,
+.certrev-reader *,
+.certrev-reader *:before,
+.certrev-reader *:after {
+	box-sizing: border-box;
+}
+.certrev-reader .certrev-r-card {
+	z-index: 1;
+	border: 1px solid #14141421;
+	border-radius: calc(var(--cr-br) * 0.7);
+	background: #fff;
+	flex-shrink: 0;
+	margin: 12px 0 0;
+	position: relative;
+	overflow: hidden;
+}
+.certrev-reader .certrev-r-card.pad {
+	padding: 15px 18px;
+	overflow: visible;
+}
+.certrev-reader .certrev-r-card.pad .certrev-r-bys {
+	gap: 14px;
+}
+.certrev-reader .certrev-r-cap {
+	white-space: nowrap;
+	background: var(--cr-ba);
+	color: var(--cr-ba-fg);
+	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+	letter-spacing: 0.14em;
+	text-transform: uppercase;
+	align-items: center;
+	gap: 11px;
+	padding: 14px 20px;
+	font-size: 10.5px;
+	font-weight: 700;
+	display: flex;
+}
+.certrev-reader .certrev-r-cap.center {
+	letter-spacing: 0.16em;
+	justify-content: center;
+	padding: 12px;
+}
+.certrev-reader .certrev-r-cap img {
+	flex-shrink: 0;
+	width: 18px;
+	height: 18px;
+	display: block;
+}
+.certrev-reader .certrev-r-cap-body {
+	padding: 15px 18px 13px;
+}
+.certrev-reader .certrev-r-bys {
+	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
+	gap: 20px;
+	display: grid;
+}
+.certrev-reader .certrev-r-by {
+	align-items: flex-start;
+	gap: 12px;
+	display: flex;
+}
+.certrev-reader .certrev-r-by > div {
+	min-width: 0;
+}
+.certrev-reader .certrev-r-by b {
+	font-size: 14.5px;
+	font-weight: 700;
+	line-height: 1.3;
+	display: block;
+}
+.certrev-reader .certrev-r-by em {
+	color: #14141495;
+	margin-top: 4px;
+	font-size: 12.5px;
+	font-style: normal;
+	line-height: 1.45;
+	display: block;
+}
+.certrev-reader .certrev-r-role {
+	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+	letter-spacing: 0.14em;
+	text-transform: uppercase;
+	color: #14141495;
+	margin-top: 9px;
+	font-size: 9px;
+	display: block;
+}
+.certrev-reader .certrev-r-role.on {
+	color: #141414;
+	font-weight: 700;
+}
+.certrev-reader .certrev-r-face {
+	background: #14141412;
+	width: 42px;
+	height: 42px;
+	color: #141414;
+	border-radius: 50%;
+	flex-shrink: 0;
+	display: block;
+	overflow: hidden;
+}
+.certrev-reader .certrev-r-face.sm {
+	width: 36px;
+	height: 36px;
+}
+.certrev-reader .certrev-r-face.lg {
+	width: 46px;
+	height: 46px;
+}
+.certrev-reader .certrev-r-face svg {
+	fill: currentColor;
+	opacity: 0.38;
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+.certrev-reader .certrev-r-rule {
+	background: #14141421;
+	height: 1px;
+	margin: 15px 0 12px;
+}
+.certrev-reader .certrev-r-foot {
+	justify-content: space-between;
+	align-items: center;
+	gap: 16px;
+	font-size: 12.5px;
+	display: flex;
+}
+.certrev-reader .certrev-r-foot span {
+	white-space: nowrap;
+}
+.certrev-reader .certrev-r-foot em {
+	font-style: normal;
+	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+	letter-spacing: 0.14em;
+	text-transform: uppercase;
+	color: #14141495;
+	margin-right: 9px;
+	font-size: 9.5px;
+}
+.certrev-reader .certrev-r-foot span + span {
+	color: #14141495;
+}
+.certrev-reader .certrev-r-kick {
+	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+	letter-spacing: 0.16em;
+	text-transform: uppercase;
+	color: #14141495;
+	margin-bottom: 14px;
+	font-size: 9.5px;
+}
+.certrev-reader .certrev-r-memo {
+	gap: 15px;
+	display: flex;
+}
+.certrev-reader .certrev-r-memo > div {
+	flex: 1;
+	min-width: 0;
+}
+.certrev-reader .certrev-r-memo-name {
+	color: #14141495;
+	margin-bottom: 11px;
+	font-size: 15px;
+}
+.certrev-reader .certrev-r-memo-name b {
+	color: #141414;
+	font-weight: 700;
+}
+.certrev-reader blockquote {
+	border-left: 3px solid var(--cr-ba);
+	color: #141414b8;
+	text-wrap: pretty;
+	margin: 0;
+	padding-left: 16px;
+	font-size: 13.5px;
+	font-style: italic;
+	line-height: 1.55;
+}
+.certrev-reader .certrev-r-links {
+	gap: 22px;
+	margin-top: 14px;
+	display: flex;
+}
+.certrev-reader .certrev-r-links a {
+	color: #141414;
+	white-space: nowrap;
+	font-size: 13.5px;
+	font-weight: 700;
+	text-decoration: none;
+}
+.certrev-reader .certrev-r-links a:hover {
+	color: var(--cr-ba);
+}
+.certrev-reader .certrev-r-vfoot {
+	align-items: baseline;
+	gap: 16px;
+	display: flex;
+}
+.certrev-reader .certrev-r-vfoot .certrev-r-scope {
+	flex: 1;
+	min-width: 0;
+	margin-top: 0;
+}
+.certrev-reader .certrev-r-verified {
+	color: #141414b8;
+	flex-shrink: 0;
+	align-items: center;
+	gap: 9px;
+	font-size: 12.5px;
+	display: inline-flex;
+}
+.certrev-reader .certrev-r-verified img {
+	flex-shrink: 0;
+	width: 17px;
+	height: 17px;
+	display: block;
+}
+.certrev-reader .certrev-r-verified b {
+	font-family: "Plus Jakarta Sans", -apple-system, system-ui, Helvetica, Arial, sans-serif;
+	font-weight: 800;
+}
+.certrev-reader .certrev-r-scope {
+	color: #14141495;
+	text-wrap: pretty;
+	margin-top: 9px;
+	font-size: 12.5px;
+	line-height: 1.5;
+}
+.certrev-reader .certrev-r-scope em {
+	font-style: normal;
+	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	font-size: 9.5px;
+}
+.certrev-reader .certrev-r-side {
+	z-index: 1;
+	float: right;
+	border: 1px solid #14141421;
+	border-radius: var(--cr-br);
+	width: 268px;
+	box-shadow: 0 4px 18px #14141412;
+	background: #fff;
+	margin: 2px 0 18px 28px;
+	position: relative;
+	overflow: hidden;
+}
+.certrev-reader .certrev-r-side-body {
+	padding: 18px;
+}
+.certrev-reader .certrev-r-side-body .certrev-r-by b {
+	font-size: 14px;
+}
+.certrev-reader .certrev-r-side-body p {
+	color: #141414b8;
+	text-wrap: pretty;
+	margin: 15px 0 0;
+	font-size: 13px;
+	line-height: 1.55;
+}
+.certrev-reader .certrev-r-side-body blockquote {
+	margin-top: 15px;
+	padding-left: 15px;
+	font-size: 13.5px;
+	line-height: 1.55;
+}
+.certrev-reader .certrev-r-side-body .certrev-r-scope {
+	margin-top: 15px;
+	font-size: 11.5px;
+}
+.certrev-reader .certrev-r-side-links {
+	border-top: 1px solid #14141421;
+	grid-template-columns: 1fr 1fr;
+	display: grid;
+}
+.certrev-reader .certrev-r-side-links a {
+	text-align: center;
+	color: #141414;
+	padding: 13px;
+	font-size: 13px;
+	font-weight: 700;
+	text-decoration: none;
+}
+.certrev-reader .certrev-r-side-links a:first-child {
+	border-right: 1px solid #14141421;
+}
+.certrev-reader .certrev-r-side-links a:hover {
+	color: var(--cr-ba);
+}
+.certrev-reader .certrev-r-pill {
+	z-index: 3;
+	background: var(--cr-ba);
+	color: var(--cr-ba-fg);
+	border-radius: 999px;
+	align-items: center;
+	gap: 13px;
+	padding: 12px 21px;
+	display: inline-flex;
+	position: absolute;
+	bottom: 26px;
+	right: 26px;
+	box-shadow: 0 10px 26px #14141429;
+}
+.certrev-reader .certrev-r-pill span {
+	white-space: nowrap;
+	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+	letter-spacing: 0.14em;
+	text-transform: uppercase;
+	font-size: 10.5px;
+	font-weight: 700;
+}
+.certrev-reader .certrev-r-pill a {
+	color: inherit;
+	text-underline-offset: 3px;
+	font-size: 13.5px;
+	font-weight: 700;
+	text-decoration: underline;
+}
+.certrev-reader .certrev-r-pill i {
+	opacity: 0.42;
+	font-style: normal;
+}
+@media (max-width: 820px) {
+	.certrev-reader .certrev-r-side {
+		float: none;
+		width: auto;
+		margin: 20px 0;
+	}
+	.certrev-reader .certrev-r-bys {
+		grid-template-columns: 1fr;
+		gap: 18px;
+	}
+	.certrev-reader .certrev-r-cap {
+		letter-spacing: 0.1em;
+		padding: 12px 16px;
+		font-size: 9.5px;
+	}
+	.certrev-reader .certrev-r-cap-body,
+	.certrev-reader .certrev-r-card.pad {
+		padding: 16px 18px;
+	}
+	.certrev-reader .certrev-r-pill {
+		gap: 10px;
+		padding: 10px 16px;
+		bottom: 20px;
+		right: 20px;
+	}
+}
+@media (max-width: 560px) {
+	.certrev-reader .certrev-r-links {
+		flex-direction: column;
+		gap: 9px;
+	}
+	.certrev-reader .certrev-r-foot {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 6px;
+	}
+	.certrev-reader .certrev-r-foot span {
+		white-space: normal;
+	}
+	.certrev-reader .certrev-r-vfoot {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 10px;
+	}
+	.certrev-reader .certrev-r-vfoot .certrev-r-scope {
+		width: 100%;
+	}
+	.certrev-reader .certrev-r-cap {
+		white-space: normal;
+		letter-spacing: 0.08em;
+		padding: 11px 14px;
+		font-size: 9px;
+	}
+	.certrev-reader .certrev-r-cap-body,
+	.certrev-reader .certrev-r-card.pad {
+		padding: 14px 15px;
+	}
+	.certrev-reader .certrev-r-foot {
+		flex-wrap: wrap;
+		gap: 8px 14px;
+	}
+	.certrev-reader .certrev-r-links {
+		flex-wrap: wrap;
+		gap: 16px;
+	}
+	.certrev-reader .certrev-r-vfoot {
+		flex-wrap: wrap;
+		gap: 10px;
+	}
+	.certrev-reader .certrev-r-face.lg {
+		width: 38px;
+		height: 38px;
+	}
+	.certrev-reader .certrev-r-side {
+		margin: 16px 0;
+	}
+	.certrev-reader .certrev-r-side-links a {
+		padding: 12px 8px;
+	}
+	.certrev-reader .certrev-r-pill {
+		text-align: center;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 6px 12px;
+		padding: 11px 14px;
+		bottom: 14px;
+		left: 14px;
+		right: 14px;
+	}
+	.certrev-reader .certrev-r-pill span {
+		white-space: normal;
+	}
+}
+/* Theme-bleed armor (hand-written, not from the snapshot; see build-cert-reader-css.mjs). */
+.certrev-reader img {
+	margin: 0 !important;
+	max-width: 100% !important;
+	float: none !important;
+}
+.certrev-reader a {
+	background-image: none !important;
+}
+.certrev-reader .certrev-r-links a,
+.certrev-reader .certrev-r-side-links a {
+	text-decoration: none !important;
+}
+.certrev-reader .certrev-r-links a:not(:hover),
+.certrev-reader .certrev-r-side-links a:not(:hover) {
+	color: #141414 !important;
+}
+.certrev-reader .certrev-r-links a:hover,
+.certrev-reader .certrev-r-side-links a:hover {
+	color: var(--cr-ba) !important;
+}
+.certrev-reader .certrev-r-pill a {
+	color: inherit !important;
+	text-decoration: underline !important;
+}
+.certrev-reader .certrev-r-face img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.certrev-reader .certrev-r-bys.solo {
+	grid-template-columns: minmax(0, 1fr);
+}
+.certrev-reader .certrev-r-foot a {
+	color: inherit !important;
+	text-decoration: underline !important;
+}
+.certrev-reader .certrev-r-pill {
+	position: fixed;
+	margin-bottom: env(safe-area-inset-bottom, 0px);
+}
+.certrev-memo-wrap[data-certrev-placement="rail"] .certrev-reader .certrev-r-side {
+	float: none;
+	width: auto;
+	margin: 0;
+}
+.certrev-memo-wrap[data-certrev-placement="body-fallback"] .certrev-reader .certrev-r-side,
+.certrev-sidebar-wrap:not([data-certrev-placement]) .certrev-reader .certrev-r-side {
+	float: none;
+	width: auto;
+	max-width: 360px;
+	margin: 0 auto;
+}
+.certrev-reader .certrev-r-side-links.single {
+	grid-template-columns: minmax(0, 1fr);
+}
+.certrev-reader .certrev-r-side-links.single a:first-child {
+	border-right: 0;
+}
+/* Reader-only font aliases (generated from the CERTREV-FONTS rules above: the same files and unicode ranges, only the family and
+ * the weight range differ, so the reader paints weights the legacy card does not declare). */
+@font-face {
+	font-family: "CertREV Reader Serif";
+	font-style: normal;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-playfair-latin-ext.woff2") format("woff2");
+	unicode-range:
+		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+	font-family: "CertREV Reader Serif";
+	font-style: normal;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-playfair-latin.woff2") format("woff2");
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+	font-family: "CertREV Reader Serif";
+	font-style: italic;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-playfair-italic-latin-ext.woff2") format("woff2");
+	unicode-range:
+		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+	font-family: "CertREV Reader Serif";
+	font-style: italic;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-playfair-italic-latin.woff2") format("woff2");
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+	font-family: "CertREV Reader Grotesk";
+	font-style: normal;
+	font-weight: 400 800;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-jakarta-latin-ext.woff2") format("woff2");
+	unicode-range:
+		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+	font-family: "CertREV Reader Grotesk";
+	font-style: normal;
+	font-weight: 400 800;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-jakarta-latin.woff2") format("woff2");
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* CERTREV-READER-GEN:END */