fix(library): optimize image scanning, fast raw preview extraction and lazy thumbnail loading

docker/frontend/src/styles/landing.css

@@ -185,6 +185,17 @@ html { scroll-behavior: smooth; scroll-padding-top: 148px; }
   cursor: pointer;
 }
 .lp-tool:hover { color: var(--lp-text); border-color: var(--accent-line); }
+/* The language button carries a globe and the code at once; which one is drawn
+   is the stylesheet's call (the phone block below swaps them). */
+.lp-tool-globe {
+  display: none;
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+}
 /* The theme popover borrows the workspace's .popover/.chip shell, re-skinned for
    the landing palette. */
 .lp-theme-pop { background: var(--lp-card); border-color: var(--lp-line); }
@@ -211,16 +222,29 @@ html { scroll-behavior: smooth; scroll-padding-top: 148px; }
 
 @media (max-width: 1160px) {
   .lp-subnav, .lp-nav .lp-wrap > .lp-btn, .lp-nav .lp-account { display: none; }
+  /* The bar has collapsed, so it is the phone's bar: every control is a glyph
+     on a finger's target. 44 is the floor the studio's own bars use — a 34px
+     circle with an 11px word in it was neither drawn for a thumb nor legible
+     on one. The language button swaps its code for a globe here; both live in
+     the DOM, and `aria-label` is the name either way. */
+  .lp-tool { width: 44px; height: 44px; font-size: 20px; }
+  .lp-tool-code { display: none; }
+  .lp-tool-globe { display: block; }
   .lp-burger {
     display: inline-flex;
     flex-direction: column;
+    align-items: center;
+    justify-content: center;
     gap: 4px;
+    width: 44px;
+    height: 44px;
     background: none;
-    border: 0;
-    padding: 8px;
+    border: 1px solid var(--lp-line);
+    border-radius: 999px;
+    padding: 0;
     cursor: pointer;
   }
-  .lp-burger i { display: block; width: 20px; height: 2px; background: var(--lp-text); }
+  .lp-burger i { display: block; width: 22px; height: 2px; background: var(--lp-text); }
   .lp-sheet {
     display: flex;
     flex-direction: column;
@@ -601,11 +625,9 @@ html { scroll-behavior: smooth; scroll-padding-top: 148px; }
 }
 @media (max-width: 680px) {
   /* logo + theme + language + burger have to fit a 360px phone */
-  .lp-nav .lp-wrap { gap: 10px; }
+  .lp-nav .lp-wrap { gap: 8px; padding: 0 14px; }
   .lp-logo { font-size: 19px; }
   .lp-logo-mark { width: 24px; height: 24px; }
-  .lp-tool { width: 30px; height: 30px; font-size: 11px; }
-  .lp-burger { padding: 6px; }
   .lp-sec { padding: 64px 0; }
   /* The subnav is gone under 1160px, so only the notice has to be paid for. */
   .lp-hero { padding: 144px 0 52px; }