fix: optimize background image usage in path styling

.gitattributes

@@ -34,3 +34,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 *.png filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text

static/index.html

@@ -116,8 +116,7 @@ body.home:not(.manage) #toNow{bottom:76px} body.home:not(.manage) #logoutBtn{bot
 /* the way back to the path, at the head of the daily videos' screen (no tab of the foot's bar is lit there) */
 #vids button.back{display:inline-flex;align-self:flex-start;gap:6px;padding:6px 12px;border-radius:10px;background:var(--olive);border-color:var(--olive);color:var(--on-olive);font:700 15px var(--f-body)}
 #dailyDlg{width:min(92vw,380px)}
-.path{--track:color-mix(in srgb,var(--muted) 75%,var(--bg));position:relative;isolation:isolate;width:100%;max-width:460px;margin:4px auto 72px;background:#101510}
-.path::before{content:"";position:absolute;z-index:-1;inset:0;background:url("/static/assets/arabic-calligraphy-path.webp") top center/100% auto repeat-y;mix-blend-mode:screen;filter:brightness(1.9) saturate(.55);opacity:.24;pointer-events:none}
+.path{--track:color-mix(in srgb,var(--muted) 75%,var(--bg));position:relative;width:100%;max-width:460px;margin:4px auto 72px;background:#101510 url("/static/assets/arabic-calligraphy-path.webp") top center/100% auto repeat-y}
 .road{position:absolute;left:50%;top:0;width:1px;height:100%;overflow:visible;pointer-events:none}
 .road path{fill:none;stroke:var(--line);stroke-width:12;stroke-linecap:round}
 .road .went{stroke:var(--olive)}