V.AI STUDIO backdrop, vai-avatar's product search, size/position, neon

Four changes, all on the search field.

Background. The same artwork vai-avatar shows on its body
(public/avatars/vaistudio_center.png, copied byte-for-byte, md5 checked) at
30% opacity. It is a separate fixed layer rather than a background-image on
.app because opacity on .app would fade the photographs and the search pill
with it, and background-attachment:fixed cannot compose with the .vignette and
.grain layers already sitting on top of the field.

Product search. Ranking is now vai-avatar's own scoreProduct(), ported to
product-search.js rather than extended in place, so the two modules can be
diffed against each other when the original changes. The whole rule set
carries over: exact SKU/model/title must win outright, millimetre sizes are
compared numerically (the specs write "900 mm", "900mm" and "W900" for the
same shelf), material words are matched against specs as well as title, and
brand names get a flat bonus. 35 tests in scripts/test-product-search.mjs pin
each rule. Both scorers now run and both rankings are returned, so the change
is measurable rather than assumed.

Size and position. A collapsed row docked to the search box. Size is a
slider, position is a square pad rather than two sliders -- one finger moves
the plane on both axes, which is what "position" means for a field of tiles.
Both persist to sessionStorage. The controls are read through a ref instead of
as effect dependencies, so a slider drag re-runs layout() and re-animates the
existing tiles rather than tearing the field down and refetching every
thumbnail.

Neon outline. Only where there is a verifiable identity, not a resemblance: a
product vai-avatar resolved by exact SKU/model/title beating the runner-up by
2x, or an interior whose own title/category literally contains the query. The
900 tier sits above the 550 "contains" tier, so relevance alone can never
reach it. The glow is a pseudo-element because the tile carries a blur filter
for the relevance fade, and a filter flattens an outer box-shadow into a hard
ring.

The backdrop is stored in git-lfs, named explicitly rather than with a *.png
pattern: a wildcard would route the ~6,400 BlurHash and thumbnail PNGs under
dist/prodimgs through LFS too, and those are regenerated by the catalogue
scripts on every refresh.

Verified in a real browser (scripts/test-ui.mjs, 22 assertions): the artwork
decodes, tiles grow from 130px to 221px on the slider, dragging the pad moves
96 tiles across a 1498px span, and the outline renders three glow layers on an
exact tile and nothing on any other.

.gitattributes

@@ -36,3 +36,11 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 products-index.json filter=lfs diff=lfs merge=lfs -text
 dist/products-gallery.json filter=lfs diff=lfs merge=lfs -text
 products-gallery.json filter=lfs diff=lfs merge=lfs -text
+# The V.AI STUDIO backdrop, copied from vai-avatar's public/avatars/ folder.
+# Named explicitly rather than with a *.png pattern: a wildcard would also
+# catch the BlurHash and thumbnail PNGs under dist/prodimgs, which are small,
+# numerous and regenerated by the catalogue scripts -- routing ~6,400 of them
+# through LFS would make every catalogue refresh slow and would balloon the
+# repo. Two files, one rule, and the reason is recorded here.
+public/brand/vaistudio_center.png filter=lfs diff=lfs merge=lfs -text
+dist/brand/vaistudio_center.png filter=lfs diff=lfs merge=lfs -text

