@brett_lamy/docstream 1.24.0 → 1.25.0

package/dist/replay/sources.js

@@ -0,0 +1,126 @@
+/* More sources for a recording's DevTools, beside the rrweb events: a HAR (the network log browsers export) and a
+   console log (one message per line, `2026-06-12T21:01:38.123Z [warn] text`; indented lines continue the message
+   above). Both are read into the custom events devtools.ts already understands, stamped on their own absolute
+   times, so they line up with the recording when they share its clock. Anything stamped before the recording
+   starts or after it ends lands on its first or last moment. Pure readers, no rrweb import.
+
+   A HAR can also carry inspections (inspections.ts) as an extension: `log._inspections`, each
+   `{ at: ISO time, request?: entry _requestId or URL, message?: text, tab?, label? }`. */
+import { ReplayEventType } from './types.js';
+const obj = (v) => (v && typeof v === 'object' ? v : {});
+const str = (v) => (typeof v === 'string' && v !== '' ? v : undefined);
+const num = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : undefined);
+const time = (v) => {
+    const t = typeof v === 'string' ? Date.parse(v) : num(v);
+    return t !== undefined && Number.isFinite(t) ? t : undefined;
+};
+const custom = (timestamp, tag, payload) => ({
+    type: ReplayEventType.Custom,
+    timestamp,
+    data: { tag, payload },
+});
+/** HAR headers (`[{ name, value }]`) as a record. */
+function harHeaders(list) {
+    if (!Array.isArray(list))
+        return undefined;
+    const out = {};
+    for (const h of list) {
+        const name = str(obj(h).name);
+        if (name)
+            out[name] = String(obj(h).value ?? '');
+    }
+    return Object.keys(out).length ? out : undefined;
+}
+/** A HAR body: as written, or decoded when base64 and textual. */
+function harText(content) {
+    const text = typeof content.text === 'string' ? content.text : undefined;
+    if (text === undefined || content.encoding !== 'base64')
+        return text;
+    try {
+        const bytes = Uint8Array.from(atob(text), (c) => c.charCodeAt(0));
+        const decoded = new TextDecoder('utf-8', { fatal: true }).decode(bytes);
+        return decoded;
+    }
+    catch {
+        return `[${Math.round((text.length * 3) / 4)} bytes of binary data]`;
+    }
+}
+/** A HAR (object or JSON text) as `network` (and `inspect`) custom events. */
+export function harToReplayEvents(har) {
+    let data = har;
+    if (typeof har === 'string') {
+        try {
+            data = JSON.parse(har);
+        }
+        catch {
+            return [];
+        }
+    }
+    const log = obj(obj(data).log);
+    const out = [];
+    for (const raw of Array.isArray(log.entries) ? log.entries : []) {
+        const e = obj(raw);
+        const started = time(e.startedDateTime);
+        if (started === undefined)
+            continue;
+        const request = obj(e.request);
+        const response = obj(e.response);
+        const duration = Math.max(0, num(e.time) ?? 0);
+        const status = num(response.status);
+        const error = str(e._error) ?? str(response._error);
+        out.push(custom(started + duration, error ? 'network.error' : 'network', {
+            requestId: str(e._requestId),
+            method: str(request.method) ?? 'GET',
+            url: str(request.url) ?? '',
+            status: status === -1 ? undefined : status,
+            statusText: str(response.statusText),
+            error,
+            duration,
+            type: str(e._resourceType) ?? 'fetch',
+            requestHeaders: harHeaders(request.headers),
+            responseHeaders: harHeaders(response.headers),
+            requestBody: str(obj(request.postData).text),
+            responseBody: harText(obj(response.content)),
+        }));
+    }
+    for (const raw of Array.isArray(log._inspections) ? log._inspections : []) {
+        const i = obj(raw);
+        const at = time(i.at);
+        if (at === undefined)
+            continue;
+        out.push(custom(at, 'inspect', { request: str(i.request), message: str(i.message), tab: str(i.tab), label: str(i.label), id: str(i.id) }));
+    }
+    return out;
+}
+const LINE = /^(\d{4}-\d\d-\d\dT[\d:.]+(?:Z|[+-]\d\d:?\d\d))\s+\[(\w+)\]\s?(.*)$/;
+/** A console log (`<ISO time> [level] message`, indented continuation lines) as `console` custom events. */
+export function consoleLogToReplayEvents(text) {
+    const out = [];
+    for (const line of text.split(/\r?\n/)) {
+        const m = line.match(LINE);
+        const at = m ? time(m[1]) : undefined;
+        if (m && at !== undefined)
+            out.push({ at, level: m[2].toLowerCase(), lines: [m[3] ?? ''] });
+        else if (out.length && /^\s/.test(line))
+            out[out.length - 1].lines.push(line.replace(/^ {2}/, ''));
+    }
+    return out.map((m) => custom(m.at, 'console', { level: m.level === 'warning' ? 'warn' : m.level, message: m.lines.join('\n').trimEnd() }));
+}
+/** The recording's events with the HAR's and the console log's added, each stamped inside the recording. */
+export function mergeReplaySources(events, sources) {
+    const extra = [
+        ...(sources.har ? harToReplayEvents(sources.har) : []),
+        ...(sources.consoleLog ? consoleLogToReplayEvents(sources.consoleLog) : []),
+    ];
+    if (!extra.length || !events.length)
+        return events;
+    let first = Infinity;
+    let last = -Infinity;
+    for (const e of events) {
+        first = Math.min(first, e.timestamp);
+        last = Math.max(last, e.timestamp);
+    }
+    const clamped = extra.map((e) => (e.timestamp < first || e.timestamp > last ? { ...e, timestamp: Math.min(last, Math.max(first, e.timestamp)) } : e));
+    return [...events, ...clamped].sort((a, b) => a.timestamp - b.timestamp);
+}
+//# sourceMappingURL=sources.js.map

