perf(word-addin): collapse the header's four backdrop blurs into one masked layer

WHY THIS MATTERS
The floating header's progressive-blur scrim stacked four full-width
backdrop-blur layers (1/2/4/8px). backdrop-filter cannot be cached: the
compositor must re-sample whatever is behind the layer every time it
changes -- and behind this scrim is the transcript, which moves on
every scroll frame and repaints on every streamed token. Four stacked
layers meant four full-width re-samples per frame over the hottest
region of the pane, in WKWebView where main-thread headroom is already
the constraint (the same cost class messageStyles.ts documents for
text blurs).

WHAT IS A MASKED PROGRESSIVE BLUR
The standard single-layer approximation: one blur at the maximum
strength whose mask-image alpha ramps from opaque to transparent, so
the blurred copy cross-fades into the sharp content underneath. The
eye reads the fade-out of an 8px blur as the blur itself easing off --
visually equivalent to stacked increasing blurs at a quarter of the
sampling cost.

HOW IT WORKS
One backdrop-blur-[8px] layer with a multi-stop mask ramp
(black 0-16%, 0.55 @46%, 0.2 @72%, transparent 100%) replaces the four
layers; both mask-image and -webkit-mask-image are set (WKWebView needs
the prefix), and the gradient overlay above it is unchanged. The layout
spec now asserts exactly one masked blur layer instead of the old
stack, and a leftover WEBKIT_COMPLETION_DIAGNOSTIC debug console.log in
the same spec was removed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015U1iPxsADQ2yuksNmDuvvW