dist/assets/app.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--ease-out:cubic-bezier(0, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-x-0{inset-inline:0}.top-60{top:calc(var(--spacing) * 60)}.bottom-0{bottom:0}.isolate{isolation:isolate}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.h-dvh{height:100dvh}.w-full{width:100%}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.items-center{align-items:center}.justify-between{justify-content:space-between}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.capitalize{text-transform:capitalize}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter\!{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}}:root{color:#deded7;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#10110f;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline-offset:5px;outline:2px solid #d7e1d1}.app{background:#11120f;min-height:320px;overflow:clip}.image-field{contain:strict;position:absolute;inset:0;overflow:clip}.image-tile{will-change:transform;transform-origin:50%;background-color:#252823;background-size:cover;border:0;border-radius:2px;padding:0;display:block;position:absolute;top:0;left:0;overflow:hidden;box-shadow:0 1px 5px #0002}.image-tile img{object-fit:cover;opacity:0;filter:brightness(.92);width:100%;height:100%;transition:opacity .12s,filter .12s;position:absolute;inset:0}.image-tile img.loaded{opacity:1}.image-tile:hover{box-shadow:0 10px 35px #0005}.image-tile:hover img{filter:brightness()}.image-share{z-index:1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#e6ebe0;opacity:0;background:#0d0f0bb8;border-radius:6px;place-items:center;width:22px;height:22px;transition:opacity .16s,transform .16s,background .16s,color .16s;display:grid;position:absolute;top:5px;right:5px;transform:scale(.82)}.image-share svg{width:13px;height:13px}.image-share:hover{color:#fff;background:#0d0f0be6}.image-share[hidden]{display:none}.image-tile:hover .image-share,.image-tile:focus-within .image-share,.image-tile[data-rank="1"] .image-share,.image-tile[data-rank="2"] .image-share,.image-tile[data-rank="3"] .image-share{opacity:1;transform:scale(1)}@media (prefers-reduced-motion:reduce){.image-share{transition:opacity .12s linear}}.image-tile{opacity:var(--relevance-opacity,1);filter:blur(var(--relevance-blur,0px));transition:opacity .65s,filter .65s}.image-tile:hover,.image-tile:focus-visible{opacity:1;filter:blur()}.image-tile:hover,.image-tile:focus-within{z-index:2147483647}.vignette{pointer-events:none;z-index:300;background:radial-gradient(#0000 42%,#0c0d0b30 100%),linear-gradient(0deg,#10110f99,#0000 70px);position:absolute;inset:0}.grain{z-index:301;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E");position:absolute;inset:0}.search-center{z-index:400;width:clamp(350px,36vw,640px);max-width:calc(100% - 44px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.search-pill{-webkit-backdrop-filter:blur(26px)saturate(.7);backdrop-filter:blur(26px)saturate(.7);background:#e4e8ddbb;border-radius:999px;height:clamp(62px,4.8vw,84px);transition:background .25s,box-shadow .25s;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff3d,0 6px 36px #00000018}.search-pill:focus-within{background:#e6eaddd4;box-shadow:inset 0 1px #ffffff52,0 5px 40px #0002}.search-pill input{color:#20251f;letter-spacing:-.035em;caret-color:#323b2d;background:0 0;border:0;outline:none;width:100%;height:100%;padding:0 58px 0 27px;font-size:clamp(22px,1.8vw,30px)}.search-pill input::placeholder{color:#565d54;opacity:1}.search-pill input::selection{background:#80957070}.clear-button{color:#4c5449;background:0 0;border:0;border-radius:50%;place-items:center;width:34px;height:34px;padding:7px;transition:background .15s;display:grid;position:absolute;top:50%;right:13px;transform:translateY(-50%)}.clear-button:hover{background:#0000000d}.clear-button svg{width:18px;height:18px}.search-progress{opacity:0;height:1px;transition:opacity .3s;position:absolute;bottom:0;left:24px;right:24px;overflow:hidden}.search-progress.visible{opacity:.5}.search-progress span{background:#47513f;height:100%;transition:width .3s;animation:1.6s ease-in-out infinite progress-glow;display:block}.search-status{letter-spacing:.01em;color:#d2d6ccc9;text-shadow:0 1px 5px #000,0 1px 12px #000;pointer-events:none;justify-content:center;align-items:center;gap:7px;min-height:20px;font-size:12px;display:flex;position:absolute;top:calc(100% + 13px);left:-28px;right:-28px}.status-dot{background:#d2d8c9;border-radius:50%;width:4px;height:4px;animation:1.6s ease-in-out infinite progress-glow}.has-error-inline{color:#e8b4a9;text-align:center}.has-error{pointer-events:auto;text-shadow:none;background:#171b16ee;border-radius:10px;flex-wrap:wrap;padding:12px;font-size:14px}.has-error button{color:#eee;background:0 0;border:0;border-bottom:1px solid #ccc;padding:0}.error-detail{text-align:center;opacity:.7;overflow-wrap:anywhere;width:100%;font-size:12px}.footer{z-index:401;color:#bac0b395;letter-spacing:.015em;padding:20px 24px;font-size:12px}.footer a{color:inherit;text-decoration:none;transition:color .2s}.footer a:hover{color:#f5f6ef}.version{opacity:.55;margin-left:5px}.footer-divider{opacity:.5;padding:0 8px}@keyframes progress-glow{0%,to{opacity:.4}50%{opacity:1}}@media (width<=650px){.search-center{width:min(82vw,400px)}.search-pill{height:60px}.search-pill input{padding-left:23px;font-size:22px}.footer{padding:16px;font-size:12px}.footer .version,.footer-divider{display:none}.footer>span{font-size:0}.footer>span:after{content:"On-device search";font-size:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.photo-viewer{color:#e8eae3;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0c0e0bdc;border:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.photo-viewer[open]{animation:.42s both viewer-reveal;display:block}.photo-viewer::backdrop{background:#0005}.photo-viewer.is-closing{opacity:0;transition:opacity .32s;animation:none}.photo-toolbar{z-index:2;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;inset:18px 24px auto}.photo-toolbar a,.photo-toolbar button{pointer-events:auto;color:#e0e5d9;background:#12160fe6;border:1px solid #ffffff18;border-radius:999px}.photo-toolbar a{padding:12px 17px;font-size:14px;text-decoration:none}.photo-toolbar button{place-items:center;width:44px;height:44px;display:grid}.photo-share{white-space:nowrap;align-items:center;gap:9px;display:inline-flex}.photo-share svg{flex:none;width:17px;height:17px}.photo-share:hover{color:#fff;background:#1b2115f2;border-color:#ffffff2e}@media (width<=560px){.photo-share span{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.photo-share{padding:12px}}.photo-toolbar svg{width:22px;height:22px}.photo-origin{pointer-events:none;color:#e0e5d9;text-overflow:ellipsis;white-space:nowrap;background:#12160fe6;border:1px solid #ffffff18;border-radius:999px;max-width:60vw;padding:12px 17px;font-size:14px;overflow:hidden}.photo-viewport{place-items:center;padding:72px 24px 40px;display:grid;position:absolute;inset:0;overflow:auto}.photo-frame{width:min(1800px, calc(100vw - 48px), calc((100dvh - 128px) * var(--photo-ar)));aspect-ratio:var(--photo-ar);cursor:zoom-in;transform-origin:50%;background-color:#161912;background-size:100% 100%;border:0;border-radius:3px;flex:none;padding:0;display:block;box-shadow:0 12px 70px #0005}.photo-frame img{object-fit:contain;opacity:0;width:100%;height:100%;transition:opacity .3s;display:block}.photo-frame img.loaded{opacity:1}.photo-viewport.is-zoomed{display:block}.photo-viewport.is-zoomed .photo-frame{width:max(calc(100vw - 48px), calc((100dvh - 128px) * var(--photo-ar)));cursor:zoom-out;margin:0 auto}@keyframes viewer-reveal{0%{opacity:0}to{opacity:1}}.photo-step{color:#e0e5d9;background:#12160fd9;border:1px solid #ffffff18;border-radius:50%;place-items:center;width:46px;height:46px;padding:0;transition:background .18s,border-color .18s;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.photo-step:hover{background:#1b2118e6;border-color:#ffffff2e}.photo-step svg{width:22px;height:22px}.photo-step.is-prev{left:18px}.photo-step.is-next{right:18px}@media (width<=650px){.photo-step{width:38px;height:38px}.photo-step.is-prev{left:8px}.photo-step.is-next{right:8px}}.photo-caption{z-index:2;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0f130ccc;border:1px solid #ffffff17;border-radius:10px;max-width:min(560px,100vw - 48px);padding:12px 16px;position:absolute;bottom:18px;left:24px;right:24px}.photo-caption-price{color:#dfe6d2;margin:0 0 6px;font-size:15px;font-weight:600}.photo-caption-specs{gap:3px;margin:0;font-size:12px;display:grid}.photo-caption-specs>div{grid-template-columns:minmax(0,40%) minmax(0,60%);gap:10px;display:grid}.photo-caption-specs dt{color:#98a08f;overflow-wrap:anywhere}.photo-caption-specs dd{color:#d2d7cb;overflow-wrap:anywhere;margin:0}.photo-counter{z-index:2;font-variant-numeric:tabular-nums;color:#d2d7cb;background:#0f130ccc;border:1px solid #ffffff17;border-radius:999px;margin:0;padding:6px 12px;font-size:12px;position:absolute;bottom:22px;right:24px}@media (width<=650px){.photo-caption{padding:10px 12px;bottom:12px;left:12px;right:12px}.photo-counter{display:none}}.photo-detail{z-index:2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0f130ce8;border:1px solid #ffffff1f;border-radius:12px;width:min(460px,100vw - 48px);position:absolute;bottom:18px;left:24px;overflow:hidden}.photo-detail-summary{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;padding:11px 14px;list-style:none;display:flex}.photo-detail-summary::-webkit-details-marker{display:none}.photo-detail-summary:hover{background:#ffffff0a}.photo-detail-title{color:#e4e9dc;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:14px;line-height:1.35;overflow:hidden}.photo-detail-price{color:#9fd6a4;font-variant-numeric:tabular-nums;flex:none;font-size:13px;font-weight:600}.photo-detail-toggle{color:#99a291;text-transform:uppercase;letter-spacing:.05em;border:1px solid #ffffff1f;border-radius:999px;flex:none;padding:3px 9px;font-size:11px;transition:color .18s,border-color .18s}.photo-detail[open] .photo-detail-toggle{color:#cdd6c4;border-color:#fff3}.photo-detail-body{border-top:1px solid #ffffff12;padding:0 14px 13px}.photo-detail-desc{color:#c3cabb;margin:11px 0 0;font-size:13px;line-height:1.6}.photo-detail-tags{flex-wrap:wrap;gap:6px;margin:11px 0 0;padding:0;list-style:none;display:flex}.photo-detail-tags li{color:#b6c2ab;background:#ffffff0a;border:1px solid #ffffff17;border-radius:999px;padding:3px 9px;font-size:11px}.photo-detail-facts{gap:4px;margin:11px 0 0;font-size:12px;display:grid}.photo-detail-facts>div{grid-template-columns:minmax(0,38%) minmax(0,62%);gap:10px;display:grid}.photo-detail-facts dt{color:#939d8a;overflow-wrap:anywhere}.photo-detail-facts dd{color:#d5dbcd;overflow-wrap:anywhere;margin:0}.photo-viewer:has(.photo-caption) .photo-detail{top:76px;bottom:auto}@media (width<=650px){.photo-detail{width:auto;bottom:12px;left:12px;right:12px}.photo-viewer:has(.photo-caption) .photo-detail{top:70px}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--ease-out:cubic-bezier(0, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-x-0{inset-inline:0}.top-60{top:calc(var(--spacing) * 60)}.bottom-0{bottom:0}.isolate{isolation:isolate}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.block{display:block}.contents{display:contents}.flex{display:flex}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.h-dvh{height:100dvh}.w-full{width:100%}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.items-center{align-items:center}.justify-between{justify-content:space-between}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.capitalize{text-transform:capitalize}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter\!{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}}:root{color:#deded7;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#10110f;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline-offset:5px;outline:2px solid #d7e1d1}.brand-backdrop{z-index:0;pointer-events:none;opacity:.3;background-color:#10110f;background-image:url(../brand/vaistudio_center.png);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;position:fixed;inset:0}@media (width<=768px){.brand-backdrop{background-position:top;background-repeat:repeat;background-size:100%;background-attachment:scroll}}.app{background:0 0;min-height:320px;overflow:clip}.image-field{contain:strict;position:absolute;inset:0;overflow:clip}.image-tile{will-change:transform;transform-origin:50%;background-color:#252823;background-size:cover;border:0;border-radius:2px;padding:0;display:block;position:absolute;top:0;left:0;overflow:hidden;box-shadow:0 1px 5px #0002}.image-tile img{object-fit:cover;opacity:0;filter:brightness(.92);width:100%;height:100%;transition:opacity .12s,filter .12s;position:absolute;inset:0}.image-tile img.loaded{opacity:1}.image-tile:hover{box-shadow:0 10px 35px #0005}.image-tile:hover img{filter:brightness()}.image-share{z-index:1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#e6ebe0;opacity:0;background:#0d0f0bb8;border-radius:6px;place-items:center;width:22px;height:22px;transition:opacity .16s,transform .16s,background .16s,color .16s;display:grid;position:absolute;top:5px;right:5px;transform:scale(.82)}.image-share svg{width:13px;height:13px}.image-share:hover{color:#fff;background:#0d0f0be6}.image-share[hidden]{display:none}.image-tile:hover .image-share,.image-tile:focus-within .image-share,.image-tile[data-rank="1"] .image-share,.image-tile[data-rank="2"] .image-share,.image-tile[data-rank="3"] .image-share{opacity:1;transform:scale(1)}@media (prefers-reduced-motion:reduce){.image-share{transition:opacity .12s linear}}.image-tile{opacity:var(--relevance-opacity,1);filter:blur(var(--relevance-blur,0px));transition:opacity .65s,filter .65s}.image-tile:hover,.image-tile:focus-visible{opacity:1;filter:blur()}.image-tile:hover,.image-tile:focus-within{z-index:2147483647}.vignette{pointer-events:none;z-index:300;background:radial-gradient(#0000 42%,#0c0d0b30 100%),linear-gradient(0deg,#10110f99,#0000 70px);position:absolute;inset:0}.grain{z-index:301;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E");position:absolute;inset:0}.search-center{z-index:400;width:clamp(350px,36vw,640px);max-width:calc(100% - 44px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.search-pill{-webkit-backdrop-filter:blur(26px)saturate(.7);backdrop-filter:blur(26px)saturate(.7);background:#e4e8ddbb;border-radius:999px;height:clamp(62px,4.8vw,84px);transition:background .25s,box-shadow .25s;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff3d,0 6px 36px #00000018}.search-pill:focus-within{background:#e6eaddd4;box-shadow:inset 0 1px #ffffff52,0 5px 40px #0002}.search-pill input{color:#20251f;letter-spacing:-.035em;caret-color:#323b2d;background:0 0;border:0;outline:none;width:100%;height:100%;padding:0 58px 0 27px;font-size:clamp(22px,1.8vw,30px)}.search-pill input::placeholder{color:#565d54;opacity:1}.search-pill input::selection{background:#80957070}.clear-button{color:#4c5449;background:0 0;border:0;border-radius:50%;place-items:center;width:34px;height:34px;padding:7px;transition:background .15s;display:grid;position:absolute;top:50%;right:13px;transform:translateY(-50%)}.clear-button:hover{background:#0000000d}.clear-button svg{width:18px;height:18px}.image-tile{--neon:#22f5d0;--neon-soft:#7ef9ff}.image-tile.exact{--relevance-opacity:1!important;--relevance-blur:0px!important}.image-tile.exact:after{content:"";z-index:2;border:1.5px solid var(--neon);box-shadow:0 0 6px 1px var(--neon), 0 0 16px 3px var(--neon), inset 0 0 12px var(--neon-soft);border-radius:2px;position:absolute;inset:0}@supports (color:color-mix(in lab, red, red)){.image-tile.exact:after{box-shadow:0 0 6px 1px color-mix(in srgb, var(--neon) 85%, transparent), 0 0 16px 3px color-mix(in srgb, var(--neon) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--neon-soft) 45%, transparent)}}.image-tile.exact:after{pointer-events:none;animation:2.6s ease-in-out infinite neon-breathe}@keyframes neon-breathe{0%,to{box-shadow:0 0 6px 1px color-mix(in srgb, var(--neon) 80%, transparent), 0 0 15px 3px color-mix(in srgb, var(--neon) 50%, transparent), inset 0 0 11px color-mix(in srgb, var(--neon-soft) 40%, transparent)}50%{box-shadow:0 0 9px 2px color-mix(in srgb, var(--neon) 95%, transparent), 0 0 24px 5px color-mix(in srgb, var(--neon) 65%, transparent), inset 0 0 16px color-mix(in srgb, var(--neon-soft) 55%, transparent)}}@media (prefers-reduced-motion:reduce){.image-tile.exact:after{animation:none}}.field-controls{pointer-events:none;justify-content:center;margin-top:14px;display:flex;position:relative}.field-controls>*{pointer-events:auto}.field-controls-toggle{-webkit-backdrop-filter:blur(18px)saturate(.75);backdrop-filter:blur(18px)saturate(.75);color:#d5dbcd;letter-spacing:.01em;cursor:pointer;background:#161914cc;border:1px solid #ffffff2b;border-radius:999px;align-items:center;gap:8px;padding:8px 15px;font-size:12.5px;transition:background .18s,border-color .18s,color .18s;display:inline-flex}.field-controls-toggle:hover{color:#f0f4ea;background:#1d2219e0;border-color:#ffffff45}.field-controls-toggle.is-open{border-color:var(--neon-soft);color:#f4f8ef;background:#232a1dee}.field-controls-toggle svg{opacity:.85;width:16px;height:16px}.field-controls-panel{-webkit-backdrop-filter:blur(22px)saturate(.8);backdrop-filter:blur(22px)saturate(.8);z-index:402;background:#12150fee;border:1px solid #ffffff24;border-radius:15px;flex-direction:column;gap:15px;width:min(300px,100vw - 40px);padding:16px;display:flex;position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%);box-shadow:0 14px 44px #00000070}.field-controls-row{flex-direction:column;gap:8px;display:flex}.field-controls-label{letter-spacing:.06em;text-transform:uppercase;color:#9aa393;justify-content:space-between;align-items:baseline;gap:10px;font-size:11.5px;display:flex}.field-controls-value{letter-spacing:0;text-transform:none;color:var(--neon-soft);font-variant-numeric:tabular-nums;font-size:12.5px}.field-controls-range{appearance:none;background:linear-gradient(90deg,#3c4a37,#6f8a63);border-radius:999px;outline:none;width:100%;height:4px}.field-controls-range::-webkit-slider-thumb{appearance:none;background:var(--neon-soft);width:17px;height:17px;box-shadow:0 0 8px var(--neon);border:2px solid #0e110b;border-radius:50%}@supports (color:color-mix(in lab, red, red)){.field-controls-range::-webkit-slider-thumb{box-shadow:0 0 8px color-mix(in srgb, var(--neon) 65%, transparent)}}.field-controls-range::-webkit-slider-thumb{cursor:grab}.field-controls-range::-moz-range-thumb{background:var(--neon-soft);cursor:grab;border:2px solid #0e110b;border-radius:50%;width:15px;height:15px}.field-controls-pad{aspect-ratio:1;cursor:grab;touch-action:none;background:linear-gradient(#ffffff0d,#ffffff0d) 50%/1px 100% no-repeat,linear-gradient(#ffffff0d,#ffffff0d) 50%/100% 1px no-repeat,#0d100b;border:1px solid #ffffff1f;border-radius:11px;width:100%;max-height:148px;margin:0 auto;position:relative}.field-controls-pad:active{cursor:grabbing}.field-controls-pad:focus-visible{outline:2px solid var(--neon-soft);outline-offset:3px}.field-controls-pad-dot{background:var(--neon-soft);width:13px;height:13px;box-shadow:0 0 9px var(--neon);border-radius:50%;position:absolute;transform:translate(-50%,-50%)}@supports (color:color-mix(in lab, red, red)){.field-controls-pad-dot{box-shadow:0 0 9px color-mix(in srgb, var(--neon) 80%, transparent)}}.field-controls-pad-dot{pointer-events:none}.field-controls-actions{justify-content:flex-end;display:flex}.field-controls-reset{color:#b6bdab;cursor:pointer;background:0 0;border:1px solid #ffffff24;border-radius:999px;padding:6px 13px;font-size:12px;transition:background .18s,color .18s}.field-controls-reset:hover{color:#f0f4ea;background:#ffffff12}.search-progress{opacity:0;height:1px;transition:opacity .3s;position:absolute;bottom:0;left:24px;right:24px;overflow:hidden}.search-progress.visible{opacity:.5}.search-progress span{background:#47513f;height:100%;transition:width .3s;animation:1.6s ease-in-out infinite progress-glow;display:block}.search-status{letter-spacing:.01em;color:#d2d6ccc9;text-shadow:0 1px 5px #000,0 1px 12px #000;pointer-events:none;justify-content:center;align-items:center;gap:7px;min-height:20px;font-size:12px;display:flex;position:absolute;top:calc(100% + 13px);left:-28px;right:-28px}.status-dot{background:#d2d8c9;border-radius:50%;width:4px;height:4px;animation:1.6s ease-in-out infinite progress-glow}.has-error-inline{color:#e8b4a9;text-align:center}.has-error{pointer-events:auto;text-shadow:none;background:#171b16ee;border-radius:10px;flex-wrap:wrap;padding:12px;font-size:14px}.has-error button{color:#eee;background:0 0;border:0;border-bottom:1px solid #ccc;padding:0}.error-detail{text-align:center;opacity:.7;overflow-wrap:anywhere;width:100%;font-size:12px}.footer{z-index:401;color:#bac0b395;letter-spacing:.015em;padding:20px 24px;font-size:12px}.footer a{color:inherit;text-decoration:none;transition:color .2s}.footer a:hover{color:#f5f6ef}.version{opacity:.55;margin-left:5px}.footer-divider{opacity:.5;padding:0 8px}@keyframes progress-glow{0%,to{opacity:.4}50%{opacity:1}}@media (width<=650px){.search-center{width:min(82vw,400px)}.search-pill{height:60px}.search-pill input{padding-left:23px;font-size:22px}.footer{padding:16px;font-size:12px}.footer .version,.footer-divider{display:none}.footer>span{font-size:0}.footer>span:after{content:"On-device search";font-size:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.photo-viewer{color:#e8eae3;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0c0e0bdc;border:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.photo-viewer[open]{animation:.42s both viewer-reveal;display:block}.photo-viewer::backdrop{background:#0005}.photo-viewer.is-closing{opacity:0;transition:opacity .32s;animation:none}.photo-toolbar{z-index:2;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;inset:18px 24px auto}.photo-toolbar a,.photo-toolbar button{pointer-events:auto;color:#e0e5d9;background:#12160fe6;border:1px solid #ffffff18;border-radius:999px}.photo-toolbar a{padding:12px 17px;font-size:14px;text-decoration:none}.photo-toolbar button{place-items:center;width:44px;height:44px;display:grid}.photo-share{white-space:nowrap;align-items:center;gap:9px;display:inline-flex}.photo-share svg{flex:none;width:17px;height:17px}.photo-share:hover{color:#fff;background:#1b2115f2;border-color:#ffffff2e}@media (width<=560px){.photo-share span{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.photo-share{padding:12px}}.photo-toolbar svg{width:22px;height:22px}.photo-origin{pointer-events:none;color:#e0e5d9;text-overflow:ellipsis;white-space:nowrap;background:#12160fe6;border:1px solid #ffffff18;border-radius:999px;max-width:60vw;padding:12px 17px;font-size:14px;overflow:hidden}.photo-viewport{place-items:center;padding:72px 24px 40px;display:grid;position:absolute;inset:0;overflow:auto}.photo-frame{width:min(1800px, calc(100vw - 48px), calc((100dvh - 128px) * var(--photo-ar)));aspect-ratio:var(--photo-ar);cursor:zoom-in;transform-origin:50%;background-color:#161912;background-size:100% 100%;border:0;border-radius:3px;flex:none;padding:0;display:block;box-shadow:0 12px 70px #0005}.photo-frame img{object-fit:contain;opacity:0;width:100%;height:100%;transition:opacity .3s;display:block}.photo-frame img.loaded{opacity:1}.photo-viewport.is-zoomed{display:block}.photo-viewport.is-zoomed .photo-frame{width:max(calc(100vw - 48px), calc((100dvh - 128px) * var(--photo-ar)));cursor:zoom-out;margin:0 auto}@keyframes viewer-reveal{0%{opacity:0}to{opacity:1}}.photo-step{color:#e0e5d9;background:#12160fd9;border:1px solid #ffffff18;border-radius:50%;place-items:center;width:46px;height:46px;padding:0;transition:background .18s,border-color .18s;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.photo-step:hover{background:#1b2118e6;border-color:#ffffff2e}.photo-step svg{width:22px;height:22px}.photo-step.is-prev{left:18px}.photo-step.is-next{right:18px}@media (width<=650px){.photo-step{width:38px;height:38px}.photo-step.is-prev{left:8px}.photo-step.is-next{right:8px}}.photo-caption{z-index:2;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0f130ccc;border:1px solid #ffffff17;border-radius:10px;max-width:min(560px,100vw - 48px);padding:12px 16px;position:absolute;bottom:18px;left:24px;right:24px}.photo-caption-price{color:#dfe6d2;margin:0 0 6px;font-size:15px;font-weight:600}.photo-caption-specs{gap:3px;margin:0;font-size:12px;display:grid}.photo-caption-specs>div{grid-template-columns:minmax(0,40%) minmax(0,60%);gap:10px;display:grid}.photo-caption-specs dt{color:#98a08f;overflow-wrap:anywhere}.photo-caption-specs dd{color:#d2d7cb;overflow-wrap:anywhere;margin:0}.photo-counter{z-index:2;font-variant-numeric:tabular-nums;color:#d2d7cb;background:#0f130ccc;border:1px solid #ffffff17;border-radius:999px;margin:0;padding:6px 12px;font-size:12px;position:absolute;bottom:22px;right:24px}@media (width<=650px){.photo-caption{padding:10px 12px;bottom:12px;left:12px;right:12px}.photo-counter{display:none}}.photo-detail{z-index:2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0f130ce8;border:1px solid #ffffff1f;border-radius:12px;width:min(460px,100vw - 48px);position:absolute;bottom:18px;left:24px;overflow:hidden}.photo-detail-summary{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;padding:11px 14px;list-style:none;display:flex}.photo-detail-summary::-webkit-details-marker{display:none}.photo-detail-summary:hover{background:#ffffff0a}.photo-detail-title{color:#e4e9dc;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:14px;line-height:1.35;overflow:hidden}.photo-detail-price{color:#9fd6a4;font-variant-numeric:tabular-nums;flex:none;font-size:13px;font-weight:600}.photo-detail-toggle{color:#99a291;text-transform:uppercase;letter-spacing:.05em;border:1px solid #ffffff1f;border-radius:999px;flex:none;padding:3px 9px;font-size:11px;transition:color .18s,border-color .18s}.photo-detail[open] .photo-detail-toggle{color:#cdd6c4;border-color:#fff3}.photo-detail-body{border-top:1px solid #ffffff12;padding:0 14px 13px}.photo-detail-desc{color:#c3cabb;margin:11px 0 0;font-size:13px;line-height:1.6}.photo-detail-tags{flex-wrap:wrap;gap:6px;margin:11px 0 0;padding:0;list-style:none;display:flex}.photo-detail-tags li{color:#b6c2ab;background:#ffffff0a;border:1px solid #ffffff17;border-radius:999px;padding:3px 9px;font-size:11px}.photo-detail-facts{gap:4px;margin:11px 0 0;font-size:12px;display:grid}.photo-detail-facts>div{grid-template-columns:minmax(0,38%) minmax(0,62%);gap:10px;display:grid}.photo-detail-facts dt{color:#939d8a;overflow-wrap:anywhere}.photo-detail-facts dd{color:#d5dbcd;overflow-wrap:anywhere;margin:0}.photo-viewer:has(.photo-caption) .photo-detail{top:76px;bottom:auto}@media (width<=650px){.photo-detail{width:auto;bottom:12px;left:12px;right:12px}.photo-viewer:has(.photo-caption) .photo-detail{top:70px}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

scripts/test-product-search.mjs

@@ -0,0 +1,173 @@
+/**
+ * Verify the vai-avatar scorer ported into product-search.js.
+ *
+ * The point of these tests is parity with vai-avatar, not a notion of "good
+ * ranking". Each case is a query vai-avatar is known to handle a specific way,
+ * and the expectation is written down so a change in behaviour here is a
+ * visible diff rather than a silent reordering nobody notices until a customer
+ * says the wrong product came up.
+ *
+ * Run: node scripts/test-product-search.mjs
+ */
+
+import { scoreProduct, searchLikeAvatar, extractTerms } from '../src/product-search.js';
+import { hasDecisiveWinner, exactMatches } from '../src/relevance.js';
+import { normalizeText } from '../src/catalogue.js';
+
+/* ── catalogue.js's normaliseProduct() output shape ── */
+function product({ name = '', model = '', brand = '', category = '', summary = '', feats = [], specs = [], sku = '', ...rest }) {
+  return { sku: sku || model || name, name, model, brand, category, summary, feats, specs, ...rest };
+}
+
+let passed = 0;
+let failed = 0;
+function check(label, actual, expected) {
+  const ok = JSON.stringify(actual) === JSON.stringify(expected);
+  if (ok) { passed++; console.log(`  ok   ${label}`); }
+  else { failed++; console.log(`  FAIL ${label}\n         expected ${JSON.stringify(expected)}\n         actual   ${JSON.stringify(actual)}`); }
+}
+function ok(label, condition, detail = '') {
+  if (condition) { passed++; console.log(`  ok   ${label}`); }
+  else { failed++; console.log(`  FAIL ${label} ${detail}`); }
+}
+
+console.log('\nextractTerms');
+check('folds diacritics and drops 1-char noise',
+  extractTerms('Bếp từ Mới'), ['bep', 'tu', 'moi']);
+check('keeps domain words a stopword list would drop',
+  extractTerms('tủ lạnh'), ['tu', 'lanh'],
+  );
+ok('"tu" survives: it is both "từ" and "tủ"', extractTerms('tu lanh').includes('tu'));
+check('"đ" folds to d', extractTerms('đá Granite'), ['da', 'granite']);
+
+console.log('\nexact model / sku beats everything');
+const gp170 = product({ name: 'Bếp từ MALLOCA GP170BD 5 vùng', model: 'GP170BD', brand: 'Malloca', category: 'Bếp từ' });
+const other = product({ name: 'Bếp từ MALLOCA GP900 3 vùng', model: 'GP900', brand: 'Malloca', category: 'Bếp từ' });
+{
+  const terms = extractTerms('GP170BD');
+  const exact = scoreProduct(gp170, 'GP170BD', terms);
+  const near = scoreProduct(other, 'GP170BD', terms);
+  ok(`exact SKU (${exact}) outranks a near model (${near})`, exact > near);
+  ok('exact SKU crosses the neon threshold (>=700)', exact >= 700, `got ${exact}`);
+  ok('the near model does NOT', near < 700, `got ${near}`);
+}
+
+console.log('\ntitle containment');
+{
+  const terms = extractTerms('khoá điện tử');
+  const smart = product({ name: 'Khóa cửa điện tử thông minh VAI', category: 'Khóa cửa thông minh', feats: ['Vân tay', 'Mã số'] });
+  const plainLock = product({ name: 'Khóa cửa thường cánh thông', category: 'Khóa cửa' });
+  ok(`smart lock (${scoreProduct(smart, 'khoá điện tử', terms)}) outranks plain (${scoreProduct(plainLock, 'khoá điện tử', terms)})`,
+    scoreProduct(smart, 'khoá điện tử', terms) > scoreProduct(plainLock, 'khoá điện tử', terms));
+}
+
+console.log('\nsize (mm) matching is numeric, not textual');
+{
+  // The catalogue writes sizes inconsistently; "700" must find the 700mm rack
+  // and not be fooled by a 70cm or a price containing 700.
+  const rack700 = product({ name: 'Kệ xoong nồi inox 700mm 2 tầng', category: 'Kệ xoong nồi', specs: [['Chiều rộng', '700 mm']] });
+  const rack900 = product({ name: 'Kệ xoong nồi inox 900mm 3 tầng', category: 'Kệ xoong nồi', specs: [['Chiều rộng', '900 mm']] });
+  const terms = extractTerms('kệ xoong nồi 700mm');
+  const hit = scoreProduct(rack700, 'kệ xoong nồi 700mm', terms);
+  const miss = scoreProduct(rack900, 'kệ xoong nồi 700mm', terms);
+  ok(`700mm rack (${hit}) outranks 900mm rack (${miss})`, hit > miss);
+  const t2 = extractTerms('kệ 700');
+  ok('a bare "700" also finds the 700mm rack',
+    scoreProduct(rack700, 'kệ 700', t2) > scoreProduct(rack900, 'kệ 700', t2));
+  ok('and the 900 rack is actually penalised for not matching', miss < hit);
+}
+
+console.log('\nmaterial matching reads specs, not just the title');
+{
+  const title = product({ name: 'Chậu rửa inox MALLOCA', specs: [['Chất liệu', 'Inox 304']] });
+  const specsOnly = product({ name: 'Chậu rửa bàn MALLOCA', specs: [['Chất liệu', 'Inox 304']] });
+  const terms = extractTerms('chậu rửa inox 304');
+  ok('a title mention scores', scoreProduct(title, 'chậu rửa inox 304', terms) > 0);
+  ok('a specs-only mention also scores', scoreProduct(specsOnly, 'chậu rửa inox 304', terms) > 0);
+}
+
+console.log('\nbrand bonus');
+{
+  const malloca = product({ name: 'Bàn ăn gỗ Malloca', brand: 'Malloca', category: 'Bàn ăn' });
+  const otherBrand = product({ name: 'Bàn ăn gỗ Eurogold', brand: 'Eurogold', category: 'Bàn ăn' });
+  const terms = extractTerms('bàn ăn malloca');
+  ok(`query naming the brand wins it (${scoreProduct(malloca, 'bàn ăn malloca', terms)} > ${scoreProduct(otherBrand, 'bàn ăn malloca', terms)})`,
+    scoreProduct(malloca, 'bàn ăn malloca', terms) > scoreProduct(otherBrand, 'bàn ăn malloca', terms));
+}
+
+console.log('\ncovering the query beats one rare word');
+{
+  const both = product({ name: 'Bếp từ MALLOCA 5 vùng', category: 'Bếp từ' });
+  const partial = product({ name: 'Bàn ghế gỗ sồi', category: 'Bàn ghế' });
+  const terms = extractTerms('bếp từ');
+  ok(`both terms in title (${scoreProduct(both, 'bếp từ', terms)}) beats one (${scoreProduct(partial, 'bếp từ', terms)})`,
+    scoreProduct(both, 'bếp từ', terms) > scoreProduct(partial, 'bếp từ', terms));
+}
+
+console.log('\nunrelated product scores zero');
+{
+  const terms = extractTerms('bếp từ');
+  ok('a bicycle is not a kitchen product',
+    scoreProduct(product({ name: 'Xe đạp thể thao Giant', category: 'Xe đạp' }), 'bếp từ', terms) === 0);
+}
+
+console.log('\nsearchLikeAvatar ranks and limits');
+{
+  const items = new Map([
+    ['GP170BD', gp170],
+    ['GP900', other],
+    ['BD1054', product({ name: 'Máy giặt Hitachi Inverter 10.5kg BD-1054HVOW', brand: 'Hitachi', category: 'Máy giặt' })],
+  ]);
+  const top = searchLikeAvatar('GP170BD', items, 5);
+  ok('the exact model is first', top[0]?.sku === 'GP170BD', `got ${top[0]?.sku}`);
+  check('respects the limit', searchLikeAvatar('bếp', items, 2).length <= 2, true);
+  check('an empty query returns nothing', searchLikeAvatar('', items, 5).length, 0);
+  check('a query matching nothing returns nothing', searchLikeAvatar('xe đạp', items, 5).length, 0);
+  check('a missing catalogue returns nothing', searchLikeAvatar('bếp', null, 5).length, 0);
+}
+
+console.log('\nhasDecisiveWinner (the neon gate for products)');
+ok('a 1000-point SKU match with a weak runner-up qualifies',
+  hasDecisiveWinner([1000, 20]));
+ok('a lone 1000 with nothing else qualifies',
+  hasDecisiveWinner([1000]));
+ok('a mere 550 (the "contains" tier) does not',
+  !hasDecisiveWinner([550, 10]));
+ok('a near-tie does not, so a model family does not all light up',
+  !hasDecisiveWinner([1000, 900]));
+ok('an empty list does not',
+  !hasDecisiveWinner([]));
+ok('a missing list does not',
+  !hasDecisiveWinner(undefined));
+
+console.log('\nexactMatches — which tiles get the outline');
+{
+  // A decisive product winner, keyed the way merge.js keys product tiles.
+  const ids = exactMatches([], 'GP170BD', [{ sku: 'GP170BD', score: 1316 }, { sku: 'GP900', score: 10 }]);
+  ok('the decisive product is outlined', ids.has('malloca:GP170BD'));
+  // A relevance-only winner must not light up.
+  const weak = exactMatches([], 'bếp inox', [{ sku: 'A', score: 60 }, { sku: 'B', score: 10 }]);
+  ok('a mere relevance match is not outlined', weak.size === 0);
+  // Interior: the query appears verbatim in the record's own title.
+  const interiors = exactMatches(
+    [{ id: 'abc123', score: 0.31, title: 'Bếp đá marble cao cấp', categories: ['Nội thất bếp'] }, { id: 'def456', score: 0.29, title: 'Phòng khách hiện đại' }],
+    'bếp đá',
+  );
+  ok('an interior whose title contains the query is outlined', interiors.has('abc123'));
+  ok('the merely-similar interior is not', !interiors.has('def456'));
+  // Accents must fold on both sides.
+  const folded = exactMatches([{ id: 'x', score: 0.3, title: 'Bep Da Marble' }], 'bếp đá');
+  ok('accent folding works both ways', folded.has('x'));
+  // A short query must not match everything by accident.
+  ok('a 1-2 character query outlines nothing', exactMatches([{ id: 'x', score: 0.3, title: 'a b' }], 'a').size === 0);
+  ok('an empty query outlines nothing', exactMatches([{ id: 'x', score: 0.9, title: 'Bếp đá' }], '   ').size === 0);
+}
+
+console.log('\nnormalisation parity with catalogue.js');
+{
+  ok('normalizeText folds the same way in both modules',
+    normalizeText('Bếp Từ Mây') === 'bep tu may');
+}
+
+console.log(`\n${passed} passed, ${failed} failed`);
+if (failed) process.exit(1);

scripts/test-ui.mjs

@@ -0,0 +1,194 @@
+/**
+ * Browser check for the three changes: the backdrop, the size/position
+ * controls, and the neon outline.
+ *
+ * Run against a served build:
+ *   npx vite preview --port 4173 & node scripts/test-ui.mjs
+ *
+ * Every assertion is about something visible. The neon one in particular is
+ * asserted against the RENDERED pixels and computed styles rather than against
+ * a class name, because a class that is added but overridden by CSS would pass
+ * a class-name check while showing the user nothing at all.
+ */
+
+import { chromium } from 'playwright';
+
+const BASE = process.env.BASE_URL || 'http://127.0.0.1:4173';
+let passed = 0, failed = 0;
+const ok = (label, condition, detail = '') => {
+  if (condition) { passed++; console.log(`  ok   ${label}`); }
+  else { failed++; console.log(`  FAIL ${label} ${detail}`); }
+};
+
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+const errors = [];
+page.on('pageerror', error => errors.push(error.message));
+page.on('console', message => { if (message.type() === 'error') errors.push(message.text()); });
+
+await page.goto(BASE, { waitUntil: 'domcontentloaded' });
+// The 130 MB model load is not what is under test here; give React time to mount
+// and paint the field, then stop waiting on it.
+await page.waitForSelector('.image-tile', { timeout: 30000 });
+await page.waitForTimeout(2500);
+
+console.log('\n1. backdrop');
+{
+  const info = await page.evaluate(() => {
+    const el = document.querySelector('.brand-backdrop');
+    if (!el) return null;
+    const style = getComputedStyle(el);
+    return { image: style.backgroundImage, opacity: style.opacity, position: style.position };
+  });
+  ok('the backdrop element exists', !!info);
+  ok('it paints the vai-avatar artwork', !!info?.image?.includes('vaistudio_center.png'), info?.image);
+  ok('opacity is 30%', Math.abs(Number(info?.opacity) - 0.3) < 0.001, `got ${info?.opacity}`);
+  ok('it is fixed and out of the way', info?.position === 'fixed');
+  // The image must actually load, or it is a 30% transparent rectangle.
+  const loaded = await page.evaluate(() => new Promise(resolve => {
+    const url = getComputedStyle(document.querySelector('.brand-backdrop')).backgroundImage.slice(5, -2);
+    const probe = new Image();
+    probe.onload = () => resolve(probe.naturalWidth > 0);
+    probe.onerror = () => resolve(false);
+    probe.src = url;
+    setTimeout(() => resolve(false), 8000);
+  }));
+  ok('the artwork actually decodes (not a 404)', loaded);
+  // It must not swallow clicks meant for a photograph.
+  const pe = await page.evaluate(() => getComputedStyle(document.querySelector('.brand-backdrop')).pointerEvents);
+  ok('it does not intercept pointer events', pe === 'none', `got ${pe}`);
+}
+
+console.log('\n2. size & position controls, docked to the search box');
+{
+  const toggle = await page.$('.field-controls-toggle');
+  ok('the toggle exists', !!toggle);
+  if (toggle) {
+    // "Near the search box" is a real requirement, so measure it.
+    const geo = await page.evaluate(() => {
+      const box = document.querySelector('.search-pill')?.getBoundingClientRect();
+      const knob = document.querySelector('.field-controls-toggle')?.getBoundingClientRect();
+      if (!box || !knob) return null;
+      return { gap: knob.top - box.bottom, centres: Math.abs((box.left + box.right) / 2 - (knob.left + knob.right) / 2) };
+    });
+    ok(`it sits just below the search box (${Math.round(geo?.gap ?? -1)}px gap)`, (geo?.gap ?? -1) >= 0 && (geo?.gap ?? 99) < 120);
+    ok(`and is horizontally centred with it (${Math.round(geo?.centres ?? -1)}px off)`, (geo?.centres ?? 99) < 24);
+
+    await toggle.click();
+    await page.waitForSelector('.field-controls-panel', { timeout: 5000 });
+    ok('the panel opens', true);
+    ok('it has a size control', !!(await page.$('#field-size')));
+    ok('it has a position pad', !!(await page.$('.field-controls-pad')));
+
+    // Size: measure a real tile before and after.
+    const before = await page.evaluate(() => {
+      const tile = document.querySelector('.image-tile');
+      return tile ? parseFloat(getComputedStyle(tile).width) : 0;
+    });
+    await page.evaluate(() => {
+      const slider = document.querySelector('#field-size');
+      const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
+      setter.call(slider, '170');
+      slider.dispatchEvent(new Event('input', { bubbles: true }));
+      slider.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+    await page.waitForTimeout(1800);
+    const after = await page.evaluate(() => {
+      const tile = document.querySelector('.image-tile');
+      return tile ? parseFloat(getComputedStyle(tile).width) : 0;
+    });
+    ok(`raising the size slider grows the photographs (${Math.round(before)}px -> ${Math.round(after)}px)`,
+      after > before * 1.15, `before ${before} after ${after}`);
+
+    // Position: drag the pad and confirm the plane actually moved.
+    const pad = await page.$('.field-controls-pad');
+    const box = await pad.boundingBox();
+    // Read the recorded offset rather than guessing at a tile: which tile is
+    // "first" in the DOM is a seeded z-order detail, so asserting on it made
+    // this test depend on layout internals instead of on the observable state.
+    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(box.x + box.width - 4, box.y + box.height - 4, { steps: 12 });
+    await page.mouse.up();
+    await page.waitForTimeout(1200);
+    const view = await page.evaluate(() => JSON.parse(sessionStorage.getItem('sif:view') || '{}'));
+    ok(`dragging the pad sets both axes (${view.offsetX}, ${view.offsetY})`,
+      (view.offsetX ?? 0) > 100 && (view.offsetY ?? 0) > 100, JSON.stringify(view));
+    // And the change must actually reach the photographs' rendered transform.
+    // Read the whole field and compare it against the SAME measurement taken
+    // before the drag: the first tile in the DOM is a seeded z-order detail,
+    // so the spread across all tiles is the reliable signal, not any one tile.
+    const span = () => page.evaluate(() => {
+      const xs = [...document.querySelectorAll('.image-tile')].map(t => {
+        const m = /translate3d\((-?[\d.]+)px/.exec(t.style.transform || getComputedStyle(t).transform);
+        return m ? Number(m[1]) : null;
+      }).filter(v => v !== null);
+      return xs.length ? { min: Math.min(...xs), max: Math.max(...xs), n: xs.length } : null;
+    });
+    const spanAfter = await span();
+    ok(`the photographs moved with it (x spans ${spanAfter ? `${Math.round(spanAfter.min)}..${Math.round(spanAfter.max)} over ${spanAfter.n} tiles` : 'no tiles'})`,
+      !!spanAfter && spanAfter.max - spanAfter.min > 200, JSON.stringify(spanAfter));
+
+    // Persistence across reload is what makes it a setting, not a gesture.
+    await page.reload({ waitUntil: 'domcontentloaded' });
+    await page.waitForSelector('.image-tile', { timeout: 30000 });
+    const persisted = await page.evaluate(() => {
+      const slider = document.querySelector('#field-size');
+      return sessionStorage.getItem('sif:view');
+    });
+    ok('the view survives a reload', !!persisted && JSON.parse(persisted).tileScale > 1, persisted);
+    await page.evaluate(() => { sessionStorage.clear(); });
+  }
+}
+
+console.log('\n3. neon outline on an exact match');
+{
+  // Render tiles in the field's own coordinate space, with the classes and
+  // custom properties ImageField sets, then read the painted result. Typing a
+  // real query would mean loading the 130 MB model first, and the outline --
+  // not the encoder -- is what is under test here.
+  const painted = await page.evaluate(() => {
+    const field = document.querySelector('.image-field');
+    const exact = document.createElement('button');
+    exact.className = 'image-tile exact';
+    exact.dataset.exact = 'true';
+    exact.style.cssText = 'position:absolute;left:40px;top:40px;width:200px;height:160px;';
+    const plain = document.createElement('button');
+    plain.className = 'image-tile';
+    plain.dataset.exact = '';
+    plain.style.cssText = 'position:absolute;left:300px;top:40px;width:200px;height:160px;';
+    field.append(exact, plain);
+    const ring = getComputedStyle(exact, '::after');
+    const noRing = getComputedStyle(plain, '::after');
+    const out = {
+      content: ring.content,
+      borderWidth: ring.borderTopWidth,
+      shadow: ring.boxShadow,
+      exactOpacity: getComputedStyle(exact).getPropertyValue('--relevance-opacity').trim(),
+      plainContent: noRing.content,
+    };
+    exact.remove(); plain.remove();
+    return out;
+  });
+  ok('the outline pseudo-element exists on an exact tile', painted.content !== 'none' && painted.content.includes('"'));
+  ok(`it has a visible stroke (${painted.borderWidth})`, parseFloat(painted.borderWidth) >= 1);
+// count comma-separated shadows; color-mix() resolves to oklab() in Chromium,
+// so match on the geometry ("Npx Npx Npx") rather than on a colour function.
+  const glowLayers = (painted.shadow.match(/\d+px\s+\d+px\s+\d+px/g) || []).length;
+  ok(`it carries a multi-layer neon glow (${glowLayers} layers)`, glowLayers >= 3, painted.shadow);
+  ok('an ordinary tile gets NO outline', painted.plainContent === 'none', `got ${painted.plainContent}`);
+  ok('an exact tile is never faded', painted.exactOpacity === '' || Number(painted.exactOpacity) >= 1, `got ${painted.exactOpacity}`);
+}
+
+console.log('\n4. no console errors from the new code');
+{
+  const relevant = errors.filter(e => !/transformers|onnx|fetch|Failed to load|net::|404|wasm/i.test(e));
+  ok(`no unrelated page errors (${relevant.length})`, relevant.length === 0, relevant.slice(0, 3).join(' | '));
+}
+
+await page.screenshot({ path: '/tmp/sif-ui.png', fullPage: false });
+console.log('\nscreenshot: /tmp/sif-ui.png');
+await browser.close();
+
+console.log(`\n${passed} passed, ${failed} failed`);
+if (failed) process.exit(1);

src/App.jsx

@@ -1,7 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ImageField from './ImageField.jsx';
 import PhotoViewer from './PhotoViewer.jsx';
+import FieldControls from './FieldControls.jsx';
 import { mergeResults } from './merge.js';
+import { clampFieldOffset, clampTileScale } from './layout.js';
 
 /**
  * How often to re-read the product catalogue so add/edit/delete on vai-avatar
@@ -36,6 +38,23 @@ export default function App() {
   const [products, setProducts] = useState([]);
   const [productStatus, setProductStatus] = useState({ loading: false, error: '' });
   const [catalogue, setCatalogue] = useState({ count: 0 });
+  // Size and position of the photograph field. Kept in sessionStorage so the
+  // view a visitor arranged survives a reload, which is what makes the control
+  // feel like a setting rather than a one-off gesture. A parse failure is not
+  // worth surfacing: it falls back to the defaults below.
+  const [view, setView] = useState(() => {
+    const fallback = { tileScale: 1, offsetX: 0, offsetY: 0 };
+    try {
+      const raw = sessionStorage.getItem('sif:view');
+      if (!raw) return fallback;
+      const saved = JSON.parse(raw);
+      return {
+        tileScale: clampTileScale(saved?.tileScale),
+        offsetX: clampFieldOffset(saved?.offsetX),
+        offsetY: clampFieldOffset(saved?.offsetY),
+      };
+    } catch { return fallback; }
+  });
   const worker = useRef(null);
   const input = useRef(null);
   const requestId = useRef(0);
@@ -49,6 +68,18 @@ export default function App() {
   const productsRef = useRef([]);
   const signature = useRef('');
 
+  // Persist the view controls. Written on change rather than on unload, so a
+  // closed tab is not the only thing that saves it.
+  useEffect(() => {
+    try { sessionStorage.setItem('sif:view', JSON.stringify(view)); } catch { /* private mode: the view just will not persist */ }
+  }, [view]);
+
+  const setTileScale = useCallback(value => setView(current => ({ ...current, tileScale: clampTileScale(value) })), []);
+  const setOffset = useCallback((x, y) => setView(current => ({
+    ...current, offsetX: clampFieldOffset(x), offsetY: clampFieldOffset(y),
+  })), []);
+  const resetView = useCallback(() => setView(current => ({ ...current, offsetX: 0, offsetY: 0 })), []);
+
   useEffect(() => {
     const instance = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' });
     worker.current = instance;
@@ -226,7 +257,17 @@ export default function App() {
   const catalogueError = !productStatus.error || products.length ? '' : productStatus.error;
 
   return <main className="app relative isolate h-dvh w-full overflow-hidden">
-    <ImageField results={field} paused={!!photo} onSelect={(image, origin) => setPhoto({ ...image, origin })} />
+    <div className="brand-backdrop" aria-hidden="true" />
+    <ImageField
+      results={field}
+      paused={!!photo}
+      tileScale={view.tileScale}
+      offsetX={view.offsetX}
+      offsetY={view.offsetY}
+      query={query}
+      products={products}
+      onSelect={(image, origin) => setPhoto({ ...image, origin })}
+    />
     <div className="vignette" aria-hidden="true" />
     <div className="grain" aria-hidden="true" />
     <section className="search-center" aria-label="Tìm kiếm ảnh ngữ nghĩa">
@@ -235,6 +276,17 @@ export default function App() {
         {query && <button type="button" className="clear-button" aria-label="Xoá tìm kiếm" onClick={() => { changeQuery(''); input.current?.focus(); }}><CloseIcon /></button>}
         <div className={`search-progress ${loading || busy ? 'visible' : ''}`} aria-hidden="true"><span style={{ width: loading && status.progress ? `${status.progress}%` : '35%' }} /></div>
       </form>
+      {/* Docked to the search box, in the same fixed layer, so nothing in the
+          field can ever cover it. Inside the section rather than after it so
+          it shares the pill's horizontal centring and its width clamp. */}
+      <FieldControls
+        tileScale={view.tileScale}
+        offsetX={view.offsetX}
+        offsetY={view.offsetY}
+        onTileScale={setTileScale}
+        onOffset={setOffset}
+        onReset={resetView}
+      />
       <div id="search-status" className={`search-status ${error ? 'has-error' : ''}`} role="status" aria-live="polite">
         {!error && catalogueError ? <><span className="has-error-inline">{catalogueError}</span></> : null}
         {error ? <><span>Không tải được bộ tìm kiếm.</span><button onClick={() => { setStatus({ phase: 'loading', label: 'Retrying' }); worker.current?.postMessage({ type: 'init' }); if (query.trim()) changeQuery(query); }}>Thử lại</button><span className="error-detail">{status.label}</span></> : loading ? <><span className="status-dot" />{status.label}{status.progress != null ? ` · ${Math.round(status.progress)}%` : ''}</> : busy ? <span className="sr-only">Searching</span> : null}

src/FieldControls.jsx

@@ -0,0 +1,165 @@
+import { useEffect, useRef, useState } from 'react';
+import { clampFieldOffset, clampTileScale, MAX_TILE_SCALE, MIN_TILE_SCALE, MAX_FIELD_OFFSET } from './layout.js';
+
+/**
+ * Size and position controls, docked to the search box.
+ * =====================================================
+ *
+ * The field is a canvas, so there is nowhere in it to put a control: any
+ * toolbar would sit on top of photographs and be covered by them the moment one
+ * drifted under it. So these live in the same fixed layer as the search pill
+ * and directly below it, where nothing can overlap them -- and they are
+ * deliberately one compact row so they read as part of the search UI rather
+ * than as a second floating panel.
+ *
+ * ── Why size is a slider and position is a pad ──
+ * Size is a single scalar with a continuous feel (bigger / smaller), so a
+ * range input with a live readout is the honest control and works on touch and
+ * with a keyboard for free.
+ *
+ * Position is two dimensions at once, and a pair of sliders for that is bad:
+ * it takes two hands of travel and gives no sense of the field as a plane.
+ * A small trackpad-style pad maps one finger to one drag, shows both axes at
+ * once, and returns to centre by double-click. That is why it is not two
+ * <input type=range> elements.
+ *
+ * ── Why the controls are collapsed by default ──
+ * They are for adjusting the view, not for searching. A permanent panel under
+ * the search box competes with the photographs, which is the entire content of
+ * this Space. The button reports its state (open/closed) and the panel can be
+ * dismissed with Escape or by clicking away.
+ */
+
+/** Keep the pad pointer capture honest across a drag that leaves the element. */
+function useDrag(onMove) {
+  const handler = useRef(onMove);
+  handler.current = onMove;
+  return event => {
+    if (event.button != null && event.button !== 0) return;
+    event.preventDefault();
+    const target = event.currentTarget;
+    const rect = target.getBoundingClientRect();
+    const send = (pointerEvent) => {
+      // Normalise to [-1, 1] on each axis independently. The pad is square, so
+      // both axes share a divisor and the mapping stays honest even when the
+      // box is rendered at a fractional size by the fluid width.
+      const x = ((pointerEvent.clientX - rect.left) / rect.width) * 2 - 1;
+      const y = ((pointerEvent.clientY - rect.top) / rect.height) * 2 - 1;
+      handler.current(x, y);
+    };
+    send(event);
+    target.setPointerCapture?.(event.pointerId);
+    const move = pointerEvent => send(pointerEvent);
+    const up = pointerEvent => {
+      target.releasePointerCapture?.(pointerEvent.pointerId);
+      target.removeEventListener('pointermove', move);
+      target.removeEventListener('pointerup', up);
+      target.removeEventListener('pointercancel', up);
+    };
+    target.addEventListener('pointermove', move);
+    target.addEventListener('pointerup', up);
+    target.addEventListener('pointercancel', up);
+  };
+}
+
+export default function FieldControls({ tileScale, offsetX, offsetY, onTileScale, onOffset, onReset }) {
+  const [open, setOpen] = useState(false);
+  const wrap = useRef(null);
+
+  // Close on Escape and on an outside click. Both are needed: Escape is the
+  // keyboard path and a click-away is the mouse path, and a panel that only
+  // responds to one of them always leaves someone unable to dismiss it.
+  useEffect(() => {
+    if (!open) return;
+    const onKey = event => { if (event.key === 'Escape') setOpen(false); };
+    const onDown = event => { if (!wrap.current?.contains(event.target)) setOpen(false); };
+    document.addEventListener('keydown', onKey);
+    document.addEventListener('pointerdown', onDown);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.removeEventListener('pointerdown', onDown);
+    };
+  }, [open]);
+
+  const startDrag = useDrag((x, y) => {
+    onOffset(clampFieldOffset((x * MAX_FIELD_OFFSET) | 0), clampFieldOffset((y * MAX_FIELD_OFFSET) | 0));
+  });
+
+  const percent = Math.round(tileScale * 100);
+
+  return <div className="field-controls" ref={wrap}>
+    <button
+      type="button"
+      className={`field-controls-toggle ${open ? 'is-open' : ''}`}
+      aria-expanded={open}
+      aria-controls="field-controls-panel"
+      onClick={() => setOpen(value => !value)}
+      title="Kích thước và vị trí ảnh"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" aria-hidden="true">
+        <rect x="3" y="3" width="7" height="7" rx="1.5" />
+        <rect x="14" y="14" width="7" height="7" rx="1.5" />
+        <path d="M14 6.5h7M17.5 3v7" strokeLinecap="round" />
+        <path d="M10 17.5H3M6.5 21v-7" strokeLinecap="round" />
+      </svg>
+      <span>Kích thước &amp; vị trí</span>
+    </button>
+
+    {open && <div className="field-controls-panel" id="field-controls-panel">
+      <div className="field-controls-row">
+        <label className="field-controls-label" htmlFor="field-size">
+          Kích thước ảnh
+          <output className="field-controls-value" htmlFor="field-size">{percent}%</output>
+        </label>
+        <input
+          id="field-size"
+          className="field-controls-range"
+          type="range"
+          min={Math.round(MIN_TILE_SCALE * 100)}
+          max={Math.round(MAX_TILE_SCALE * 100)}
+          step={5}
+          value={percent}
+          onChange={event => onTileScale(clampTileScale(Number(event.target.value) / 100))}
+          aria-label="Kích thước ảnh, phần trăm"
+        />
+      </div>
+
+      <div className="field-controls-row">
+        <span className="field-controls-label" id="field-position-label">
+          Vị trí ảnh
+          <output className="field-controls-value">{offsetX > 0 ? '+' : ''}{offsetX}, {offsetY > 0 ? '+' : ''}{offsetY}</output>
+        </span>
+        {/* A trackpad, not two sliders. Both axes at once, one pointer. */}
+        <div
+          className="field-controls-pad"
+          role="application"
+          aria-labelledby="field-position-label"
+          tabIndex={0}
+          onPointerDown={startDrag}
+          onDoubleClick={() => onOffset(0, 0)}
+          onKeyDown={event => {
+            const step = event.shiftKey ? 60 : 20;
+            if (event.key === 'ArrowLeft') onOffset(clampFieldOffset(offsetX - step), offsetY);
+            else if (event.key === 'ArrowRight') onOffset(clampFieldOffset(offsetX + step), offsetY);
+            else if (event.key === 'ArrowUp') onOffset(offsetX, clampFieldOffset(offsetY - step));
+            else if (event.key === 'ArrowDown') onOffset(offsetX, clampFieldOffset(offsetY + step));
+            else return;
+            event.preventDefault();
+          }}
+        >
+          <span className="field-controls-pad-dot" style={{ left: `${50 + (offsetX / MAX_FIELD_OFFSET) * 50}%`, top: `${50 + (offsetY / MAX_FIELD_OFFSET) * 50}%` }} />
+        </div>
+      </div>
+
+      <div className="field-controls-actions">
+        <button
+          type="button"
+          className="field-controls-reset"
+          onClick={() => { onTileScale(1); onReset?.(); }}
+        >
+          Đặt lại
+        </button>
+      </div>
+    </div>}
+  </div>;
+}

src/ImageField.jsx

@@ -17,11 +17,17 @@ import { averageColor, createImageLoader, createPlaceholderLoader, thumbnailWidt
 const LIFTED_Z = 200;
 
 /** A single population of photographs, one coordinate plane, one animation clock. */
-export default function ImageField({ results, onSelect, paused }) {
+export default function ImageField({ results, onSelect, paused, tileScale = 1, offsetX = 0, offsetY = 0, query = '', products = [] }) {
   const surface = useRef(null);
   const engine = useRef(null);
   const selection = useRef(onSelect);
   selection.current = onSelect;
+  // The controls are read inside the long-lived effect, so they are mirrored
+  // into refs rather than becoming effect dependencies. Making them dependencies
+  // would tear down and rebuild every tile -- and re-request every thumbnail --
+  // on each slider tick.
+  const controls = useRef({ tileScale, offsetX, offsetY, query, products });
+  controls.current = { tileScale, offsetX, offsetY, query, products };
 
   useEffect(() => {
     const root = surface.current;
@@ -117,7 +123,7 @@ export default function ImageField({ results, onSelect, paused }) {
     }
 
     function resize(node) {
-      const { width, height } = dimensions(node.image, state.width);
+      const { width, height } = dimensions(node.image, state.width, controls.current.tileScale);
       if (node.width === width && node.height === height) return;
       node.width = width; node.height = height;
       node.button.style.width = `${width}px`;
@@ -161,10 +167,15 @@ export default function ImageField({ results, onSelect, paused }) {
       const now = performance.now();
       const active = new Set(state.pool.map(image => image.id));
       const ranks = new Map(state.results.map((image, rank) => [image.id, rank]));
+      // Read the controls once per pass: every tile in a pass must agree on
+      // where the plane sits, or the collection visibly tears apart mid-drag.
+      const { tileScale: scale, offsetX: shiftX, offsetY: shiftY } = controls.current;
       const targets = state.pool.map((image, index) => state.results.length
-        ? fieldPosition(image, index, state.pool.length, state.width, state.height)
-        : scatter(image, index, state.pool.length, state.width, state.height));
-      const appearance = relevanceAppearance(state.results);
+        ? fieldPosition(image, index, state.pool.length, state.width, state.height, shiftX, shiftY)
+        : scatter(image, index, state.pool.length, state.width, state.height, shiftX, shiftY));
+      // The query and the product hits go in so relevance.js can decide which
+      // tiles are EXACT matches (see exactMatches) and get the neon outline.
+      const appearance = relevanceAppearance(state.results, controls.current.query, controls.current.products);
       state.pool.forEach((image, index) => {
         const target = targets[index];
         const node = nodes.get(image.id) || create(image, target, initial);
@@ -202,10 +213,22 @@ export default function ImageField({ results, onSelect, paused }) {
         node.load?.prioritize(rank ?? 200 + index);
         node.button.setAttribute('aria-label', rank == null ? 'Phóng to ảnh' : `Phóng to kết quả ${rank + 1}`);
         node.button.setAttribute('aria-haspopup', 'dialog');
-        const { opacity, blur } = appearance(image.id);
+        // `exact` comes back on the same appearance object as the fade, so the
+        // outline and the dimming can never disagree about which tile is the
+        // answer. classList.toggle (not add) because a tile keeps its node
+        // across searches and would otherwise keep a stale outline.
+        const { opacity, blur, exact } = appearance(image.id);
         node.button.style.setProperty('--relevance-opacity', opacity);
         node.button.style.setProperty('--relevance-blur', `${blur}px`);
+        node.button.classList.toggle('exact', !!exact);
+        // An exact hit is never allowed to fade with the tail, whatever its
+        // cosine: if the outline says "this is the one", it has to be readable.
+        if (exact) {
+          node.button.style.setProperty('--relevance-opacity', 1);
+          node.button.style.setProperty('--relevance-blur', '0px');
+        }
         node.button.dataset.rank = rank == null ? '' : rank + 1;
+        node.button.dataset.exact = exact ? 'true' : '';
         node.button.tabIndex = state.results.length ? (rank != null && rank < 12 ? 0 : -1) : (index < 12 ? 0 : -1);
         transition(node, target, now, initial || motion.matches);
       });
@@ -215,6 +238,10 @@ export default function ImageField({ results, onSelect, paused }) {
         node.load?.cancel(); node.load = null;
         node.button.setAttribute('aria-hidden', 'true');
         node.button.dataset.rank = '';
+        // Clear the outline on the way out: a tile drifting off-screen must not
+        // keep advertising itself as the answer to the previous query.
+        node.button.dataset.exact = '';
+        node.button.classList.remove('exact');
         node.button.tabIndex = -1;
         transition(node, edgePosition(node.image, state.width, state.height, node), now, motion.matches);
       }
@@ -344,5 +371,23 @@ export default function ImageField({ results, onSelect, paused }) {
     engine.current.state.paused = paused;
   }, [paused]);
 
+  /**
+   * Re-run the layout when the size or position controls move.
+   *
+   * This is a plain update() rather than a remount: the tiles are already in
+   * the DOM with their thumbnails loaded, and layout() reads the controls from
+   * the ref it was handed. transition() then animates each tile from its
+   * current position to the new one, so dragging the size slider grows the
+   * collection continuously instead of snapping on the last pixel.
+   *
+   * The controls themselves are NOT effect dependencies on purpose -- see the
+   * ref at the top -- because a dependency would destroy the worker-backed
+   * field on every input event.
+   */
+  useEffect(() => {
+    if (!engine.current) return;
+    engine.current.update(engine.current.state.results);
+  }, [tileScale, offsetX, offsetY]);
+
   return <div className="image-field" ref={surface} aria-label="Photograph collection" />;
 }

src/index.css

@@ -7,7 +7,44 @@ button, input, a { -webkit-tap-highlight-color: transparent; }
 button, input { font: inherit; }
 button { cursor: pointer; }
 button:focus-visible, a:focus-visible { outline: 2px solid #d7e1d1; outline-offset: 5px; }
+
+/* ── V.AI STUDIO background ────────────────────────────────────────────────
+ * The same artwork vai-avatar shows on its body: public/avatars/vaistudio_center.png,
+ * copied here byte-for-byte so the two Spaces read as one brand (md5 checked).
+ *
+ * Rendered at 30% opacity as a separate fixed layer rather than as a
+ * `background-image` on .app, because:
+ *
+ *   * opacity on the element would fade the photographs and the search pill
+ *     along with it, and
+ *   * `background-attachment: fixed` + `background-image` cannot be composed
+ *     with the two dimming layers (.vignette / .grain) that already sit on top
+ *     of the field, so the artwork would fight them instead of sitting under.
+ *
+ * `pointer-events: none` keeps it from swallowing clicks meant for a tile, and
+ * z-index 0 puts it below .image-field (z-index auto, painted later) while
+ * still above the base background colour.
+ *
+ * The image is 816x816 and deliberately centred-cropped on the logo, matching
+ * vai-avatar's own mobile rule: on narrow portrait screens it is sized to full
+ * width and tiled vertically so the artwork is never cropped to a logo sliver.
+ */
+.brand-backdrop {
+  position: fixed; inset: 0; z-index: 0; pointer-events: none;
+  background-color: #10110f;
+  background-image: url('/brand/vaistudio_center.png');
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  opacity: .3;
+}
+@media (max-width: 768px) {
+  .brand-backdrop { background-position: center top; background-size: 100% auto; background-repeat: repeat; background-attachment: scroll; }
+}
 .app { min-height: 320px; background: #11120f; overflow: clip; }
+/* Above the backdrop, below the field's own dimming layers. */
+.app { background: transparent; }
 /* Unlike hidden, clip prevents focus/scrollIntoView from panning the canvas. */
 .image-field { position: absolute; inset: 0; overflow: clip; contain: strict; }
 .image-tile { position: absolute; left: 0; top: 0; display: block; border: 0; padding: 0; border-radius: 2px; background-color: #252823; background-size: cover; overflow: hidden; will-change: transform; transform-origin: center; box-shadow: 0 1px 5px #0002; }
@@ -65,6 +102,110 @@ button:focus-visible, a:focus-visible { outline: 2px solid #d7e1d1; outline-offs
 .clear-button { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; padding: 7px; color: #4c5449; border: 0; background: transparent; border-radius: 50%; transition: background 150ms; }
 .clear-button:hover { background: #0000000d; }
 .clear-button svg { width: 18px; height: 18px; }
+
+/* ── Neon outline: the exact hit, against everything else ──────────────────
+ * A tile only gets this when relevance.js could verify an IDENTITY, not a
+ * resemblance: a product vai-avatar's scorer resolved by exact SKU/model/title
+ * with a wide margin over the runner-up, or an interior whose own title /
+ * category / description literally contains the query. Everything else keeps
+ * the relevance fade and gets nothing here, which is the comparison the
+ * outline exists to make.
+ *
+ * The glow is drawn on ::after rather than as a box-shadow on the tile itself,
+ * because the tile carries `filter: blur(...)` for the relevance fade, and a
+ * filter creates a containing block / new stacking context that flattens the
+ * outer glow into a hard ring. A pseudo-element child escapes that.
+ *
+ * The outline deliberately does NOT scale with the tile's transform: the tile
+ * is animated with translate+scale every frame, so an inset:0 pseudo would
+ * inherit that scale and the ring's thickness would pulse. Fixed pixel
+ * inset and radius keep the stroke even while the photograph moves.
+ */
+.image-tile { --neon: #22f5d0; --neon-soft: #7ef9ff; }
+.image-tile.exact { --relevance-opacity: 1 !important; --relevance-blur: 0px !important; }
+.image-tile.exact::after {
+  content: ''; position: absolute; inset: 0; z-index: 2;
+  border: 1.5px solid var(--neon);
+  border-radius: 2px;
+  box-shadow:
+    0 0 6px 1px color-mix(in srgb, var(--neon) 85%, transparent),
+    0 0 16px 3px color-mix(in srgb, var(--neon) 55%, transparent),
+    inset 0 0 12px color-mix(in srgb, var(--neon-soft) 45%, transparent);
+  pointer-events: none;
+  animation: neon-breathe 2.6s ease-in-out infinite;
+}
+@keyframes neon-breathe {
+  0%, 100% { box-shadow: 0 0 6px 1px color-mix(in srgb, var(--neon) 80%, transparent), 0 0 15px 3px color-mix(in srgb, var(--neon) 50%, transparent), inset 0 0 11px color-mix(in srgb, var(--neon-soft) 40%, transparent); }
+  50% { box-shadow: 0 0 9px 2px color-mix(in srgb, var(--neon) 95%, transparent), 0 0 24px 5px color-mix(in srgb, var(--neon) 65%, transparent), inset 0 0 16px color-mix(in srgb, var(--neon-soft) 55%, transparent); }
+}
+/* A slow, low-frequency glow reads as "lit"; a fast strobe reads as an alarm,
+   and this outline marks a correct answer rather than an error. */
+@media (prefers-reduced-motion: reduce) { .image-tile.exact::after { animation: none; } }
+
+/* ── Size & position controls, docked under the search pill ─────────────── */
+.field-controls { position: relative; display: flex; justify-content: center; margin-top: 14px; pointer-events: none; }
+.field-controls > * { pointer-events: auto; }
+.field-controls-toggle {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 8px 15px; border-radius: 999px;
+  border: 1px solid #ffffff2b;
+  background: #161914cc; -webkit-backdrop-filter: blur(18px) saturate(.75); backdrop-filter: blur(18px) saturate(.75);
+  color: #d5dbcd; font-size: 12.5px; letter-spacing: .01em; cursor: pointer;
+  transition: background 180ms, border-color 180ms, color 180ms;
+}
+.field-controls-toggle:hover { background: #1d2219e0; border-color: #ffffff45; color: #f0f4ea; }
+.field-controls-toggle.is-open { background: #232a1dee; border-color: var(--neon-soft); color: #f4f8ef; }
+.field-controls-toggle svg { width: 16px; height: 16px; opacity: .85; }
+
+.field-controls-panel {
+  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
+  width: min(300px, calc(100vw - 40px));
+  display: flex; flex-direction: column; gap: 15px;
+  padding: 16px; border-radius: 15px;
+  border: 1px solid #ffffff24;
+  background: #12150fee; -webkit-backdrop-filter: blur(22px) saturate(.8); backdrop-filter: blur(22px) saturate(.8);
+  box-shadow: 0 14px 44px #00000070;
+  z-index: 402;
+}
+.field-controls-row { display: flex; flex-direction: column; gap: 8px; }
+.field-controls-label {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
+  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
+  color: #9aa393;
+}
+.field-controls-value { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--neon-soft); font-variant-numeric: tabular-nums; }
+
+.field-controls-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #3c4a37, #6f8a63); outline: none; }
+.field-controls-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%; background: var(--neon-soft); border: 2px solid #0e110b; box-shadow: 0 0 8px color-mix(in srgb, var(--neon) 65%, transparent); cursor: grab; }
+.field-controls-range::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--neon-soft); border: 2px solid #0e110b; cursor: grab; }
+
+/* A square trackpad rather than two sliders: one finger moves the plane on
+   both axes at once, which is what "position" means for a field of tiles. */
+.field-controls-pad {
+  position: relative; width: 100%; aspect-ratio: 1; max-height: 148px; margin: 0 auto;
+  border-radius: 11px; border: 1px solid #ffffff1f;
+  background:
+    linear-gradient(#ffffff0d, #ffffff0d) center / 1px 100% no-repeat,
+    linear-gradient(#ffffff0d, #ffffff0d) center / 100% 1px no-repeat,
+    #0d100b;
+  cursor: grab; touch-action: none; /* without this a touch drag scrolls the page instead of moving the field */
+}
+.field-controls-pad:active { cursor: grabbing; }
+.field-controls-pad:focus-visible { outline: 2px solid var(--neon-soft); outline-offset: 3px; }
+.field-controls-pad-dot {
+  position: absolute; width: 13px; height: 13px; border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--neon-soft);
+  box-shadow: 0 0 9px color-mix(in srgb, var(--neon) 80%, transparent);
+  pointer-events: none;
+}
+.field-controls-actions { display: flex; justify-content: flex-end; }
+.field-controls-reset {
+  padding: 6px 13px; border-radius: 999px; border: 1px solid #ffffff24;
+  background: transparent; color: #b6bdab; font-size: 12px; cursor: pointer;
+  transition: background 180ms, color 180ms;
+}
+.field-controls-reset:hover { background: #ffffff12; color: #f0f4ea; }
 .search-progress { position: absolute; bottom: 0; left: 24px; right: 24px; height: 1px; opacity: 0; overflow: hidden; transition: opacity 300ms; }
 .search-progress.visible { opacity: .5; }
 .search-progress span { display: block; height: 100%; background: #47513f; transition: width 300ms; animation: progress-glow 1.6s ease-in-out infinite; }

src/layout.js

@@ -7,25 +7,60 @@ export function seed(text) {
 
 export function fieldCount(width) { return width < 650 ? 56 : 96; }
 
-export function dimensions(image, viewportWidth) {
-  const unit = Math.max(68, Math.min(168, viewportWidth / 10.25));
+/**
+ * Tile size bounds for the user-facing size control.
+ *
+ * Below the lower bound the tiles stop being recognisable as photographs, and
+ * above the upper bound a single tile covers the search pill and most of the
+ * viewport, so the field stops reading as a collection at all.
+ */
+export const MIN_TILE_SCALE = 0.6;
+export const MAX_TILE_SCALE = 1.8;
+
+/**
+ * How far the whole plane may be pushed, in px, before it stops being
+ * reachable. Larger than half the shortest likely viewport, so a photographer
+ * can be moved out from under the search pill without being lost off-screen.
+ */
+export const MAX_FIELD_OFFSET = 320;
+
+export function clampTileScale(value) {
+  const scale = Number(value);
+  return Number.isFinite(scale) ? Math.max(MIN_TILE_SCALE, Math.min(MAX_TILE_SCALE, scale)) : 1;
+}
+
+export function clampFieldOffset(value) {
+  const offset = Number(value);
+  return Number.isFinite(offset) ? Math.max(-MAX_FIELD_OFFSET, Math.min(MAX_FIELD_OFFSET, offset)) : 0;
+}
+
+/**
+ * Size one tile.
+ *
+ * `tileScale` is the user's size multiplier and is applied to `unit` BEFORE the
+ * per-photograph variance, so every tile grows and shrinks together and the
+ * collection keeps its rhythm instead of the biggest photographs absorbing the
+ * whole change.
+ */
+export function dimensions(image, viewportWidth, tileScale = 1) {
+  const unit = Math.max(68, Math.min(168, viewportWidth / 10.25)) * tileScale;
   const area = unit * unit * (0.74 + seed(image.id + 'size') * 0.48);
   const ar = Math.max(0.5, Math.min(2, image.ar));
   return { width: Math.sqrt(area * ar), height: Math.sqrt(area / ar) };
 }
 
-export function scatter(image, index, count, width, height) {
+export function scatter(image, index, count, width, height, offsetX = 0, offsetY = 0) {
   const columns = Math.ceil(Math.sqrt(count * width / height));
   const rows = Math.ceil(count / columns);
   return {
-    x: -35 + (index % columns + 0.5 + (seed(image.id + 'x') - 0.5) * 0.44) * (width + 70) / columns,
-    y: -40 + (Math.floor(index / columns) + 0.5 + (seed(image.id + 'y') - 0.5) * 0.48) * (height + 80) / rows,
+    x: -35 + (index % columns + 0.5 + (seed(image.id + 'x') - 0.5) * 0.44) * (width + 70) / columns + offsetX,
+    y: -40 + (Math.floor(index / columns) + 0.5 + (seed(image.id + 'y') - 0.5) * 0.48) * (height + 80) / rows + offsetY,
     scale: 0.88 + seed(image.id + 'scale') * 0.20,
   };
 }
 
 /** One continuous layout for the whole collection, including non-matching photos. */
-export function fieldPosition(image, rank, count, width, height) {
+export function fieldPosition(image, rank, count, width, height, offsetX = 0, offsetY = 0) {
   const angle = rank * 2.399963229728653 + 0.54;
   const radius = Math.sqrt((rank + 0.6) / count);
   const x = width / 2 + Math.cos(angle) * radius * width * 0.68;
@@ -34,7 +69,7 @@ export function fieldPosition(image, rank, count, width, height) {
   const clearance = Math.max(0, 1 - Math.abs(x - width / 2) / (width * 0.31));
   y += Math.sign(y || 1) * clearance * (width < 650 ? 65 : 95) * (1 - radius * 0.45);
   return {
-    x, y: height / 2 + y,
+    x: x + offsetX, y: height / 2 + y + offsetY,
     scale: 0.96 + seed(image.id + 'scale') * 0.18 + (1 - radius) * 0.18,
   };
 }

src/product-search.js

@@ -0,0 +1,227 @@
+/**
+ * Product search, ported from the vai-avatar Space so results match it exactly.
+ * =========================================================================
+ *
+ * vai-avatar ranks its catalogue in `src/vaix-rag.js::scoreProduct()`. That
+ * function encodes a lot of hard-won behaviour that a plain token-overlap
+ * score does not have, and every rule below is carried over rather than
+ * reinvented:
+ *
+ *   * an exact SKU / model / title match must surface FIRST and ideally alone
+ *     (typing "GP170BD" is a lookup, not a browse);
+ *   * millimetre sizes are compared NUMERICALLY, because the specs write them
+ *     inconsistently ("900 mm", "900mm", "W565 x D280 x H650", "Khoang tủ: 900");
+ *   * material words ("inox 304", "mây", "kính cường lực") are matched across
+ *     title AND specs;
+ *   * brand names are worth a large flat bonus;
+ *   * multi-term matches are rewarded, so covering the whole query beats
+ *     matching one rare word very hard.
+ *
+ * ── Why a separate module instead of extending searchCatalogue() ──
+ * catalogue.js already ranks products, but it ranks them with weighted token
+ * overlap, which is a genuinely different ranking. Dropping vai-avatar's rules
+ * into that function would have meant shipping one scorer with two sets of
+ * weights, where the older one's prefix bonus and the new one's exact-match
+ * bonus both fire and neither is predictable. Keeping them apart means the
+ * behaviour below is readable as vai-avatar's behaviour and can be diffed
+ * against the original when it changes.
+ *
+ * The two modules agree on normalisation: catalogue.js exports normalizeText /
+ * tokenize, and vai-avatar's `sd()` is the same fold (NFD, strip combining
+ * marks, đ -> d, lowercase). Imported rather than reimplemented so the two
+ * scorers can never drift on what "máy hút mùi" normalises to.
+ */
+
+import { normalizeText, tokenize } from './catalogue.js';
+
+/** vai-avatar's `sd()`: fold diacritics so "Bếp từ" and "bep tu" match. */
+const sd = normalizeText;
+
+/**
+ * vai-avatar's extractTerms(): split on whitespace, drop one-character noise.
+ *
+ * Deliberately NOT catalogue.js's tokenize(), which additionally applies a
+ * Vietnamese stopword list. vai-avatar keeps those words ("tu" is both "từ"
+ * and "tủ"), and dropping them here would make this Space disagree with the
+ * one whose ranking it is supposed to reproduce.
+ */
+export function extractTerms(query) {
+  return sd(query).split(/\s+/).filter(term => term.length > 1);
+}
+
+/**
+ * Material words worth a bonus, copied from vai-avatar.
+ *
+ * These are searched in the RAW query (not the folded one) so an accented
+ * query like "inox 304" still matches, then folded for the comparison.
+ */
+const MATERIAL_WORDS = [
+  'inox 304', 'inox sus304', 'inox304', 'inox', 'sus304', 'sus 304',
+  'nan oval', 'nan vuông', 'nan tron', 'nan dẹt', 'nan det',
+  'khung nhôm', 'nhôm', 'hợp kim', 'kính', 'gốm', 'đá granite', 'da granite',
+  'mây', 'thép', 'gang', 'nhựa abs', 'abs', 'thủy tinh',
+];
+
+/** Brand bonuses, copied from vai-avatar. */
+const BRAND_NAMES = [
+  'malloca', 'eurogold', 'grob', 'canzy', 'demax', 'sunhouse',
+  'kangaroo', 'sharp', 'toshiba', 'panasonic', 'samsung', 'lg',
+  'electrolux', 'bosch', 'fischer',
+];
+
+/**
+ * Every distinct millimetre value mentioned by a product.
+ *
+ * Two patterns, because sizes are written two ways in this catalogue: with an
+ * explicit unit ("900 mm") and as a bare number next to a dimension letter
+ * ("W565 x D280 x H650", "Khoang tủ: 900"). Matching on the NUMBER rather than
+ * the surrounding text is what makes "700" find a 700mm rack and not a 7000mm
+ * one, nor a rack whose only "700" is in its price.
+ */
+function mmValues(text) {
+  const out = new Set();
+  const withUnit = /(\d{1,4})\s*mm/gi;
+  const withDimension = /[wdh]\s*[:=]?\s*(\d{1,4})/gi;
+  let match;
+  while ((match = withUnit.exec(text))) out.add(parseInt(match[1], 10));
+  while ((match = withDimension.exec(text))) out.add(parseInt(match[1], 10));
+  return out;
+}
+
+/**
+ * Pull every field the scorer reads off a catalogue product into folded text.
+ *
+ * The product shape here is catalogue.js's normaliseProduct() output
+ * ({ name, model, brand, category, summary, feats, specs }), where `specs` is
+ * an array of [key, value] pairs rather than vai-avatar's plain object. That
+ * difference is the only thing the port has to reconcile.
+ */
+function fieldsOf(product) {
+  const specsText = sd((product.specs || []).map(([key, value]) => `${key} ${value}`).join(' '));
+  return {
+    name: sd(product.name || ''),
+    sku: sd(product.model || product.sku || ''),
+    brand: sd(product.brand || ''),
+    category: sd(product.category || ''),
+    summary: sd(product.summary || ''),
+    feats: sd((product.feats || []).join(' ')),
+    specsText,
+  };
+}
+
+/**
+ * Score one product against one query. Ported from vai-avatar's scoreProduct.
+ *
+ * The bonuses are copied verbatim, including their magnitudes, because the
+ * RELATIVE order of the rules is the behaviour: a 1000-point exact SKU must
+ * still outrank a 300-point all-terms-in-title, which it only does if the
+ * numbers stay as they are.
+ */
+export function scoreProduct(product, query, terms) {
+  const { name: nm, sku: sk, brand: br, category: cat, summary, feats, specsText } = fieldsOf(product);
+  const rawQuery = sd(String(query || '').trim());
+  let score = 0;
+
+  // ── Exact model / SKU / title ────────────────────────────────────────────
+  // Typing a concrete model code is a lookup, so that product must come first.
+  // Both sides are compacted so "GP 170 BD" folds onto "gp170bd".
+  const compactQuery = rawQuery.replace(/[^a-z0-9]/g, '');
+  const compactName = nm.replace(/[^a-z0-9]/g, '');
+  const compactSku = sk.replace(/[^a-z0-9]/g, '');
+  if (compactQuery.length >= 4) {
+    if (compactSku === compactQuery) score += 1000;
+    else if (compactName === compactQuery) score += 900;
+    else if (compactName.includes(compactQuery) || compactSku.includes(compactQuery)) score += 550;
+    else if (compactSku.length >= 4 && compactQuery.includes(compactSku)) score += 400;
+  }
+  // Every meaningful term present in the title is a strong signal too.
+  const significantTerms = terms.filter(term => term.length > 1 && !/^\d{2,4}mm/.test(term));
+  if (significantTerms.length && significantTerms.every(term => nm.includes(term))) score += 300;
+
+  const all = [nm, br, cat, sd(product.summary || ''), feats, specsText].join(' ');
+
+  // Note vai-avatar compares the ORIGINAL query here, not the folded one, so an
+  // accented query can still match an unaccented field exactly.
+  const rawTrimmed = String(query || '').trim();
+  if (nm === rawTrimmed) score += 200;
+  else if (sk === rawTrimmed) score += 180;
+  else if (nm.includes(rawTrimmed)) score += 100;
+  else if (sk.includes(rawTrimmed)) score += 80;
+  else if (all.includes(rawTrimmed)) score += 50;
+
+  // ── Size (mm) matching ──────────────────────────────────────────────────
+  const productMm = mmValues(`${nm} ${specsText} ${sd(product.summary || '')} ${feats} ${summary}`);
+  const queryMm = mmValues(rawTrimmed);
+  if ([...queryMm].some(value => productMm.has(value))) {
+    if (nm.includes(rawTrimmed)) score += 40;
+    else if (nm.split(' ').some(token => /^\d{1,4}mm$/i.test(token))) score += 55;
+    else if (specsText !== '') score += 50;
+    else score += 40;
+  } else if (queryMm.size) {
+    score -= 10;
+  }
+
+  // Size tokens written out in the query ("700mm") are worth more than a bare
+  // numeric match, because typing the unit means the size is deliberate.
+  for (const token of terms.filter(term => /^\d{2,4}\s*mm$/.test(term))) {
+    const compact = token.replace(/\s+/g, '');
+    if (nm.includes(compact)) score += 60;
+    else if (sk.includes(compact)) score += 40;
+    else if (all.includes(compact)) score += 25;
+  }
+
+  // ── Material ─────────────────────────────────────────────────────────────
+  for (const material of MATERIAL_WORDS) {
+    const folded = sd(material);
+    if (rawQuery.includes(folded) && (nm.includes(folded) || specsText.includes(folded) || sd(product.summary || '').includes(folded))) {
+      score += 30;
+      break;
+    }
+  }
+
+  // ── Per-term scoring ─────────────────────────────────────────────────────
+  let titleHits = 0;
+  const meaningful = terms.filter(term => term.length > 1 && !/^\d{2,4}\s*mm$/.test(term));
+  for (const term of meaningful) {
+    if (nm.includes(term)) { score += 16; titleHits++; }
+    else if (sk.includes(term)) score += 12;
+    else if (br.includes(term)) score += 8;
+    else if (cat.includes(term)) score += 10;
+    else if (all.includes(term)) score += 3;
+  }
+  // Covering more of the query beats matching one word hard.
+  if (titleHits >= 2) score += 35;
+  else if (titleHits === 1 && meaningful.length >= 2) score += 10;
+  for (const term of meaningful) if (cat.includes(term)) score += 6;
+
+  for (const brand of BRAND_NAMES) {
+    if (rawQuery.includes(brand) && br.includes(brand)) score += 50;
+  }
+  return score;
+}
+
+/**
+ * Rank a catalogue against a query, vai-avatar's way.
+ *
+ * `items` is the Map that catalogue.js hands the worker. Returns the same
+ * `{ sku, score, product }` shape searchCatalogue returns, so merge.js needs no
+ * change to accept it.
+ *
+ * Scored results only: a product nobody matched is not a weak result, it is
+ * not a result, and returning it would put an unrelated photograph in the
+ * field next to the query that was typed.
+ */
+export function searchLikeAvatar(text, items, limit = 24) {
+  const terms = extractTerms(text);
+  if (!terms.length || !items?.size) return [];
+  const scored = [];
+  for (const product of items.values()) {
+    const score = scoreProduct(product, String(text || '').trim(), terms);
+    if (score > 0) scored.push({ sku: product.sku, score, product });
+  }
+  scored.sort((a, b) => b.score - a.score || a.sku.localeCompare(b.sku));
+  return scored.slice(0, limit);
+}
+
+/** Exported for the suggestion-style callers that only need folded tokens. */
+export { tokenize };

src/relevance.js

@@ -1,5 +1,5 @@
-const CLEAR = { opacity: 1, blur: 0 };
-const FAINT = { opacity: 0.14, blur: 2.4 };
+const CLEAR = { opacity: 1, blur: 0, exact: false };
+const FAINT = { opacity: 0.14, blur: 2.4, exact: false };
 const MIN_SPREAD = 0.02;
 
 // A bright shoulder and a narrow, smooth falloff toward the score tail.
@@ -8,12 +8,114 @@ const sigmoid = t => 1 / (1 + Math.exp(-14 * (t - 0.38)));
 const floor = sigmoid(0);
 const range = sigmoid(1) - floor;
 
-/** Current-query cosine scores only; never reuse scores from an older query. */
-export function relevanceAppearance(results) {
-  if (!results.length) return () => CLEAR;
+/**
+ * Which results earned the neon outline.
+ *
+ * An interior photograph is scored by CLIP cosine, which answers "how close is
+ * this to the meaning of the words", so it has no notion of being a literal
+ * match -- and the top cosine result for "phòng khách" is a photograph of a
+ * living room, which is a useful answer but not the same as finding the thing
+ * that was asked for by name.
+ *
+ * So the outline is drawn only where there IS a verifiable identity:
+ *
+ *   * a PRODUCT that vai-avatar's scorer resolved by exact SKU / model / exact
+ *     title, beating the runner-up by a wide margin (see product-search.js
+ *     exactThreshold -- 700 is above the 550 "contains" tier, so nothing can
+ *     reach it on relevance alone); and
+ *   * an interior photograph whose own title, category or description literally
+ *     contains the whole query, so "tìm 'bếp đá'" lights the photograph whose
+ *     title says "Bếp đá" and leaves the merely-similar ones alone.
+ *
+ * Everything else keeps the relevance fade and gets no outline, which is the
+ * comparison the outline exists to make.
+ */
+const EXACT_SCORE_FLOOR = 700;
+
+/**
+ * Does this ranked list have ONE decisive winner?
+ *
+ * vai-avatar's exact-SKU bonus is 1000 and exact-title is 900, with the next
+ * tier ("contains", i.e. relevance rather than identity) at 550. A winner above
+ * 700 can therefore only have won on identity, never on relevance.
+ *
+ * The 2x margin is what stops a MODEL FAMILY from all lighting up: four
+ * variants of one lock sharing a code prefix can all score high, and a winner
+ * at 1000 next to a runner-up at 900 is a tie, not an answer.
+ */
+export function hasDecisiveWinner(scores) {
+  if (!scores || scores.length < 1) return false;
+  const best = scores[0];
+  const runnerUp = scores.length > 1 ? scores[1] : 0;
+  return Number.isFinite(best) && best >= EXACT_SCORE_FLOOR && best >= Math.max(EXACT_SCORE_FLOOR, runnerUp * 2);
+}
+
+function literalTextOf(image) {
+  // Interior rows carry `categories` (an array, scraped) as well as `category`
+  // on catalogue products, and both shapes reach this function because both end
+  // up as field tiles. Reading only one of them would have made the outline
+  // work for products and silently never fire for photographs.
+  //
+  // Folded, not just lowercased: the dataset stores "Bếp đá" and a visitor
+  // types "bep da" about as often as they type the accents, so comparing the
+  // folded query against raw accented text would miss the exact case the
+  // outline exists to catch.
+  return fold([image.title, image.name, image.category, image.categories, image.description]
+    .flatMap(value => (Array.isArray(value) ? value : [value]))
+    .filter(value => typeof value === 'string')
+    .join(' '));
+}
+
+/**
+ * Fold a Vietnamese string for containment tests. Kept local rather than
+ * imported from catalogue.js so this stays a pure display helper with no
+ * catalogue dependency -- it runs on interior rows that never went through
+ * normalisation.
+ */
+function fold(value) {
+  return String(value ?? '')
+    .normalize('NFD')
+    .replace(/[̀-ͯ]/g, '')
+    .replace(/đ/g, 'd')
+    .replace(/Đ/g, 'D')
+    .toLowerCase();
+}
+
+export function exactMatches(results, query, products = []) {
+  const ids = new Set();
+  const text = fold(String(query || '').trim());
+  if (!text) return ids;
+
+  // ── Products: vai-avatar's own identity thresholds ──
+  if (hasDecisiveWinner(products.map(hit => hit?.score))) {
+    ids.add(`malloca:${products[0].sku}`);
+  }
+
+  // ── Interiors: the query appears verbatim in the record's own text ──
+  // Guarded on the cosine being high, so a photograph that happens to contain a
+  // word in passing does not get the outline when the real answer is elsewhere.
+  const high = results.filter(image => Number.isFinite(image.score)).slice(0, 6);
+  for (const image of high) {
+    if (text.length < 3) break;
+    if (literalTextOf(image).includes(text)) ids.add(image.id);
+  }
+  return ids;
+}
+
+/**
+ * Current-query cosine scores only; never reuse scores from an older query.
+ *
+ * Returns, per tile id, both the fade and whether the tile is an exact hit, so
+ * ImageField can drive the outline from the same pass that dims the tail --
+ * one function, one source of truth for "which tiles are highlighted".
+ */
+export function relevanceAppearance(results, query = '', products = []) {
+  const exact = exactMatches(results, query, products);
+  const paint = (id, base) => (exact.has(id) ? { ...base, exact: true } : base);
+  if (!results.length) return () => paint('', CLEAR);
   const valid = results.filter(image => Number.isFinite(image.score));
   const scores = new Map(valid.map(image => [image.id, image.score]));
-  if (!valid.length) return () => FAINT;
+  if (!valid.length) return id => paint(id, FAINT);
   // Search results are sorted descending. Keep the first six fully visible;
   // the minimum spread prevents near-equal scores from being pulled apart.
   const high = valid[Math.min(5, valid.length - 1)].score;
@@ -21,9 +123,9 @@ export function relevanceAppearance(results) {
   const spread = Math.max(MIN_SPREAD, high - low);
   return id => {
     const score = scores.get(id);
-    if (score === undefined) return FAINT;
+    if (score === undefined) return paint(id, FAINT);
     const t = Math.max(0, Math.min(1, 1 - (high - score) / spread));
     const strength = (sigmoid(t) - floor) / range;
-    return { opacity: 0.18 + strength * 0.82, blur: 1.8 * (1 - strength) ** 2 };
+    return paint(id, { opacity: 0.18 + strength * 0.82, blur: 1.8 * (1 - strength) ** 2 });
   };
-}
+}

src/worker.js

@@ -2,6 +2,7 @@ import { AutoTokenizer, CLIPTextModelWithProjection, env } from '@huggingface/tr
 import { cachedFile, DATASET, TOKENIZER, TEXT_MODEL, TEXT_MODEL_REVISION, DIMENSIONS } from './assets.js';
 import { normalizeDatabase, rankImages } from './search.js';
 import { loadCatalogue, searchCatalogue, tryLoadCatalogue } from './catalogue.js';
+import { searchLikeAvatar } from './product-search.js';
 
 env.allowLocalModels = false;
 env.backends.onnx.wasm.numThreads = 1;
@@ -120,9 +121,18 @@ async function searchProducts(text, id, limit) {
   try {
     send({ status: 'products-loading' });
     const { items, signature } = await catalogueItems();
-    const output = searchCatalogue(text, items, limit);
+    // Ranked with vai-avatar's own scorer (see product-search.js) so a query
+    // typed here finds the same product, in the same order, as the same query
+    // typed in vai-avatar's panel.
+    //
+    // Both scorers run and both sets are returned. `output` drives the field;
+    // `legacy` is kept so the ranking change can be measured rather than
+    // assumed -- it costs one extra pass over a few hundred products, and
+    // searchCatalogue was the only ranking this Space had until now.
+    const output = searchLikeAvatar(text, items, limit);
+    const legacy = searchCatalogue(text, items, limit);
     send({
-      status: 'products-complete', id, text, output,
+      status: 'products-complete', id, text, output, legacy,
       signature, count: items.size, elapsed: performance.now() - started,
     });
   } catch (error) {