package/dist/replay/sources.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sources.js","sourceRoot":"","sources":["../../src/replay/sources.ts"],"names":[],"mappings":"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"}

package/dist/styles.css

@@ -4149,9 +4149,11 @@
     cursor: pointer;
     pointer-events: auto;
     appearance: none;
-    color: var(--background, #ffffff);
-    background: color-mix(in srgb, var(--foreground, #18181b) 72%, transparent);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    /* A video player's scrim, not the page's tokens: it sits over a recorded page of any color, and a host can
+       redefine --foreground (BL UI's markdown sets it to currentColor), which made a white icon on a white disc. */
+    color: #ffffff;
+    background: rgba(9, 9, 11, 0.62);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
     -webkit-backdrop-filter: blur(12px);
     backdrop-filter: blur(12px);
     transition: scale 0.16s ease-out;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brett_lamy/docstream",
-  "version": "1.24.0",
+  "version": "1.25.0",
   "description": "GitBook-aware readonly markdown and AI stream renderer.",
   "publishConfig": {
     "access": "public"

package/src/docs/DocsRenderer.tsx

@@ -451,7 +451,7 @@ function BlockView({ block, liveRenderer, sourceRenderer }: { block: Block } & R
         return <ReplayPreview source={block.url} title="Replay preview" />
       }
       if (isRrwebUrl(block.url)) {
-        return <ReplayFile url={block.url} title={block.title || fileName(block.url)} />
+        return <ReplayFile url={block.url} title={block.title || fileName(block.url)} {...(block.har ? { har: block.har } : {})} {...(block.log ? { log: block.log } : {})} />
       }
       if (isStlUrl(block.url)) {
         return <AssetStl url={block.url} {...(block.title ? { title: block.title } : {})} />

package/src/gitbook/ast.ts

@@ -302,6 +302,10 @@ export interface EmbedNode extends BlockSpacing {
   muted?: boolean
   controls?: boolean
   poster?: string
+  /** For an `.rrweb` recording: a HAR and a console log recorded alongside, whose requests and messages join
+   *  the player's DevTools. */
+  har?: string
+  log?: string
   /** The tag as written (with its `{% endembed %}`), reused while it still says the same. */
   raw?: string
 }

package/src/gitbook/parse.ts

@@ -634,6 +634,8 @@ function parseBody(lines: string[], firstGap = 0): { blocks: Block[]; end: numbe
           url: tag.attrs.url ?? "",
           ...(tag.attrs.title ? { title: tag.attrs.title } : {}),
           ...(tag.attrs.poster ? { poster: tag.attrs.poster } : {}),
+          ...(tag.attrs.har ? { har: tag.attrs.har } : {}),
+          ...(tag.attrs.log ? { log: tag.attrs.log } : {}),
           ...(booleanAttr(tag.attrs, "autoplay") === undefined
             ? {}
             : { autoplay: booleanAttr(tag.attrs, "autoplay") }),

package/src/gitbook/serialize.ts

@@ -389,6 +389,8 @@ function serializeBlock(b: Block): string {
         attr("url", b.url),
         b.title ? attr("title", b.title) : "",
         b.poster ? attr("poster", b.poster) : "",
+        b.har ? attr("har", b.har) : "",
+        b.log ? attr("log", b.log) : "",
         b.autoplay === undefined ? "" : attr("autoplay", b.autoplay),
         b.loop === undefined ? "" : attr("loop", b.loop),
         b.muted === undefined ? "" : attr("muted", b.muted),

package/src/replay/ReplayFile.tsx

@@ -3,9 +3,28 @@ import { useAsset } from '../asset-resolver';
 import { ReplayPreview } from './ReplayPreview';
 import type { ReplayPlayerOptions } from './ReplayPlayer';
 
-export interface ReplayFileProps extends Omit<ReplayPlayerOptions, 'url'> {
+export interface ReplayFileProps extends Omit<ReplayPlayerOptions, 'url' | 'har' | 'consoleLog'> {
   /** The `.rrweb` file as written in the document; the host's asset resolver maps it to a loadable URL. */
   url: string;
+  /** A `.har` file recorded alongside (resolved the same way): its requests join DevTools' Network list. */
+  har?: string;
+  /** A console log recorded alongside (`<ISO time> [level] message` lines): its messages join the Console. */
+  log?: string;
+}
+
+/** The text of a file the asset resolver maps, fetched once `enabled`; undefined until then or when it fails. */
+function useAssetText(url: string | undefined, enabled: boolean): { text?: string; done: boolean } {
+  const src = useAsset(url ?? '');
+  const [state, setState] = useState<{ text?: string; done: boolean }>({ done: !url });
+  useEffect(() => {
+    if (!url || !enabled || src === undefined) return;
+    const controller = new AbortController();
+    fetch(src, { signal: controller.signal })
+      .then((r) => (r.ok ? r.text() : undefined))
+      .then((text) => setState({ text, done: true }), () => !controller.signal.aborted && setState({ done: true }));
+    return () => controller.abort();
+  }, [url, src, enabled]);
+  return url ? state : { done: true };
 }
 
 /**
@@ -14,7 +33,7 @@ export interface ReplayFileProps extends Omit<ReplayPlayerOptions, 'url'> {
  * viewport, so a page of recordings doesn't download them all up front. A media fragment on the URL,
  * `recording.rrweb#t=4.7,7.4` (seconds), is its `timeWindow`.
  */
-export function ReplayFile({ url, ...options }: ReplayFileProps) {
+export function ReplayFile({ url, har, log, ...options }: ReplayFileProps) {
   const { file, segment } = splitReplayFragment(url);
   const src = useAsset(file);
   const ref = useRef<HTMLDivElement>(null);
@@ -29,8 +48,20 @@ export function ReplayFile({ url, ...options }: ReplayFileProps) {
     return () => io.disconnect();
   }, [near]);
 
-  if (!near || src === undefined) return <div ref={ref} className="docstream-asset-pending" data-slot="replay-file" aria-busy="true" />;
-  return <ReplayPreview source={{ kind: 'events-url', url: src }} chrome="browser" timeWindow={segment} {...options} />;
+  const harFile = useAssetText(har, near);
+  const logFile = useAssetText(log, near);
+
+  if (!near || src === undefined || !harFile.done || !logFile.done) return <div ref={ref} className="docstream-asset-pending" data-slot="replay-file" aria-busy="true" />;
+  return (
+    <ReplayPreview
+      source={{ kind: 'events-url', url: src }}
+      chrome="browser"
+      timeWindow={segment}
+      har={harFile.text}
+      consoleLog={logFile.text}
+      {...options}
+    />
+  );
 }
 
 /** Splits `#t=start,end` (a media fragment, in seconds; `#t=start` runs to the end) off a recording's URL. */

package/src/replay/ReplayPlayer.tsx

@@ -21,6 +21,7 @@ import { ReplayStage } from './ReplayStage'
 import { DevtoolsButtons, DevtoolsPanel, type ReplayDevtoolsTab } from './ReplayDevtools'
 import { getReplayDevtools, replayDevtoolsAt } from './devtools'
 import { getReplayInspections, replayInspectionAt, resolveReplayInspections, type ReplayInspection } from './inspections'
+import { mergeReplaySources } from './sources'
 import { getReplayMarkers, getReplayMeta, getReplayPointerTrack, replayPointerAt } from './markers'
 import type { ReplayMarker, ReplayMarkerKind, ReplayPointerTrack } from './markers'
 import type { ReplayStageHandle } from './stage-types'
@@ -84,6 +85,11 @@ export interface ReplayPlayerOptions {
    *  tab with that request or message selected and the label above it; playback doesn't stop. Added to the
    *  recording's own `inspect` custom events, and to the rail as checkpoints. */
   inspections?: ReplayInspection[]
+  /** A HAR (object or JSON text) recorded alongside: its requests join the DevTools Network list, on their own
+   *  timestamps (sources.ts). Its `log._inspections` join `inspections`. */
+  har?: unknown
+  /** A console log recorded alongside (`<ISO time> [level] message` lines): its messages join the Console. */
+  consoleLog?: string
   /** Draw the recorded pointer and click ripples (default true). */
   cursor?: boolean
   /** `width` (default): the page scales to the frame's width and sets its height. `contain`: fill the frame's
@@ -112,11 +118,13 @@ const MARKER_NOUN: Record<ReplayMarkerKind, string> = {
 }
 
 export function ReplayPlayer({
-  events, url, title = 'Session replay', chrome = 'browser', trafficLights = true, controls = true,
+  events: recordingEvents, har, consoleLog, url, title = 'Session replay', chrome = 'browser', trafficLights = true, controls = true,
   autoplay = false, loop = false, initialTime: initialTimeProp, timeWindow, speeds = DEFAULT_PLAYER_SPEEDS, markers = true, markerKinds,
   cursor = true, disableDevtools = false, devtools = true, defaultDevtoolsTab, inspections, fit = 'width', poster, lazy = true, playerRef, onTimeUpdate, onPlayingChange, onMarkerPress,
   className, style,
 }: ReplayPlayerOptions & { events: ReplayEvent[] }) {
+  // The recording plus whatever was recorded beside it (a HAR, a console log), as one event list.
+  const events = useMemo(() => mergeReplaySources(recordingEvents, { har, consoleLog }), [recordingEvents, har, consoleLog])
   const rootRef = useRef<HTMLDivElement>(null)
   const stage = useRef<ReplayStageHandle>(null)
   const reduced = useReducedMotion()

package/src/replay/index.ts

@@ -26,3 +26,4 @@ export { isReplayQaUrl, normalizeReplayEmbedUrl } from './url';
 export { ReplayFile, isRrwebUrl, splitReplayFragment } from './ReplayFile';
 export type { ReplayFileProps } from './ReplayFile';
 export { sanitizeReplayEvent } from './sanitize';
+export { consoleLogToReplayEvents, harToReplayEvents, mergeReplaySources } from './sources';

package/src/replay/markers.ts

@@ -91,6 +91,9 @@ export function getReplayMeta(events: readonly ReplayEvent[]): ReplayMeta {
 
 const ERROR_TAGS = new Set(['error', 'exception', 'console.error', 'uncaught'])
 const NETWORK_TAGS = new Set(['network', 'network.error', 'request.failed', 'fetch.failed'])
+const FAILED_TAGS = new Set(['network.error', 'request.failed', 'fetch.failed'])
+// Console messages (from a console log, say) mark the rail only when they're errors.
+const CONSOLE_TAGS = new Set(['console', 'log', 'warn', 'warning', 'info', 'debug'])
 const NAVIGATION_TAGS = new Set(['navigation', 'navigate', 'route'])
 
 /**
@@ -150,9 +153,13 @@ export function getReplayMarkers(events: readonly ReplayEvent[]): ReplayMarker[]
         const label = text(payload.label)
         if (ERROR_TAGS.has(tag)) push({ kind: 'error', time, label: label ?? 'Error', detail })
         else if (NETWORK_TAGS.has(tag)) {
-          const status = text(payload.status)
-          const method = text(payload.method) ?? 'GET'
-          push({ kind: 'network', time, label: label ?? `${method} ${status ?? 'failed'}`, detail })
+          // A failed request marks the rail (the same rule as DevTools: an error, a failure tag, status 0 or 400 and
+          // up); one that answered, or never did within the recording, doesn't.
+          const code = typeof payload.status === 'number' ? payload.status : undefined
+          const failed = FAILED_TAGS.has(tag) || !!payload.error || code === 0 || (code !== undefined && code >= 400)
+          if (failed) push({ kind: 'network', time, label: label ?? `${text(payload.method) ?? 'GET'} ${code ?? 'failed'}`, detail })
+        } else if (CONSOLE_TAGS.has(tag)) {
+          if (payload.level === 'error' || payload.level === 'assert') push({ kind: 'error', time, label: label ?? 'Console error', detail })
         } else if (NAVIGATION_TAGS.has(tag)) push({ kind: 'navigation', time, label: label ?? 'Navigated', detail })
         else push({ kind: 'custom', time, label: label ?? tag, detail })
         break

package/src/replay/sources.ts

@@ -0,0 +1,120 @@
+/* More sources for a recording's DevTools, beside the rrweb events: a HAR (the network log browsers export) and a
+   console log (one message per line, `2026-06-12T21:01:38.123Z [warn] text`; indented lines continue the message
+   above). Both are read into the custom events devtools.ts already understands, stamped on their own absolute
+   times, so they line up with the recording when they share its clock. Anything stamped before the recording
+   starts or after it ends lands on its first or last moment. Pure readers, no rrweb import.
+
+   A HAR can also carry inspections (inspections.ts) as an extension: `log._inspections`, each
+   `{ at: ISO time, request?: entry _requestId or URL, message?: text, tab?, label? }`. */
+import { ReplayEventType, type ReplayEvent } from './types'
+
+type Json = Record<string, unknown>
+const obj = (v: unknown): Json => (v && typeof v === 'object' ? (v as Json) : {})
+const str = (v: unknown): string | undefined => (typeof v === 'string' && v !== '' ? v : undefined)
+const num = (v: unknown): number | undefined => (typeof v === 'number' && Number.isFinite(v) ? v : undefined)
+const time = (v: unknown): number | undefined => {
+  const t = typeof v === 'string' ? Date.parse(v) : num(v)
+  return t !== undefined && Number.isFinite(t) ? t : undefined
+}
+
+const custom = (timestamp: number, tag: string, payload: Json): ReplayEvent => ({
+  type: ReplayEventType.Custom,
+  timestamp,
+  data: { tag, payload },
+})
+
+/** HAR headers (`[{ name, value }]`) as a record. */
+function harHeaders(list: unknown): Record<string, string> | undefined {
+  if (!Array.isArray(list)) return undefined
+  const out: Record<string, string> = {}
+  for (const h of list) {
+    const name = str(obj(h).name)
+    if (name) out[name] = String(obj(h).value ?? '')
+  }
+  return Object.keys(out).length ? out : undefined
+}
+
+/** A HAR body: as written, or decoded when base64 and textual. */
+function harText(content: Json): string | undefined {
+  const text = typeof content.text === 'string' ? content.text : undefined
+  if (text === undefined || content.encoding !== 'base64') return text
+  try {
+    const bytes = Uint8Array.from(atob(text), (c) => c.charCodeAt(0))
+    const decoded = new TextDecoder('utf-8', { fatal: true }).decode(bytes)
+    return decoded
+  } catch {
+    return `[${Math.round((text.length * 3) / 4)} bytes of binary data]`
+  }
+}
+
+/** A HAR (object or JSON text) as `network` (and `inspect`) custom events. */
+export function harToReplayEvents(har: unknown): ReplayEvent[] {
+  let data: unknown = har
+  if (typeof har === 'string') {
+    try { data = JSON.parse(har) } catch { return [] }
+  }
+  const log = obj(obj(data).log)
+  const out: ReplayEvent[] = []
+  for (const raw of Array.isArray(log.entries) ? log.entries : []) {
+    const e = obj(raw)
+    const started = time(e.startedDateTime)
+    if (started === undefined) continue
+    const request = obj(e.request)
+    const response = obj(e.response)
+    const duration = Math.max(0, num(e.time) ?? 0)
+    const status = num(response.status)
+    const error = str(e._error) ?? str(response._error)
+    out.push(custom(started + duration, error ? 'network.error' : 'network', {
+      requestId: str(e._requestId),
+      method: str(request.method) ?? 'GET',
+      url: str(request.url) ?? '',
+      status: status === -1 ? undefined : status,
+      statusText: str(response.statusText),
+      error,
+      duration,
+      type: str(e._resourceType) ?? 'fetch',
+      requestHeaders: harHeaders(request.headers),
+      responseHeaders: harHeaders(response.headers),
+      requestBody: str(obj(request.postData).text),
+      responseBody: harText(obj(response.content)),
+    }))
+  }
+  for (const raw of Array.isArray(log._inspections) ? log._inspections : []) {
+    const i = obj(raw)
+    const at = time(i.at)
+    if (at === undefined) continue
+    out.push(custom(at, 'inspect', { request: str(i.request), message: str(i.message), tab: str(i.tab), label: str(i.label), id: str(i.id) }))
+  }
+  return out
+}
+
+const LINE = /^(\d{4}-\d\d-\d\dT[\d:.]+(?:Z|[+-]\d\d:?\d\d))\s+\[(\w+)\]\s?(.*)$/
+
+/** A console log (`<ISO time> [level] message`, indented continuation lines) as `console` custom events. */
+export function consoleLogToReplayEvents(text: string): ReplayEvent[] {
+  const out: { at: number; level: string; lines: string[] }[] = []
+  for (const line of text.split(/\r?\n/)) {
+    const m = line.match(LINE)
+    const at = m ? time(m[1]) : undefined
+    if (m && at !== undefined) out.push({ at, level: m[2]!.toLowerCase(), lines: [m[3] ?? ''] })
+    else if (out.length && /^\s/.test(line)) out[out.length - 1]!.lines.push(line.replace(/^ {2}/, ''))
+  }
+  return out.map((m) => custom(m.at, 'console', { level: m.level === 'warning' ? 'warn' : m.level, message: m.lines.join('\n').trimEnd() }))
+}
+
+/** The recording's events with the HAR's and the console log's added, each stamped inside the recording. */
+export function mergeReplaySources(events: ReplayEvent[], sources: { har?: unknown; consoleLog?: string }): ReplayEvent[] {
+  const extra = [
+    ...(sources.har ? harToReplayEvents(sources.har) : []),
+    ...(sources.consoleLog ? consoleLogToReplayEvents(sources.consoleLog) : []),
+  ]
+  if (!extra.length || !events.length) return events
+  let first = Infinity
+  let last = -Infinity
+  for (const e of events) {
+    first = Math.min(first, e.timestamp)
+    last = Math.max(last, e.timestamp)
+  }
+  const clamped = extra.map((e) => (e.timestamp < first || e.timestamp > last ? { ...e, timestamp: Math.min(last, Math.max(first, e.timestamp)) } : e))
+  return [...events, ...clamped].sort((a, b) => a.timestamp - b.timestamp)
+}

package/src/styles.css

@@ -4149,9 +4149,11 @@
     cursor: pointer;
     pointer-events: auto;
     appearance: none;
-    color: var(--background, #ffffff);
-    background: color-mix(in srgb, var(--foreground, #18181b) 72%, transparent);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    /* A video player's scrim, not the page's tokens: it sits over a recorded page of any color, and a host can
+       redefine --foreground (BL UI's markdown sets it to currentColor), which made a white icon on a white disc. */
+    color: #ffffff;
+    background: rgba(9, 9, 11, 0.62);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
     -webkit-backdrop-filter: blur(12px);
     backdrop-filter: blur(12px);
     transition: scale 0.16s ease-out;