PageSourceSearch

https://orby-gamma.vercel.app/

html orby-gamma.vercel.app collected 2026-10-03 07:26:42 UTC 351,253 bytes, 6,553 lines download raw bytes

1<!DOCTYPE html>
2<!-- GENERATED — do not edit. Edit index.html + partials/, then npm run build. -->
3<html lang="en">
4  <head>
5    <meta charset="UTF-8" />
6    <meta
7      name="viewport"
8      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, interactive-widget=resizes-visual"
9    />
10    <!-- /mobile landing: base + mobile-landing class before any relative asset links -->
11    
11<script>
12      (function () {
13        try {
14          var pathname = location.pathname || '/';
15          var path = pathname.replace(/\/$/, '') || '/';
16          if (pathname === '/mobile') {
17            location.replace('/mobile/' + location.search + location.hash);
18            return;
19          }
20          if (pathname === '/mobile/app') {
21            location.replace('/mobile/app/' + location.search + location.hash);
22            return;
23          }
24          if (pathname === '/mobile/learn') {
25            location.replace('/mobile/learn/' + location.search + location.hash);
26            return;
27          }
28          // Mobile home → minimal gate at /mobile/ (keep in sync with orbyMobileLandingBoot.js)
29          if (path === '/' || path === '/index.html') {
30            if (typeof window !== 'undefined' && window.__ORBY_DEBUG_MOBILE_LANDING__ === true) {
31              return;
32            }
33            try {
34              if (sessionStorage.getItem('orby_mobile_landing') === '1') return;
35            } catch (e) {}
36            try {
37              var q = new URLSearchParams(location.search);
38              if (q.get('orbyMobile') === '1' || q.has('mobileLanding')) return;
39            } catch (e) {}
40            var isPhone = /iPhone|iPod|Windows Phone/i.test(navigator.userAgent || '');
41            if (!isPhone) {
42              isPhone =
43                /Android/i.test(navigator.userAgent || '') &&
44                /Mobile/i.test(navigator.userAgent || '');
45            }
46            if (!isPhone) {
47              try {
48                isPhone =
49                  window.matchMedia &&
50                  window.matchMedia('(max-width: 768px)').matches;
51              } catch (e) {}
52            }
53            if (isPhone) {
54              location.replace('/mobile/' + location.search + location.hash);
55            }
56          }
57        } catch (e) {}
58      })();
59    </script>
59
60    
60<script>
61      (function () {
62        try {
63          var path = (location.pathname || '/').replace(/\/$/, '') || '/';
64          if (path !== '/mobile/learn') return;
65          var base = document.createElement('base');
66          base.href = '/';
67          document.head.appendChild(base);
68          document.documentElement.classList.add('mobile-landing', 'orby-home-scroll');
69        } catch (e) {}
70      })();
71    </script>
71
72    <meta name="theme-color" content="#080808" />
73    <style>
74      /* First-paint boot — external styles.css may load a frame later */
75      html,
76      body {
77        background: #080808;
78      }
79      /* Homepage scroll shell — match UI --orby-app-bg until modules run */
80      html.orby-home-scroll,
81      html.orby-home-scroll body,
82      html.orby-home-scroll #app,
83      html.orby-home-scroll.orby-dropzone-shell-pending .workspace,
84      html.orby-home-scroll.orby-dropzone-shell-pending body.dropzone-visible .workspace,
85      html.orby-home-scroll body.dropzone-visible .dropzone {
86        background-color: #080808 !important;
87        background: #080808 !important;
88      }
89      .orby-sr {
90        background: #080808;
91      }
92      .dropzone {
93        opacity: 0;
94      }
95      .dropzone-hero-deco__img {
96        visibility: hidden;
97        opacity: 0;
98      }
99      .look-filter-tile__thumb:not([src]) {
100        visibility: hidden;
101      }
102      .shelf.is-shelf-hidden {
103        visibility: hidden;
104        opacity: 0;
105        pointer-events: none;
106      }
107      .viewport-load-spinner {
108        visibility: hidden;
109        opacity: 0;
110      }
111      /* Scroll nav — desktop hides until scroll-up reveal; mobile always on (see shell CSS) */
112      html:not(.mobile-landing) .orby-marketing-scroll-nav:not(.orby-marketing-scroll-nav--visible) {
113        visibility: hidden !important;
114        opacity: 0 !important;
115        pointer-events: none !important;
116        transform: translate3d(0, -100%, 0) !important;
117      }
118      html.mobile-landing .orby-marketing-scroll-nav {
119        display: block !important;
120        visibility: visible !important;
121        opacity: 1 !important;
122        pointer-events: auto !important;
123        transform: none !important;
124      }
125      html.mobile-landing .dropzone-disclaimer {
126        display: none !important;
127      }
128    </style>
129<!-- Open Graph / Facebook -->
130    <meta property="og:type" content="website" />
131    <meta property="og:title" content="Orby — 3D viewer and virtual studio in the browser" />
132    <meta property="og:description" content="Drop a GLB or SVG. Light, grade, and export — locally, no account. Free at orby.studio" />
133    <meta property="og:image" content="https://orby.studio/assets/images/orby-shareimage.jpg" />
134    <meta property="og:image:secure_url" content="https://orby.studio/assets/images/orby-shareimage.jpg" />
135    <meta property="og:image:type" content="image/jpeg" />
136    <meta property="og:image:width" content="1200" />
137    <meta property="og:image:height" content="630" />
138    <meta property="og:url" content="https://orby.studio/" />
139    <meta property="og:site_name" content="Orby" />
140    
141    <!-- Twitter -->
142    <meta name="twitter:card" content="summary_large_image" />
143    <meta name="twitter:title" content="Orby — 3D viewer and virtual studio in the browser" />
144    <meta name="twitter:description" content="Drop a GLB or SVG. Light, grade, and export — locally, no account. Free at orby.studio" />
145    <meta name="twitter:image" content="https://orby.studio/assets/images/orby-shareimage.jpg" />
146    <meta name="twitter:image:alt" content="Orby - 3D Model Viewer" />
147    
148    <title>Orby — 3D viewer and virtual studio in the browser</title>
149    <link
150      rel="icon"
151      type="image/svg+xml"
152      href="./assets/images/favicon.svg"
153    />
154    <!-- Browser gate + platform classes before styles.css -->
155    
155<script src="./scripts/orbyUnsupportedBrowserBoot.js"></script>
155
156    
156<script src="./scripts/orbySafariBrowserBoot.js"></script>
156
157    <link rel="stylesheet" href="./styles/orby-unsupported-browser-gate.css" />
158    <link rel="stylesheet" href="./styles/fontawesome/orby-icons.css" />
159    <link rel="stylesheet" href="./styles.css?v=0.5.1052" />
160    <link rel="stylesheet" href="./styles/background-gradient.css" />
161    <link rel="stylesheet" href="./styles/background-image.css" />
162    <link rel="stylesheet" href="./styles/map-inspect.css" />
163    <link rel="stylesheet" href="./styles/shape-library.css" />
164    <link rel="stylesheet" href="./styles/marketing/09-scroll-cue-responsive.css" />
165    
165<script>
166      (function () {
167        if (typeof window !== 'undefined' && window.__ORBY_SR_OFF__ === true) {
168          document.documentElement.classList.add('orby-sr-on');
169          return;
170        }
171        try {
172          var SK = 'orby_sr_s';
173          var CK = 'orby_sr_c';
174          var CHALLENGE_EVERY_N_VISITS = 5;
175          var prev = parseInt(sessionStorage.getItem(CK) || '0', 10);
176          var visitSeq = (isNaN(prev) ? 0 : prev) + 1;
177          sessionStorage.setItem(CK, String(visitSeq));
178          if (visitSeq % CHALLENGE_EVERY_N_VISITS === 0) {
179            sessionStorage.removeItem(SK);
180          }
181          if (sessionStorage.getItem(SK) === '1') {
182            document.documentElement.classList.add('orby-sr-on');
183          }
184        } catch (e) {}
185      })();
186    </script>
186
187    <!-- Before first paint on mobile — avoid one-frame desktop dropzone flash until main.js runs -->
188    
188<script src="./scripts/orbyMobileLandingBoot.js"></script>
188
189    <!-- Desktop homepage — orby-home-scroll before styles.css gray studio tokens paint -->
190    
190<script src="./scripts/orbyHomeScrollBoot.js"></script>
190
191    <!-- Reduced marketing tier before first paint — disables dropzone frost blur on lower-spec home loads -->
192    
192<script src="./scripts/orbyMarketingPerformanceBoot.js"></script>
192
193    <!-- Empty in source; CI may set via BUG_REPORT_API_URL (see build.js). -->
194    <meta name="orby-version" content="0.5.1052" />
195    <meta name="orby-bug-report-api" content="" />
196    <meta name="orby-stats-api" content="" />
197    <!-- Cloudflare Turnstile site key; CI via TURNSTILE_SITE_KEY (see build.js). Pair with TURNSTILE_SECRET_KEY on Vercel. -->
198    <meta name="orby-turnstile-site-key" content="" />
199  </head>
200  <body data-theme="violet" class="dropzone-visible">
201    <!-- orby:homepage-site-nav -->
202    <nav class="orby-marketing-scroll-nav orby-marketing-scroll-nav--mobile-fixed" data-orby-marketing-scroll-nav aria-label="Site">
203        <div class="orby-marketing-scroll-nav__bar">
204          <a class="orby-marketing-scroll-nav__brand" href="./index.html" data-orby-marketing-scroll-top aria-label="Back to top">
205            <span class="orby-marketing-scroll-nav__brand-mark" aria-hidden="true"></span>
206          </a>
207          <div class="orby-marketing-scroll-nav__links orby-marketing-scroll-nav__links--inline"><a class="orby-marketing-scroll-nav__link" href="./about/">About</a><a class="orby-marketing-scroll-nav__link" href="./support/">Support</a><a class="orby-marketing-scroll-nav__link" href="./stats/">Statistics</a></div>
208          <button type="button" class="orby-marketing-scroll-nav__menu-toggle" data-orby-marketing-nav-toggle aria-expanded="false" aria-controls="orby-site-nav-menu" aria-label="Open menu">
209            <span class="orby-marketing-scroll-nav__menu-bar" aria-hidden="true"></span>
210            <span class="orby-marketing-scroll-nav__menu-bar" aria-hidden="true"></span>
211            <span class="orby-marketing-scroll-nav__menu-bar" aria-hidden="true"></span>
212          </button>
213          <div class="orby-marketing-scroll-nav__cta"><span class="orby-magic-btn-host"><button type="button" class="orby-magic-btn orby-magic-btn--nav-outline orby-marketing-scroll-nav__browse" data-orby-marketing-browse>
214            <span class="orby-magic-btn__fill" aria-hidden="true"></span>
215            <span class="orby-magic-btn__inner">
216              <span class="orby-magic-btn__label">Browse files</span>
217              <span class="orby-magic-btn__arrow" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 8h9M9 4.5L12.5 8 9 11.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
218            </span>
219          </button></span></div>
220        </div>
221        <div class="orby-marketing-scroll-nav__menu" id="orby-site-nav-menu" data-orby-marketing-nav-menu aria-hidden="true">
222          <div class="orby-marketing-scroll-nav__links orby-marketing-scroll-nav__links--overlay"><a class="orby-marketing-scroll-nav__link" href="./about/">About</a><a class="orby-marketing-scroll-nav__link" href="./support/">Support</a><a class="orby-marketing-scroll-nav__link" href="./stats/">Statistics</a></div>
223          <div class="orby-marketing-scroll-nav__menu-social"><a class="orby-marketing-scroll-nav__menu-social-link" href="https://www.instagram.com/dropittoorby" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><span class="orby-marketing-scroll-nav__menu-social-icon orby-marketing-scroll-nav__menu-social-icon--instagram" aria-hidden="true"></span></a><a class="orby-marketing-scroll-nav__menu-social-link" href="https://github.com/stellanjoh2/orby" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><span class="orby-marketing-scroll-nav__menu-social-icon orby-marketing-scroll-nav__menu-social-icon--github" aria-hidden="true"></span></a></div>
224        </div>
225      </nav>
226    <div
227      id="orby-sr-root"
228      class="orby-sr"
229      role="dialog"
230      aria-modal="true"
231      aria-labelledby="orby-sr-title"
232    >
233      <div class="orby-sr__panel">
234        <h1 id="orby-sr-title" class="orby-sr__title">Orby</h1>
235        <form class="orby-sr__form" id="orby-sr-form" autocomplete="off">
236          <label class="orby-sr__label" for="orby-sr-field"
237            ><span class="orby-sr__label-text">Continue</span></label
238          >
239          <input
240            id="orby-sr-field"
241            class="orby-sr__input"
242            type="text"
243            name="orby-sr-field"
244            autocomplete="off"
245            autocorrect="off"
246            autocapitalize="off"
247            spellcheck="false"
248          />
249          <p class="orby-sr__msg" id="orby-sr-msg" aria-live="polite"></p>
250          <button type="submit" class="orby-sr__btn accent-action-btn">
251            Continue
252          </button>
253        </form>
254      </div>
255    </div>
256    <section
257      id="orbyNotFoundPage"
258      class="orby-not-found-page"
259      hidden
260      aria-hidden="true"
261      role="alert"
262      aria-labelledby="orbyNotFoundTitle"
263    >
264      <div class="orby-not-found-copy">
265        <h1 id="orbyNotFoundTitle" class="orby-not-found-title">404</h1>
266        <p class="orby-not-found-message">
267          <span class="orby-not-found-emphasis">Nothing to see here.</span> You've drifted beyond the scene bounds.
268          There's nothing out here — no geometry, no light, no ground. Just void.
269        </p>
270        <button
271          type="button"
272          id="orbyNotFoundReturnBtn"
273          class="orby-pill-btn orby-pill-btn--accent orby-pill-btn--xl orby-not-found-btn"
274        >
275          Return home screen →
276        </button>
277      </div>
278    </section>
279    
279<script src="./scripts/orbyShellReady.js"></script>
279
280    <div id="app">
281      <main class="workspace">
282        <section class="viewport">
283          <canvas id="webgl" tabindex="0"></canvas>
284          <canvas
285            id="viewportCaptureFreeze"
286            class="viewport-capture-freeze"
287            hidden
288            aria-hidden="true"
289          ></canvas>
290          <div
291            id="viewportExportPreviewBanner"
292            class="viewport-export-preview-banner"
293            hidden
294            aria-hidden="true"
295            role="status"
296          >
297            <span class="viewport-export-preview-banner__spinner" aria-hidden="true">
298              <img src="./assets/images/favicon.svg" alt="" width="40" height="40" draggable="false" />
299            </span>
300            <span class="viewport-export-preview-banner__copy">
301              <span class="viewport-export-preview-banner__title">Preview mode</span>
302              <span class="viewport-export-preview-banner__hint">Orbit locked — exit to adjust camera</span>
303            </span>
304            <button
305              type="button"
306              id="viewportExportPreviewExit"
307              class="accent-action-btn viewport-export-preview-banner__exit"
308              aria-label="Exit preview and restore camera orbit"
309            >
310              <i class="fa-solid fa-stop" aria-hidden="true"></i>
311              <span>Exit preview</span>
312            </button>
313          </div>
314          <div
315            id="viewportOfflineExportOverlay"
316            class="viewport-offline-export"
317            hidden
318            aria-hidden="true"
319            role="status"
320          >
321            <div class="viewport-offline-export__center">
322              <div class="viewport-offline-export__section">
323                <p class="viewport-offline-export__title">Rendering PNG sequence</p>
324                <p class="viewport-offline-export__progress">
325                  <span class="viewport-offline-export__progress-leading">
326                    <span class="viewport-offline-export__spinner" aria-hidden="true"></span>
327                    <span id="viewportOfflineExportFrame" class="viewport-offline-export__stat">Frame 0 / 0</span>
328                  </span>
329                </p>
330              </div>
331              <div class="viewport-offline-export__section">
332                <div class="viewport-offline-export__table-wrap">
333                  <div id="viewportOfflineExportFilename" class="viewport-offline-export__filename" hidden>
334                    <span class="viewport-offline-export__filename-label">Filename</span>
335                    <span id="viewportOfflineExportFilenameValue" class="viewport-offline-export__filename-value">—</span>
336                  </div>
337                  <table class="viewport-offline-export__table">
338                    <tbody id="viewportOfflineExportSummary"></tbody>
339                  </table>
340                </div>
341              </div>
342              <div class="viewport-offline-export__section">
343                <p id="viewportOfflineExportElapsed" class="viewport-offline-export__elapsed">
344                  <span class="viewport-offline-export__elapsed-label">Elapsed</span>
345                  <span id="viewportOfflineExportElapsedValue" class="viewport-offline-export__elapsed-value">0s</span>
346                </p>
347                <p class="viewport-offline-export__helper">
348                  Long sequences — especially many frames at 4K — can take several minutes. If your browser
349                  says the page is unresponsive, choose <strong>Wait</strong>. Rendering continues in the
350                  background and should finish soon.
351                </p>
352                <p class="viewport-offline-export__helper">
353                  If creating a .ZIP truly fails, switch to <strong>Chrome or Edge</strong>, choose an
354                  <strong>Output folder</strong>, and export again. <strong>Safari and Firefox</strong> do not
355                  support folder export — frames download as a ZIP instead.
356                </p>
357              </div>
358              <div id="viewportOfflineExportFooter" class="viewport-offline-export__footer">
359                <button
360                  type="button"
361                  id="viewportOfflineExportCancel"
362                  class="orby-pill-btn orby-pill-btn--normal orby-pill-btn--danger viewport-offline-export__cancel"
363                >
364                  Cancel render
365                </button>
366                <button
367                  type="button"
368                  id="viewportOfflineExportGoBack"
369                  class="orby-pill-btn orby-pill-btn--normal orby-pill-btn--accent viewport-offline-export__go-back"
370                  hidden
371                  aria-hidden="true"
372                >
373                  Go back
374                </button>
375              </div>
376            </div>
377            <div
378              id="viewportOfflineExportPreview"
379              class="viewport-offline-export__preview"
380              hidden
381              aria-hidden="true"
382            >
383              <div class="viewport-offline-export__preview-frame">
384                <canvas
385                  id="viewportOfflineExportPreviewCanvas"
386                  class="viewport-offline-export__preview-canvas"
387                  width="16"
388                  height="9"
389                ></canvas>
390              </div>
391              <p class="viewport-offline-export__preview-caption">Live frame preview</p>
392            </div>
393          </div>
394          <div
395            id="viewportLetterbox219"
396            class="viewport-letterbox"
397            hidden
398            aria-hidden="true"
399          >
400            <div class="viewport-letterbox__bar viewport-letterbox__bar--top"></div>
401            <div class="viewport-letterbox__bar viewport-letterbox__bar--bottom"></div>
402            <div class="viewport-letterbox__bar viewport-letterbox__bar--left"></div>
403            <div class="viewport-letterbox__bar viewport-letterbox__bar--right"></div>
404          </div>
405          <div
406            id="compositionGridOverlay"
407            class="composition-grid-overlay"
408            hidden
409            aria-hidden="true"
410          >
411            <!-- Full-viewport cross + diagonals (true panel corners; not clipped to the 16×9 frame) -->
412            <svg
413              class="composition-grid-overlay__viewport-guides"
414              viewBox="0 0 100 100"
415              preserveAspectRatio="none"
416              width="100%"
417              height="100%"
418              role="presentation"
419              focusable="false"
420              aria-hidden="true"
421            >
422              <line x1="50" y1="0" x2="50" y2="100" />
423              <line x1="0" y1="50" x2="100" y2="50" />
424              <line x1="0" y1="0" x2="100" y2="100" />
425              <line x1="100" y1="0" x2="0" y2="100" />
426            </svg>
427            <!-- Largest centered square — matches shape-library thumbnail center-crop -->
428            <div class="composition-grid-overlay__thumb-safe" aria-hidden="true"></div>
429            <!-- Horizontal thirds: full panel width (inner SVG can letterbox X on wide views) -->
430            <div class="composition-grid-overlay__thirds-horizontal" aria-hidden="true">
431              <span class="composition-grid-overlay__thirds-horizontal-line composition-grid-overlay__thirds-horizontal-line--upper"></span>
432              <span class="composition-grid-overlay__thirds-horizontal-line composition-grid-overlay__thirds-horizontal-line--lower"></span>
433            </div>
434            <!-- Inner frame: largest 16×9 — action safe (90%) + vertical thirds + center circle -->
435            <div class="composition-grid-overlay__frame">
436            <svg
437              class="composition-grid-overlay__svg"
438              viewBox="0 0 160 90"
439              preserveAspectRatio="xMidYMid meet"
440              overflow="visible"
441              width="100%"
442              height="100%"
443              role="presentation"
444              focusable="false"
445            >
446              <!-- HD action safe: 90% of picture area (5% inset each side) -->
447              <rect
448                class="composition-grid-overlay__action-safe"
449                x="8"
450                y="4.5"
451                width="144"
452                height="81"
453              />
454              <g class="composition-grid-overlay__lines">
455                <!-- Rule of thirds (vertical only — horizontals are full-bleed above) -->
456                <line x1="53.333333" y1="0" x2="53.333333" y2="90" />
457                <line x1="106.666667" y1="0" x2="106.666667" y2="90" />
458                <!-- Center circle (~10% of frame height) -->
459                <circle cx="80" cy="45" r="4.5" />
460              </g>
461            </svg>
462            <div
463              class="composition-grid-overlay__portrait-crop"
464              aria-hidden="true"
465            >
466              <div class="composition-grid-overlay__portrait-crop-shade composition-grid-overlay__portrait-crop-shade--left" aria-hidden="true"></div>
467              <div class="composition-grid-overlay__portrait-crop-shade composition-grid-overlay__portrait-crop-shade--right" aria-hidden="true"></div>
468              <svg
469                class="composition-grid-overlay__portrait-crop-svg"
470                viewBox="0 0 90 160"
471                preserveAspectRatio="xMidYMid meet"
472                overflow="visible"
473                width="100%"
474                height="100%"
475                role="presentation"
476                focusable="false"
477              >
478                <rect
479                  class="composition-grid-overlay__action-safe"
480                  x="4.5"
481                  y="8"
482                  width="81"
483                  height="144"
484                />
485                <g class="composition-grid-overlay__lines">
486                  <line x1="0" y1="53.333333" x2="90" y2="53.333333" />
487                  <line x1="0" y1="106.666667" x2="90" y2="106.666667" />
488                  <line x1="30" y1="0" x2="30" y2="160" />
489                  <line x1="60" y1="0" x2="60" y2="160" />
490                  <circle cx="45" cy="80" r="4.5" />
491                </g>
492              </svg>
493            </div>
494            </div>
495          </div>
496          <div class="dropzone" id="dropzone">
497            <p class="dropzone-disclaimer">
498              <i class="fa-solid fa-circle-exclamation dropzone-disclaimer__icon" aria-hidden="true"></i>
499              In Development. Chrome, Brave, and Safari only.
500            </p>
501            <div class="dropzone-hero-deco" aria-hidden="true">
502              <picture class="dropzone-hero-deco__slot dropzone-hero-deco__slot--ur">
503                <img
504                  class="dropzone-hero-deco__img"
505                  data-src="./assets/marketing/orby-hero-area-topright.jpg"
506                  alt=""
507                  width="2880"
508                  height="2880"
509                  decoding="async"
510                />
511              </picture>
512              <picture class="dropzone-hero-deco__slot dropzone-hero-deco__slot--ll">
513                <img
514                  class="dropzone-hero-deco__img"
515                  data-src="./assets/marketing/orby-hero-area-bottomleft.jpg"
516                  alt=""
517                  width="2880"
518                  height="2880"
519                  decoding="async"
520                />
521              </picture>
522            </div>
523            <div id="logotypeAnimation" class="drop-logo"></div>
524            <p class="drop-primary"><span class="drop-primary-line">Drag and drop your <span class="brand-highlight">GLB</span></span><span class="drop-primary-line drop-primary-line--second">or <span class="brand-highlight">SVG</span> file here</span></p>
525            <div class="dropzone-actions">
526              <span class="orby-magic-btn-host"><button
527                id="browseButton"
528                type="button"
529                class="orby-magic-btn dropzone-btn"
530                data-tooltip="Open a 3D file (GLB, SVG, …) or a saved .orby scene"
531              >
532                <span class="orby-magic-btn__fill" aria-hidden="true"></span>
533                <span class="orby-magic-btn__inner">
534                  <span class="orby-magic-btn__label">Browse files</span>
535                  <span class="orby-magic-btn__arrow" aria-hidden="true">
536                    <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
537                      <path d="M3.5 8h9M9 4.5L12.5 8 9 11.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
538                    </svg>
539                  </span>
540                </span>
541              </button></span>
542            </div>
543            <p class="drop-secondary">Orby is built for <strong class="brand-highlight">glTF</strong>/<strong class="brand-highlight">GLB</strong> and <strong class="brand-highlight">SVG</strong> extrusion. Files stay on your machine — nothing is uploaded. Read more on the&nbsp;<a href="./legal/privacy-policy.html" class="drop-link">privacy policy</a>. For the best experience, go full screen. · <a href="#" id="blankCanvasLink" class="drop-link">Blank canvas</a> · <a href="#" id="loadTestLink" class="drop-link">Load test object</a><a href="#" id="debugExportOverlayLink" class="drop-link" hidden aria-hidden="true">Preview export overlay</a><a href="/?orby404Debug=1" id="debug404Link" class="drop-link" hidden aria-hidden="true">Debug 404</a><br /><br /><span class="drop-shortcuts-row"><span class="drop-shortcuts-inline"><strong>V</strong> — Hide UI · <strong>F</strong> — Focus camera · <strong>Q/W/E/R</strong> — Select / move / rotate / scale · <strong>
5431/2/3/4</strong> — Display modes</span></span></p>
544            <div class="dropzone-hero-credits">
545              <p class="dropzone-hero-credit">
546                <span class="dropzone-hero-credit__label">Featured Dropzone Artists:</span>
547                <span class="dropzone-hero-credit__sep" aria-hidden="true"> · </span>
548                <a href="https://sketchfab.com/3d-models/purple-music-0302fbca6ac745bc8db2a6248c21438a" target="_blank" rel="noopener noreferrer">Purple Music</a>
549                by Moon on
550                <a href="https://sketchfab.com/" target="_blank" rel="noopener noreferrer">Sketchfab</a>
551                <span class="dropzone-hero-credit__sep" aria-hidden="true"> · </span>
552                <a href="https://www.meshy.ai/sv/3d-models/Prismatic-Dragon-v2-019e06ea-6c30-7548-b991-3d69ca464e36" target="_blank" rel="noopener noreferrer">Prismatic Dragon</a>
553                by kaesar3d on
554                <a href="https://www.meshy.ai/" target="_blank" rel="noopener noreferrer">Meshy</a>
555              </p>
556            </div>
557          </div>
558          <input
559            type="file"
560            id="fileInput"
561            class="sr-only"
562            accept=".glb,.gltf,.obj,.fbx,.stl,.usd,.usda,.usdc,.usdz,.svg,.bvh,.orby"
563            aria-label="Import 3D model file"
564          />
565          <button
566            id="fullscreenToggle"
567            class="viewport-fullscreen-btn"
568            type="button"
569            data-tooltip="Toggle fullscreen"
570          >
571            <i class="fa-solid fa-expand"></i>
572          </button>
573          <div
574            id="viewportLoadSpinner"
575            class="viewport-load-spinner"
576            aria-hidden="true"
577            role="status"
578          >
579            <img src="./assets/images/favicon.svg" alt="" width="70" height="70" draggable="false" />
580            <span id="viewportLoadSpinnerElapsed" class="viewport-load-spinner__elapsed" hidden></span>
581          </div>
582          <div id="demoLogotype" class="demo-logotype"></div>
583          <div
584            id="watermarkOverlay"
585            class="watermark-overlay"
586            data-placement="left"
587            data-logo="orby"
588            aria-hidden="true"
589            hidden
590          >
591            <div class="watermark-overlay__logo">
592              <div class="watermark-overlay__orby" id="watermarkOverlayOrby"></div>
593              <div class="watermark-overlay__custom" id="watermarkOverlayCustom" role="img" aria-label="Custom logotype" hidden></div>
594            </div>
595            <div class="watermark-overlay__credit" id="watermarkOverlayCredit"></div>
596          </div>
597          <div
598            id="shapeLibraryPanel"
599            class="shape-library-panel"
600            hidden
601            role="dialog"
602            aria-modal="false"
603            aria-label="Shape library"
604          >
605            <div class="shape-library-panel__chrome">
606              <div class="load-settings-header shape-library-panel__header">
607                <button
608                  type="button"
609                  id="shapeLibraryPanelDrag"
610                  class="shape-library-panel__drag"
611                  aria-label="Drag panel"
612                >
613                  <span class="shape-library-panel__grip" aria-hidden="true"></span>
614                </button>
615                <p class="shape-library-panel__title">Shape Library</p>
616                <button
617                  type="button"
618                  id="shapeLibraryPanelClose"
619                  class="close-btn"
620                  aria-label="Close"
621                ></button>
622              </div>
623              <div class="shape-library-panel__body">
624                <div id="shapeLibraryGrid" class="shape-library-grid" role="list"></div>
625              </div>
626            </div>
627          </div>
628          <div
629            id="mapPreviewPanel"
630            class="map-preview-panel"
631            hidden
632            role="dialog"
633            aria-modal="false"
634            aria-label="Texture map preview"
635          >
636            <div class="map-preview-panel__chrome">
637              <div class="load-settings-header map-preview-panel__header">
638                <button
639                  type="button"
640                  id="mapPreviewPanelDrag"
641                  class="map-preview-panel__drag"
642                  aria-label="Drag panel"
643                >
644                  <span class="map-preview-panel__grip" aria-hidden="true"></span>
645                </button>
646                <div id="mapPreviewPanelTabs" class="map-preview-panel__tabs"></div>
647                <button
648                  type="button"
649                  id="mapPreviewPanelClose"
650                  class="close-btn"
651                  aria-label="Close"
652                ></button>
653              </div>
654              <div class="map-preview-panel__body">
655                <img
656                  id="mapPreviewPanelImage"
657                  class="map-preview-panel__image"
658                  alt=""
659                  role="button"
660                  tabindex="0"
661                  aria-label="Inspect texture at full size"
662                  data-tooltip="Inspect at 100% scale"
663                />
664              </div>
665            </div>
666          </div>
667          <div
668            id="mapFullsizeView"
669            class="map-fullsize-view"
670            hidden
671            role="dialog"
672            aria-modal="true"
673            aria-labelledby="mapFullsizeName"
674          >
675            <div class="map-fullsize-view__header load-settings-header">
676              <div class="map-fullsize-view__meta">
677                <p id="mapFullsizeMeta" class="map-fullsize-view__meta-line">
678                  <span id="mapFullsizeName" class="map-fullsize-view__name">Texture map</span><span
679                    id="mapFullsizeDims"
680                    class="map-fullsize-view__dims"
681                  ></span>
682                </p>
683              </div>
684              <p class="map-fullsize-view__hint">Drag to pan · Esc to close</p>
685              <button
686                type="button"
687                id="mapFullsizeClose"
688                class="close-btn"
689                aria-label="Close full-size preview"
690              ></button>
691            </div>
692            <div id="mapFullsizeViewport" class="map-fullsize-view__viewport">
693              <canvas id="mapFullsizeCanvas" class="map-fullsize-view__canvas" aria-hidden="true"></canvas>
694              <img id="mapFullsizeImage" class="map-fullsize-view__source" alt="" draggable="false" hidden />
695            </div>
696          </div>
697        </section>
698
699        <aside class="shelf is-shelf-hidden" id="shelf">
700          <nav class="tabs" role="tablist" aria-label="Orby Panels">
701            <button class="tab active" data-tab="mesh" aria-selected="true" data-tooltip="Object">
702              <i class="fa-solid fa-cube"></i>
703            </button>
704            <button class="tab" data-tab="studio" aria-selected="false" data-tooltip="Studio">
705              <i class="fa-solid fa-lightbulb"></i>
706            </button>
707            <button class="tab" data-tab="render" aria-selected="false" data-tooltip="Camera & FX">
708              <i class="fa-solid fa-camera"></i>
709            </button>
710            <button class="tab" data-tab="export" aria-selected="false" data-tooltip="Export">
711              <i class="fa-solid fa-file-export"></i>
712            </button>
713            <button class="tab" data-tab="info" aria-selected="false" data-tooltip="Information">
714              <i class="fa-solid fa-circle-info"></i>
715            </button>
716          </nav>
717
718          <div class="shelf-scroll">
719          <div class="panels">
720            <!-- Shelf panels: edit partials/shelf-panels/*.html (stitched at build + dev serve) -->
721            <h2 class="panel-header-title" data-header="mesh">Object</h2>
722            <section class="panel visible" data-panel="mesh">
723
724              <div class="panel-block">
725                <div class="block-title">Display</div>
726                <div class="mode-icons" role="group">
727                  <label class="mode-icon" data-mode="shaded" data-tooltip="Shaded — Full lighting and materials">
728                    <input
729                      type="radio"
730                      name="shading"
731                      value="shaded"
732                      checked
733                    />
734                    <img src="./assets/images/modeicon-color.png" alt="Shaded" />
735                  </label>
736                  <label class="mode-icon" data-mode="textures" data-tooltip="Unlit — Textures without lighting">
737                    <input type="radio" name="shading" value="textures" />
738                    <span class="mode-icon__flat" role="img" aria-label="Unlit"></span>
739                  </label>
740                  <label class="mode-icon" data-mode="clay" data-tooltip="Clay — Uniform material preview">
741                    <input type="radio" name="shading" value="clay" />
742                    <img src="./assets/images/modeicon-clay.png" alt="Clay" />
743                  </label>
744                  <label class="mode-icon" data-mode="wireframe" data-tooltip="Wireframe — Mesh structure view">
745                    <input type="radio" name="shading" value="wireframe" />
746                    <img src="./assets/images/modeicon-wire.png" alt="Wire" />
747                  </label>
748                </div>
749              </div>
750
751              <div class="panel-block" id="mapInspectBlock" hidden>
752                <div class="block-title">Maps</div>
753                <div
754                  id="mapInspectGrid"
755                  class="map-inspect-grid"
756                  role="group"
757                  aria-label="Texture map preview"
758                ></div>
759              </div>
760
761              <div class="panel-block" id="fbxMapSlotsBlock" hidden>
762                <div class="subsection" data-subsection="fbxMapSlots" id="fbxMapSlotsSub
762section">
763                  <div class="block-title">
764                    <span class="block-title-name">
765                      <span>Map Slots</span>
766                      <span class="dev-badge" data-tooltip="This feature is still under development" tabindex="0" role="img" aria-label="This feature is still under development"><i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i></span>
767                    </span>
768                  </div>
769                  <p class="panel-hint map-slots-hint">FBX — drop the whole folder (FBX + PNGs) to auto-assign maps named like MaterialName_BaseColor.png. To override one slot, pick a material target, then assign per part. Packed ORM: red = AO, green = roughness, blue = metallic.</p>
770                  <label class="select-line map-slot-material-line" id="fbxMapMaterialLine" hidden>
771                    <span data-tooltip="FBX files often duplicate materials per mesh; we group by material name.">Material</span>
772                    <select id="fbxMapMaterial" aria-label="Material to assign textures to"></select>
773                  </label>
774                  <input type="file" id="fbxMapFileInput" class="sr-only" accept="image/*,.png,.jpg,.jpeg,.webp,.tif,.tiff,.bmp" tabindex="-1" aria-hidden="true" />
775                  <div class="map-slot-row">
776                    <span class="map-slot-label">Albedo</span>
777                    <div class="map-slot-control" data-fbx-map-row="albedo">
778                      <button type="button" class="map-slot-choose" data-fbx-map-slot="albedo">Choose</button>
779                      <button type="button" class="map-slot-file" data-fbx-map-slot="albedo" hidden data-tooltip="Replace texture"></button>
780                      <button type="button" class="map-slot-clear" data-fbx-map-clear="albedo" hidden aria-label="Remove texture" data-tooltip="Remove texture">
781                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
782                      </button>
783                    </div>
784                  </div>
785                  <div class="map-slot-row">
786                    <span class="map-slot-label">Normal</span>
787                    <div class="map-slot-control" data-fbx-map-row="normal">
788                      <button type="button" class="map-slot-choose" data-fbx-map-slot="normal">Choose</button>
789                      <button type="button" class="map-slot-file" data-fbx-map-slot="normal" hidden data-tooltip="Replace texture"></button>
790                      <button type="button" class="map-slot-clear" data-fbx-map-clear="normal" hidden aria-label="Remove texture" data-tooltip="Remove texture">
791                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
792                      </button>
793                    </div>
794                  </div>
795                  <div class="map-slot-row">
796                    <span class="map-slot-label" data-tooltip="Single texture: ambient occlusion in red, roughness in green, metallic in blue">ORM Packed</span>
797                    <div class="map-slot-control" data-fbx-map-row="orm">
798                      <button type="button" class="map-slot-choose" data-fbx-map-slot="orm">Choose</button>
799                      <button type="button" class="map-slot-file" data-fbx-map-slot="orm" hidden data-tooltip="Replace texture"></button>
800                      <button type="button" class="map-slot-clear" data-fbx-map-clear="orm" hidden aria-label="Remove texture" data-tooltip="Remove texture">
801                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
802                      </button>
803                    </div>
804                  </div>
805                  <div class="map-slot-row">
806                    <span class="map-slot-label">Roughness</span>
807                    <div class="map-slot-control" data-fbx-map-row="roughness">
808                      <button type="button" class="map-slot-choose" data-fbx-map-slot="roughness">Choose</button>
809                      <button type="button" class="map-slot-file" data-fbx-map-slot="roughness" hidden data-tooltip="Replace texture"></button>
810                      <button type="button" class="map-slot-clear" data-fbx-map-clear="roughness" hidden aria-label="Remove texture" data-tooltip="Remove texture">
811                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
812                      </button>
813                    </div>
814                  </div>
815                  <div class="map-slot-row">
816                    <span class="map-slot-label">Metallic</span>
817                    <div class="map-slot-control" data-fbx-map-row="metallic">
818                      <button type="button" class="map-slot-choose" data-fbx-map-slot="metallic">Choose</button>
819                      <button type="button" class="map-slot-file" data-fbx-map-slot="metallic" hidden data-tooltip="Replace texture"></button>
820                      <button type="button" class="map-slot-clear" data-fbx-map-clear="metallic" hidden aria-label="Remove texture" data-tooltip="Remove texture">
821                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
822                      </button>
823                    </div>
824                  </div>
825                  <div class="map-slot-row">
826                    <span class="map-slot-label">Occlusion</span>
827                    <div class="map-slot-control" data-fbx-map-row="occlusion">
828                      <button type="button" class="map-slot-choose" data-fbx-map-slot="occlusion">Choose</button>
829                      <button type="button" class="map-slot-file" data-fbx-map-slot="occlusion" hidden data-tooltip="Replace texture"></button>
830                      <button type="button" class="map-slot-clear" data-fbx-map-clear="occlusion" hidden aria-label="Remove texture" data-tooltip="Remove texture">
831                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
832                      </button>
833                    </div>
834                  </div>
835                  <div class="map-slot-row">
836                    <span class="map-slot-label">Displacement</span>
837                    <div class="map-slot-control" data-fbx-map-row="displacement">
838                      <button type="button" class="map-slot-choose" data-fbx-map-slot="displacement">Choose</button>
839                      <button type="button" class="map-slot-file" data-fbx-map-slot="displacement" hidden data-tooltip="Replace texture"></button>
840                      <button type="button" class="map-slot-clear" data-fbx-map-clear="displacement" hidden aria-label="Remove texture" data-tooltip="Remove texture">
841                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
842                      </button>
843                    </div>
844                  </div>
845                  <div class="map-slot-row">
846                    <span class="map-slot-label">Emissive</span>
847                    <div class="map-slot-control" data-fbx-map-row="emissive">
848                      <button type="button" class="map-slot-choose" data-fbx-map-slot="emissive">Choose</button>
849                      <button type="button" class="map-slot-file" data-fbx-map-slot="emissive" hidden data-tooltip="Replace texture"></button>
850                      <button type="button" class="map-slot-clear" data-fbx-map-clear="emissive" hidden aria-label="Remove texture" data-tooltip="Remove texture">
851                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
852                      </button>
853                    </div>
854                  </div>
855                  <div class="map-slot-row">
856                    <span class="map-slot-label">Opacity</span>
857                    <div class="map-slot-control" data-fbx-map-row="opacity">
858                      <button type="button" class="map-slot-choose" data-fbx-map-slot="opacity">Choose</button>
859                      <button type="button" class="map-slot-file" data-fbx-map-slot="opacity" hidden data-tooltip="Replace texture"></button>
860                      <button type="button" class="map-slot-clear" data-fbx-map-clear="opacity" hidden aria-label="Remove texture" data-tooltip="Remove texture">
861                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
862                      </button>
863                    </div>
864                  </div>
865                  <div class="panel-block-divider map-slots-tuning-divider" aria-hidden="true"></div>
866                  <p class="panel-hint map-slots-tuning-title">Map tuning</p>
867                  <label class="select-line map-slot-tuning-line">
868                    <span data-tooltip="How tangent normals are oriented. Match albedo works for most FBX folder drops; use OpenGL or DirectX when bumps look wrong.">Normal convention</span>
869                    <select id="fbxMapNormalConvention" aria-label="Normal map convention">
870                      <option value="match-albedo">Match albedo</option>
871                      <option value="opengl">OpenGL</option>
872                      <option value="directx">DirectX</option>
873                    </select>
874                  </label>
875                  <label class="select-line map-slot-tuning-line">
876                    <span data-tooltip="Roughness, metallic, AO, and ORM can use UV2 when your bake used a second set. Normal maps always use UV1.">Detail maps UV</span>
877                    <select id="fbxMapPbrUvChannel" aria-label="UV channel for detail maps">
878                      <option value="0">UV1 (first)</option>
879                      <option value="1">UV2 (second)</option>
880                    </select>
881                  </label>
882                  <label class="select-line map-slot-tuning-line">
883                    <span data-tooltip="Channel order inside packed ORM textures. glTF/Blender/Unreal: R=AO, G=roughness, B=metallic. Unity HDRP: R=metallic, G=AO, B=roughness.">ORM packing</span>
884                    <select id="fbxMapOrmPacking" aria-label="Packed ORM channel layout">
885                      <option value="gltf">glTF / Blender / Unreal</option>
886                      <option value="unity-hdrp">Unity HDRP</option>
887                    </select>
888                  </label>
889                  <div class="export-controls map-slots-action-row">
890                    <button type="button" class="accent-action-btn" id="fbxMapRescanFolder" data-tooltip="Re-match textures from the dropped folder into empty slots only.">Scan folder again</button>
891                    <button type="button" class="accent-action-btn" id="fbxMapApplyTuningAll" data-tooltip="Copy this material's tuning to every material in the FBX.">Apply tuning to all</button>
892                  </div>
893                </div>
894              </div>
895
896              <div class="panel-block">
897                <div class="subsection" data-subsection="material">
898                  <div class="block-title has-reset">
899                    <span>Material</span>
900                    <button class="block-reset-btn" data-reset="material" aria-label="Reset Material" data-tooltip="Reset Material settings">
901                      <i class="fa-solid fa-rotate-left"></i>
902                      <span class="sr-only">Reset</span>
903                    </button>
904                  </div>
905                  <label class="slider-line">
906                    <span data-tooltip="Adjust overall material brightness">Brightness</span>
907                    <input
908                      id="materialBrightness"
909                      type="range"
910                      min="0"
911                      max="2.5"
912                      step="0.01"
913                      value="1.0"
914                    />
915                    <span class="value" data-output="materialBrightness">1.0</span>
916                  </label>
917                  <label class="slider-line">
918                    <span data-tooltip="Scales each material's authored metalness — 1.0 matches the file">Metalness</span>
919                    <input
920                      id="materialMetalness"
921                      type="range"
922                      min="0"
923                      max="1"
924                      step="0.01"
925                      value="0"
926                    />
927                    <span class="value" data-output="materialMetalness">0.00</span>
928                  </label>
929                  <label class="slider-line">
930                    <span data-tooltip="Scales each material's authored roughness — 1.0 matches the file">Roughness</span>
931                    <input
932                      id="materialRoughness"
933                      type="range"
934                      min="0"
935                      max="1"
936                      step="0.01"
937                      value="1"
938                    />
939                    <span class="value" data-output="materialRoughness">1.00</span>
940                  </label>
941                  <label class="slider-line">
942                    <span data-tooltip="Add glowing emissive light to materials (great for sci-fi effects)">Emissive</span>
943                    <input
944                      id="materialEmissive"
945                      type="range"
946                      min="0"
947                      max="4"
948                      step="0.01"
949                      value="0"
950                    />
951                    <span class="value" data-output="materialEmissive">0.00</span>
952                  </label>
953                  <div id="materialColorSection" hidden>
954                    <div
955                      class="slider-line slider-line--toggle-only"
956                      id="materialColorOverrideToggleRow"
957                      hidden
958                    >
959                      <span data-tooltip="Replace opaque albedo with a solid colour. Transparent / decal maps stay as a tint">Override colour</span>
960                      <label class="effect-toggle">
961                        <input type="checkbox" id="materialColorOverride" />
962                        <span class="effect-indicator" aria-hidden="true"></span>
963                        <span class="sr-only">Override material colour</span>
964                      </label>
965                    </div>
966                    <label class="color-line" id="materialColorRow" hidden>
967                      <span>Colour</span>
968                      <input
969                        type="color"
970                        id="materialOverrideColor"
971                        class="color-chip"
972                        value="#ffffff"
973                      />
974                    </label>
975                  </div>
976                  <div class="slider-line">
977                    <span>Normal Map</span>
978                    <label class="effect-toggle" data-tooltip="Use tangent-space normal maps in Shaded and Clay (full PBR materials only)">
979                      <input type="checkbox" id="clayNormalMap" checked />
980                      <span class="effect-indicator" aria-hidden="true"></span>
981                      <span class="sr-only">Toggle normal maps in shaded and clay modes</span>
982                    </label>
983                  </div>
984                  <div class="panel-block-divider" id="objectSurfaceDivider" hidden aria-hidden="true"></div>
985                  <div id="objectSurfaceSection" class="subsection object-surface-subsection" data-subsection="object-surface" hidden>
986                    <div class="block-title has-toggle">
987                      <span data-tooltip="Triplanar normal-map micro-detail — scratched metal, galvanized steel, and similar">Surface</span>
988                      <label class="effect-toggle" data-tooltip="Add procedural surface detail on eligible meshes">
989                        <input type="checkbox" id="toggleObjectSurface" />
990                        <span class="effect-indicator" aria-hidden="true"></span>
991                        <span class="sr-only">Enable object surface detail</span>
992                      </label>
993                    </div>
994                    <div
995                      class="effect-foldout effect-foldout--collapsed"
996                      data-effect-foldout="object-surface"
997                      aria-hidden="true"
998                    >
999                      <div id="objectSurfaceControlsMount" class="object-surface-controls surface-controls-mount"></div>
1000                    </div>
1001                  </div>
1002                </div>
1003                <div class="panel-block-divider"></div>
1004                <div class="subsection" data-subsection="fresnel">
1005                  <div class="block-title has-toggle">
1006                    <span>Fresnel</span>
1007                    <div style="display: flex; align-items: center; gap: 0.5rem;">
1008                      <button class="block-reset-btn" data-reset="fresnel" aria-label="Reset Fresnel" data-tooltip="Reset Fresnel settings">
1009                        <i class="fa-solid fa-rotate-left"></i>
1010                        <span class="sr-only">Reset</span>
1011                      </button>
1012                      <label class="effect-toggle" data-tooltip="Enable edge lighting effect">
1013                        <input type="checkbox" id="toggleFresnel" />
1014                        <span class="effect-indicator" aria-hidden="true"></span>
1015                        <span class="sr-only">Enable Fresnel</span>
1016                      </label>
1017                    </div>
1018                  </div>
1019                  <div
1020                    class="effect-foldout effect-foldout--collapsed"
1021                    data-effect-foldout="fresnel"
1022                    aria-hidden="true"
1023                  >
1024                  <label class="color-line">
1025                    <span>Color</span>
1026                    <input
1027                      type="color"
1028                      id="fresnelColor"
1029                      class="color-chip"
1030                      value="#808080"
1031                    />
1032                  </label>
1033                  <label class="slider-line">
1034                    <span>Radius</span>
1035                    <input
1036                      id="fresnelRadius"
1037                      type="range"
1038                      min="0.5"
1039                      max="5"
1040                      step="0.1"
1041                      value="2"
1042                    />
1043                    <span class="value" data-output="fresnelRadius">2.0</span>
1044                  </label>
1045                  <label class="slider-line">
1046                    <span>Strength</span>
1047                    <input
1048                      id="fresnelStrength"
1049                      type="range"
1050                      min="0"
1051                      max="1"
1052                      step="0.01"
1053                      value="0.3"
1054                    />
1055                    <span class="value" data-output="fresnelStrength">0.30</span>
1056                  </label>
1057                  </div>
1058                </div>
1059                <div class="panel-block-divider" id="claySubsectionDivider" hidden></div>
1060                <div class="subsection" data-subsection="clay" hidden>
1061                  <div class="block-title has-reset">
1062                    <span>Clay</span>
1063                    <button class="block-reset-btn" data-reset="clay" aria-label="Reset Clay" data-tooltip="Reset Clay settings">
1064                      <i class="fa-solid fa-rotate-left"></i>
1065                      <span class="sr-only">Reset</span>
1066                    </button>
1067                  </div>
1068                  <label class="color-line">
1069                    <span>Clay Color</span>
1070                    <input
1071                      type="color"
1072                      id="clayColor"
1073                      class="color-chip"
1074                      value="#808080"
1075                    />
1076                  </label>
1077                </div>
1078                <!-- Subsurface: temporarily disabled — set SUBSURFACE_FEATURE_ENABLED in MaterialController.js and uncomment MeshControl
1078s / UIManager / EventManager blocks to restore.
1079                <div class="panel-block-divider"></div>
1080                <div class="subsection" data-subsection="subsurface">
1081                  <div class="block-title has-toggle">
1082                    <span>Subsurface</span>
1083                    <div style="display: flex; align-items: center; gap: 0.5rem;">
1084                      <button class="block-reset-btn" data-reset="subsurface" aria-label="Reset Subsurface" data-tooltip="Reset Subsurface settings">
1085                        <i class="fa-solid fa-rotate-left"></i>
1086                        <span class="sr-only">Reset</span>
1087                      </button>
1088                      <label class="effect-toggle" data-tooltip="Enable volumetric translucency (PBR transmission — needs Studio HDRI for best results; differs from three.js SubsurfaceScatteringShader demo)">
1089                        <input type="checkbox" id="toggleSubsurface" />
1090                        <span class="effect-indicator" aria-hidden="true"></span>
1091                        <span class="sr-only">Enable subsurface translucency</span>
1092                      </label>
1093                    </div>
1094                  </div>
1095                  <label class="slider-line">
1096                    <span data-tooltip="Transmission strength — use Shaded or Clay mode; rotate lighting / HDRI to see light through the volume">Translucency</span>
1097                    <input
1098                      id="subsurfaceTranslucency"
1099                      type="range"
1100                      min="0"
1101                      max="1"
1102                      step="0.01"
1103                      value="0"
1104                    />
1105                    <span class="value" data-output="subsurfaceTranslucency">0.00</span>
1106                  </label>
1107                  <label class="color-line">
1108                    <span>Scatter tint</span>
1109                    <input
1110                      type="color"
1111                      id="subsurfaceScatterTint"
1112                      class="color-chip"
1113                      value="#ffd4b8"
1114                    />
1115                  </label>
1116                </div>
1117                -->
1118                <div class="panel-block-divider"></div>
1119                <div class="subsection" data-subsection="wireframe">
1120                  <div class="block-title has-toggle has-reset">
1121                    <span>Wireframe</span>
1122                    <div style="display: flex; align-items: center; gap: 0.5rem;">
1123                      <button class="block-reset-btn" data-reset="wireframe" aria-label="Reset Wireframe" data-tooltip="Reset Wireframe settings">
1124                        <i class="fa-solid fa-rotate-left"></i>
1125                        <span class="sr-only">Reset</span>
1126                      </button>
1127                      <label class="effect-toggle" data-tooltip="Show wireframe overlay on all display modes">
1128                        <input type="checkbox" id="wireframeAlwaysOn" />
1129                        <span class="effect-indicator" aria-hidden="true"></span>
1130                        <span class="sr-only">Enable wireframe overlay</span>
1131                      </label>
1132                    </div>
1133                  </div>
1134                  <div
1135                    class="effect-foldout effect-foldout--collapsed"
1136                    data-effect-foldout="wireframe-settings"
1137                    aria-hidden="true"
1138                  >
1139                  <div class="slider-line">
1140                    <span>Only Visible Faces</span>
1141                    <label class="effect-toggle" data-tooltip="Hide wireframe lines on back-facing surfaces">
1142                      <input type="checkbox" id="wireframeOnlyVisibleFaces" checked />
1143                      <span class="effect-indicator" aria-hidden="true"></span>
1144                      <span class="sr-only">Show wireframe only on visible faces</span>
1145                    </label>
1146                  </div>
1147                  <div class="slider-line">
1148                    <span>Hide Mesh</span>
1149                    <label class="effect-toggle" data-tooltip="Hide the underlying mesh to show only wireframe">
1150                      <input type="checkbox" id="wireframeHideMesh" />
1151                      <span class="effect-indicator" aria-hidden="true"></span>
1152                      <span class="sr-only">Hide mesh</span>
1153                    </label>
1154                  </div>
1155                  <label class="color-line">
1156                    <span>Color</span>
1157                    <input
1158                      type="color"
1159                      id="wireframeColor"
1160                      class="color-chip"
1161                      value="#c4ff00"
1162                    />
1163                  </label>
1164                  <label class="slider-line">
1165                    <span data-tooltip="Wireframe line thickness">Thickness</span>
1166                    <input
1167                      id="wireframeThickness"
1168                      type="range"
1169                      min="0.5"
1170                      max="2.5"
1171                      step="0.05"
1172                      value="1"
1173                    />
1174                    <span class="value" data-output="wireframeThickness">1.00</span>
1175                  </label>
1176                  <label class="slider-line">
1177                    <span data-tooltip="Wireframe line opacity">Opacity</span>
1178                    <input
1179                      id="wireframeOpacity"
1180                      type="range"
1181                      min="0"
1182                      max="1"
1183                      step="0.01"
1184                      value="1"
1185                    />
1186                    <span class="value" data-output="wireframeOpacity">1.00</span>
1187                  </label>
1188                  </div>
1189                </div>
1190                <div class="panel-block-divider"></div>
1191                <div class="subsection" data-subsection="creative-look" data-block="creative-look">
1192                  <div class="block-title has-toggle creative-look-heading">
1193                    <div class="creative-look-heading-start">
1194                      <span>Shader Lab</span>
1195                    </div>
1196                    <div class="creative-look-heading-actions">
1197                      <button
1198                        class="block-reset-btn"
1199                        data-reset="creative-look"
1200                        aria-label="Reset Shader Lab"
1201                        data-tooltip="Reset Shader Lab"
1202                      >
1203                        <i class="fa-solid fa-rotate-left"></i>
1204                        <span class="sr-only">Reset</span>
1205                      </button>
1206                      <label class="effect-toggle" data-tooltip="Replace mesh materials with stylized Shader Lab presets (original GLB materials return when off)">
1207                        <input type="checkbox" id="creativeLookEnabled" />
1208                        <span class="effect-indicator" aria-hidden="true"></span>
1209                        <span class="sr-only">Enable Shader Lab</span>
1210                      </label>
1211                    </div>
1212                  </div>
1213                  <div
1214                    id="creativeLookSectionContainer"
1215                    class="creative-look-foldout creative-look-foldout--collapsed"
1216                  >
1217                    <div class="creative-look-foldout-body">
1218                      <div class="creative-look-grid" id="creativeLookGrid">
1219                    <div class="creative-look-grid-section">
1220                      <p class="creative-look-grid-section-label">General</p>
1221                      <div class="hdri-grid">
1222                    <button type="button" data-creative-look="toon" class="hdri-icon" data-tooltip="Toon — stepped cel shading with rim">
1223                      <img src="./assets/images/creative-look-toon.png" alt="Toon" width="128" height="128" />
1224                    </button>
1225                    <button type="button" data-creative-look="chrome" class="hdri-icon" data-tooltip="True Chrome — PBR metal; reflections follow the current HDRI (strength, rotation, blur)">
1226                      <img src="./assets/images/creative-look-chrome.png" alt="True Chrome" width="128" height="128" />
1227                    </button>
1228                    <button type="button" data-creative-look="glass" class="hdri-icon" data-tooltip="Glass — physical transmission &amp; refraction (Three.js); HDRI + scene. Scale = slab thickness / frost">
1229                      <img src="./assets/images/creative-look-glass.png" alt="Glass" width="128" height="128" />
1230                    </button>
1231                    <button type="button" data-creative-look="holo-glass" class="hdri-icon" data-tooltip="Holo Glass — physical transmission + thin-film iridescence; animated rainbow rim bands at grazing angles. Scale = slab thickness / frost; Intensity = holo punch">
1232                      <img src="./assets/images/creative-look-holo-glass.png" alt="Holo Glass" width="128" height="128" />
1233                    </button>
1234                    <button type="button" data-creative-look="crystal-gem" class="hdri-icon" data-tooltip="Crystal Gem — sapphire body + prismatic dispersion + internal facet fire; physical transmission (IOR 1.77). Scale = facet / inclusion size; Intensity = dispersion &amp; body saturation. HDRI + Render Backdrop recommended.">
1235                      <img src="./assets/images/creative-look-crystal-gem.png" alt="Crystal Gem" width="128" height="128" />
1236                    </button>
1237                    <button type="button" data-creative-look="holographic" class="hdri-icon" data-tooltip="Holographic — thin-film rainbow shifts with view angle">
1238                      <img src="./assets/images/creative-look-holographic.png" alt="Holographic" width="128" height="128" />
1239                    </button>
1240                    <button type="button" data-creative-look="neon-edge" class="hdri-icon" data-tooltip="Neon Edge — dark core with cyan rim glow">
1241                      <img src="./assets/images/creative-look-neon-edge.png" alt="Neon Edge" width="128" height="128" />
1242                    </button>
1243                    <button type="button" data-creative-look="scanline-hologram" class="hdri-icon" data-tooltip="Scanline Hologram — RGB horizontal glitch bands, slice displacement, scrolling scanlines. Scale = line density">
1244                      <img src="./assets/images/creative-look-scanl
1244ine-hologram.png" alt="Scanline Hologram" width="128" height="128" />
1245                    </button>
1246                    <button type="button" data-creative-look="wire-pulse" class="hdri-icon" data-tooltip="Wire Pulse — holographic wireframe with emissive light pulses. Intensity = line thickness. Scale = pulse spacing">
1247                      <img src="./assets/images/creative-look-wire-pulse.png" alt="Wire Pulse" width="128" height="128" />
1248                    </button>
1249                    <button type="button" data-creative-look="fractal-storm" class="hdri-icon" data-tooltip="Topo Minimal — domain-warped height map with glowing topographic contour lines. Intensity = line glow. Scale = contour density">
1250                      <img src="./assets/images/creative-look-fractal-storm.png" alt="Topo Minimal" width="128" height="128" />
1251                    </button>
1252                    <button type="button" data-creative-look="holo-topo" class="hdri-icon" data-tooltip="Holographic 2 — smooth liquid thermal-chrome; oil-slick rainbow iridescence shifts with view angle. Intensity = rainbow band richness. Scale = flow size">
1253                      <img src="./assets/images/creative-look-holo-topo.png" alt="Holographic 2" width="128" height="128" />
1254                    </button>
1255                    <button type="button" data-creative-look="flow-field" class="hdri-icon" data-tooltip="Flow Field — animated color drift in world space">
1256                      <img src="./assets/images/creative-look-flow-field.png" alt="Flow Field" width="128" height="128" />
1257                    </button>
1258                    <button type="button" data-creative-look="plasma" class="hdri-icon" data-tooltip="Plasma — psychedelic animated interference pattern">
1259                      <img src="./assets/images/creative-look-plasma.png" alt="Plasma" width="128" height="128" />
1260                    </button>
1261                    <button type="button" data-creative-look="chrome-plasma" class="hdri-icon" data-tooltip="Neon Marbling — liquid neon ink marbling; blue, cyan, and magenta on Orby black; slow diagonal flow; Intensity = contrast &amp; color punch">
1262                      <img src="./assets/images/creative-look-chrome-plasma.png" alt="Neon Marbling" width="128" height="128" />
1263                    </button>
1264                    <button type="button" data-creative-look="voronoi" class="hdri-icon" data-tooltip="Voronoi — stained-glass cells with dark grout; slow seed drift. Scale = cell size; mid-tone from mesh color">
1265                      <img src="./assets/images/creative-look-voronoi.png" alt="Voronoi" width="128" height="128" />
1266                    </button>
1267                    <button type="button" data-creative-look="spectral-storm" class="hdri-icon" data-tooltip="Spectral Storm — very slow BW plasma, extreme contrast (mostly pure black/white), strobing rim">
1268                      <img src="./assets/images/creative-look-spectral-storm.png" alt="Spectral Storm" width="128" height="128" />
1269                    </button>
1270                    <button type="button" data-creative-look="dust-field" class="hdri-icon" data-tooltip="Dust Field — 8,000 surface-sampled particles follow your mesh (GLB skinning &amp; morph targets). Intensity = point size. Scale = wobble. Bloom recommended." title="Dust Field">
1271                      <img src="./assets/images/creative-look-dust-field.svg" alt="Dust Field" width="128" height="128" />
1272                    </button>
1273                    <button type="button" data-creative-look="thermal" class="hdri-icon" data-tooltip="Thermal — full-scene false-color IR; HDRI + mesh graded together. Lit faces read hot (red/white), silhouettes cool (blue/cyan). Scale = soft ↔ hard color-band seams + halo width (low = smooth FLIR blend, high = poster steps); Intensity = contrast; Object Hue shifts palette; Material brightness = heat gain. Bloom recommended.">
1274                      <img src="./assets/images/creative-look-thermal.png" alt="Thermal" width="128" height="128" />
1275                    </button>
1276                    <button type="button" data-creative-look="thermal-extreme" class="hdri-icon" data-tooltip="Thermal Extreme — full-scene crushed poster IR; purple shadows, neon cyan/green mids, pure red hot zones, film grain. Scale = soft ↔ hard band seams, band count &amp; halo width (low = smooth blends, high = hard poster crush); Intensity = punch; Object Hue shifts palette. Bloom recommended.">
1277                      <img src="./assets/images/creative-look-thermal-extreme.png" alt="Thermal Extreme" width="128" height="128" />
1278                    </button>
1279                    <button type="button" data-creative-look="thermal-acid" class="hdri-icon" data-tooltip="Thermal Acid — full-scene expressive false-color IR (Thermal 3); cobalt cold, purple/red shadow punch, cyan mids, wide neon-green band, yellow/orange/red hot zones. Scale = soft ↔ hard color-band seams, halo width &amp; post grain (mesh crawl-waves stay fixed); halation bloom + animated sensor grain + crawling mesh heat waves (Anim Speed). Intensity = contrast &amp; hot punch; Material brightness = heat gain. Bloom recommended.">
1280                      <img src="./assets/images/creative-look-thermal-acid.png" alt="Thermal Acid" width="128" height="128" />
1281                    </button>
1282                      </div>
1283                    </div>
1284                    <div class="creative-look-grid-section">
1285                      <p class="creative-look-grid-section-label">Screen pixels</p>
1286                      <div class="hdri-grid">
1287                    <button type="button" data-creative-look="ega-pixel" class="hdri-icon" data-tooltip="EGA Pixel — 640×350 macro pixels; SCUMM / Monkey Island–inspired 16-color palette with purple/blue dither; colormap cel prepass + 2×2 Bayer; Object Hue shifts palette (Scale &amp; Intensity locked)">
1288                      <img src="./assets/images/creative-look-ega-pixel.png" alt="EGA Pixel" width="128" height="128" />
1289                    </button>
1290                    <button type="button" data-creative-look="c64-pixel" class="hdri-icon" data-tooltip="C64 Pixel — 320×200 macro pixels; colormap cel prepass + 16-color palette + 2×2 dither; Object Hue shifts palette (Scale &amp; Intensity locked)">
1291                      <img src="./assets/images/creative-look-c64-pixel.png" alt="C64 Pixel" width="128" height="128" />
1292                    </button>
1293                    <button type="button" data-creative-look="gameboy-pixel" class="hdri-icon" data-tooltip="Game Boy — original DMG 4-shade greenscale; 160×144 macro pixels; colormap → luma + Object Hue shifts palette (Scale &amp; Intensity locked)">
1294                      <img src="./assets/images/creative-look-gameboy-pixel.png" alt="Game Boy" width="128" height="128" />
1295                    </button>
1296                    <button type="button" data-creative-look="gba-pixel" class="hdri-icon" data-tooltip="Game Boy Advance — 
129615-bit high-color (32,768); 240×160 macro pixels; colormap cel prepass + 2×2 dither; Object Hue shifts output (Scale &amp; Intensity locked)">
1297                      <img src="./assets/images/creative-look-gba-pixel.png" alt="Game Boy Advance" width="128" height="128" />
1298                    </button>
1299                    <button type="button" data-creative-look="nes-pixel" class="hdri-icon" data-tooltip="NES — 2C02 PPU palette (55 unique / 64 indices); 256×224 NTSC macro pixels; colormap cel prepass + 2×2 dither; Object Hue shifts palette (Scale &amp; Intensity locked)">
1300                      <img src="./assets/images/creative-look-nes-pixel.png" alt="NES" width="128" height="128" />
1301                    </button>
1302                    <button type="button" data-creative-look="megadrive-pixel" class="hdri-icon" data-tooltip="Mega Drive — 9-bit VDP palette (512 colors); 320×224 NTSC macro pixels; colormap cel prepass + 2×2 dither; Object Hue shifts output (Scale &amp; Intensity locked)">
1303                      <img src="./assets/images/creative-look-megadrive-pixel.png" alt="Mega Drive" width="128" height="128" />
1304                    </button>
1305                    <button type="button" data-creative-look="intellivision-pixel" class="hdri-icon" data-tooltip="Intellivision — STIC 16-color palette (Primary + Pastel); 160×96 macro pixels; colormap cel prepass + 2×2 dither; Object Hue shifts palette (Scale &amp; Intensity locked)">
1306                      <img src="./assets/images/creative-look-intellivision-pixel.png" alt="Intellivision" width="128" height="128" />
1307                    </button>
1308                    <button type="button" data-creative-look="apple2-pixel" class="hdri-icon" data-tooltip="Apple II — HGR 280×192 VRAM dots; orange/green artifact fills (Oil's Well style), white on peaks only; MSB phase every 7 px; Object Hue (Scale &amp; Intensity locked)">
1309                      <img src="./assets/images/creative-look-apple2-pixel.png" alt="Apple II" width="128" height="128" />
1310                    </button>
1311                      </div>
1312                    </div>
1313                    <div class="creative-look-grid-section">
1314                      <p class="creative-look-grid-section-label">Dither</p>
1315                      <div class="hdri-grid">
1316                    <button type="button" data-creative-look="dither-neutral" class="hdri-icon" data-tooltip="Neutral — hard square pixels with 4×4 Bayer ordered dither; default Scale 0 (finest), Intensity 2; Object Hue shifts output">
1317                      <img src="./assets/images/creative-look-dither-neutral.png" alt="Neutral Dither" width="128" height="128" />
1318                    </button>
1319                    <button type="button" data-creative-look="dither-tritone" class="hdri-icon" data-tooltip="Tritone — hard 3-tier luminance poster (crushed shadows, lifted highlights); default Scale 0.5, Intensity 0">
1320                      <img src="./assets/images/creative-look-dither-tritone.png" alt="Tritone Dither" width="128" height="128" />
1321                    </button>
1322                    <button type="button" data-creative-look="dither-crosshatch" class="hdri-icon" data-tooltip="Crosshatch — extreme 8-color crush with transposed Bayer lattice; default Scale 1, Intensity 0; Object Hue shifts output">
1323                      <img src="./assets/images/creative-look-dither-crosshatch.png" alt="Crosshatch Dither" width="128" height="128" />
1324                    </button>
1325                    <button type="button" data-creative-look="dither-raster" class="hdri-icon" data-tooltip="Raster — amplitude halftone dots sized by luminance; default Scale 1, Intensity 0 (raise for more crush)">
1326                      <img src="./assets/images/creative-look-dither-raster.png" alt="Raster Dither" width="128" height="128" />
1327                    </button>
1328                      </div>
1329                    </div>
1330                    <div class="creative-look-grid-section">
1331                      <p class="creative-look-grid-section-label">Retro 3D</p>
1332                      <div class="hdri-grid">
1333                    <button type="button" data-creative-look="ps2-crush" class="hdri-icon" data-tooltip="PS2 
1333Crush — mesh decimation, affine UVs, bilinear low-res textures, flat light bands (24-bit, no dither)">
1334                      <img src="./assets/images/creative-look-ps2-crush.png" alt="PS2 Crush" width="128" height="128" />
1335                    </button>
1336                    <button type="button" data-creative-look="psx" class="hdri-icon" data-tooltip="PSX — coarser mesh decimation, affine UVs, nearest-neighbor crushed textures, 15-bit bands + 2×2 ordered dither">
1337                      <img src="./assets/images/creative-look-psx.png" alt="PSX" width="128" height="128" />
1338                    </button>
1339                    <button type="button" data-creative-look="vga-dos-3d" class="hdri-icon" data-tooltip="VGA/DOS 3D — stable snap, affine UVs, nearest crushed textures, flat DOS lighting, 256-color palette (no dither)">
1340                      <img src="./assets/images/creative-look-vga-dos-3d.png" alt="VGA/DOS 3D" width="128" height="128" />
1341                    </button>
1342                    <button type="button" data-creative-look="vectrex" class="hdri-icon" data-tooltip="Vectrex — P31 phosphor wireframe on black; steady green CRT lines, vertex glow, analog wobble (Scale). Intensity = line brightness">
1343                      <img src="./assets/images/creative-look-vectrex.png" alt="Vectrex" width="128" height="128" />
1344                    </button>
1345                      </div>
1346                    </div>
1347                    <div class="creative-look-grid-section">
1348                      <p class="creative-look-grid-section-label">ASCII</p>
1349                      <div class="hdri-grid">
1350                    <button type="button" data-creative-look="ascii-art" class="hdri-icon" data-tooltip="ASCII Art — ORBY letters + abstract charset; VGA 4× atlas / 2× screen; lime duotone, Object Hue (Scale &amp; Intensity locked)">
1351                      <img src="./assets/images/creative-look-ascii-art.png" alt="ASCII Art" width="128" height="128" />
1352                    </button>
1353                    <button type="button" data-creative-look="ascii-art-2" class="hdri-icon" data-tooltip="ASCII 2 — conventional terminal charset (ASCII 1–inspired); finer 12×20 grid; 25% ink in shadows, Object Hue (Scale &amp; Intensity locked)">
1354                      <img src="./assets/images/creative-look-ascii-art-3.png" alt="ASCII 2" width="128" height="128" />
1355                    </button>
1356                    <button type="button" data-creative-look="ascii-art-3" class="hdri-icon" data-tooltip="ASCII 3 — braille halftone (bonus look); finer 12×20 grid; 25% ink in shadows, Object Hue (Scale &amp; Intensity locked)">
1357                      <img src="./assets/images/creative-look-ascii-art-2.png" alt="ASCII 3" width="128" height="128" />
1358                    </button>
1359                    <button type="button" data-creative-look="ascii-art-4" class="hdri-icon" data-tooltip="ASCII 4 — Split Block; CP437 half-blocks; fine 12×20 grid; Orby lime with 50% mid-fill; deep shadows black out; cycling glyphs; Object Hue (Scale &amp; Intensity locked, Anim Speed)">
1360                      <img src="./assets/images/creative-look-ascii-art.png" alt="ASCII 4" width="128" height="128" />
1361                    </button>
1362                      </div>
1363                    </div>
1364                    <div class="creative-look-grid-section">
1365                      <p class="creative-look-grid-section-label">Artistic</p>
1366                      <div class="hdri-grid">
1367                    <button type="button" data-creative-look="watercolour" class="hdri-icon" data-tooltip="Watercolour — clip-space mesh wobble + soft colormap + comic ink + outward paint bleed; Kuwahara post with mega-halo; Scale = brush size &amp; wobble, Intensity = paint strength">
1368                      <img src="./assets/images/creative-look-watercolour.png" alt="Watercolour" width="128" height="128" />
1369                    </button>
1370                    <button type="button" data-creative-look="sketch" class="hdri-icon" data-tooltip="Sketch — high-contrast B&amp;W pencil illustration; harsh toon shadow bands + manga screentone + ink outlines; paper backdrop; Stroke Width &amp; Raster Size sliders, Intensity = contrast &amp; ink">
1371                      <img src="./assets/images/creative-look-sketch.png" alt="Sketch" width="128" height="128" />
1372                    </button>
1373                    <button type="button" data-creative-look="sketch-colour" class="hdri-icon" data-tooltip="Sketch Colour — coloured manga illustration; watercolour-washed fills + screentone + ink outlines; paper backdrop; Stroke Width &amp; Raster Size sliders, Intensity = contrast &amp; ink">
1374                      <img src="./assets/images/creative-look-sketch-colour.png" alt="Sketch Colour" width="128" height="128" />
1375                    </button>
1376                    <button type="button" data-creative-look="gouache" class="hdri-icon" data-tooltip="Gouache — matte poster paint; flat opaque colour blocks + chalk grain + comic ink outlines; paper backdrop; Scale = block size &amp; ink (min ≈ fine pen), Intensity = chalk &amp; opacity">
1377                      <img src="./assets/images/creative-look-gouache.png" alt="Gouache" width="128" height="128" />
1378                    </button>
1379                      </div>
1380                    </div>
1381                  </div>
1382                  <label class="slider-line">
1383                    <span data-tooltip="Global hue shift for all Shader Lab presets (-180°…180°). Independent of Cam/FX color grading.">Object Hue</span>
1384                    <input
1385                      type="range"
1386                      id="creativeLookMasterHue"
1387                      min="-180"
1388                      max="180"
1389                      step="1"
1390                      value="0"
1391                    />
1392                    <span class="value" data-output="creativeLookMasterHue">0°</span>
1393                  </label>
1394                  <label class="slider-line">
1395                    <span data-tooltip="Pushes each preset's signature effect. 1 = default. Wire Pulse: line thickness. Dust Field: point size. Topo Minimal, Neon Edge, Holographic, Scanline Hologram, and Spectral Storm also respond.">Intensity</span>
1396                    <input
1397                      type="range"
1398                      id="creativeLookIntensity"
1399                      min="0"
1400                      max="2"
1401                      step="0.05"
1402                      value="1"
1403                    />
1404                    <span class="value" data-output="creativeLookIntensity">1.00</span>
1405                  </label>
1406                  <label class="slider-line">
1407                    <span data-tooltip="Shadow lift (+) vs black crush (−) on shader preset output. All shader looks respond; True Chrome ignores. Glass uses crush for env/specular/attenuation.">Lift/Crush</span>
1408                    <input
1409                      type="range"
1410                      id="creativeLookLiftCrush"
1411                      min="-1"
1412                      max="1"
1413                      step="0.05"
1414                      value="0"
1415                    />
1416                    <span class="value" data-output="creativeLookLiftCrush">0.00</span>
1417                  </label>
1418                  <label class="slider-line">
1419                    <span data-tooltip="Speed for animated Shader Lab presets (Flow Field, Plasma, Holographic, Voronoi, Scanline Hologram, Wire Pulse, Topo Minimal, Dust Field, Spectral Storm). True Chrome / Glass ignore. Pause freezes motion.">Anim Speed</span>
1420                    <input
1421                      type="range"
1422                      id="creativeLookShaderAnimationSpeed"
1423                      min="0"
1424                      max="2"
1425                      step="0.05"
1426                      value="0.4"
1427                    />
1428                    <span class="value" data-output="creativeLookShaderAnimationSpeed">0.40</span>
1429                  </label>
1430                  <label class="slider-line" id="creativeLookPatternScaleRow">
1431                    <span data-tooltip="Pattern scale (Flow Field, Plasma, Holographic, Voronoi, Scanline Hologram, Wire Pulse, Topo Minimal, Dust Field, Spectral Storm). EGA / C64 / Game Boy / NES / etc.: fixed grid. True Chrome: reflection sharpness. Glass: thickness &amp; frost. PS2 Crush: fixed at 2×. PSX: fixed at 2.5×. VGA/DOS 3D: fixed at 2.2× (decimation runs once at apply). Watercolour: brush size &amp; wobble. Sketch uses Stroke Width / Raster Size instead.">Scale</span>
1432                    <input
1433                      type="range"
1434                      id="creativeLookPatternScale"
1435                      min="0.02"
1436                      max="5"
1437                      step="0.02"
1438                      value="1"
1439                    />
1440                    <span class="value" data-output="creativeLookPatternScale">1.00×</span>
1441                  </label>
1442                  <div id="creativeLookTransmissionControls" class="creative-look-transmission-controls" hidden>
1443                    <label class="slider-line">
1444                      <span data-tooltip="Refraction sharpness for Glass, Holo-Glass, and Crystal Gem. On WebGL this maps to transmission blur via roughness (1 = softest, 10 = sharpest). Solid meshes blur more on camera-facing surfaces so refraction looks similar from all angles.">Transmission Samples</span>
1445                      <input
1446                        type="range"
1447                        id="creativeLookTransmissionSamples"
1448                        min="1"
1449                        max="10"
1450                        step="1"
1451                        value="4"
1452                      />
1453                      <span class="value" data-output="creativeLookTransmissionSamples">4</span>
1454                    </label>
1455                    <label class="slider-line">
1456                      <span data-tooltip="Subtle RGB split in refraction (chromatic dispersion). Reads premium at low values — Crystal Gem defaults higher. 0 = off.">Dispersion</span>
1457                      <input
1458                        type="range"
1459                        id="creativeLookTransmissionDispersion"
1460                        min="0"
1461                        max="1"
1462                        step="0.01"
1463                        value="0.28"
1464                      />
1465                      <span class="value" data-output="creativeLookTransmissionDispersion">0.28</span>
1466                    </label>
1467                    <div class="slider-line slider-line--toggle-only">
1468                      <span data-tooltip="Closed scans (heads, statues): front faces only, stronger blur, and a best-effort cull of interior-facing facets. Turns off double-sided transmission.">Solid Mesh Glass</span>
1469                      <label class="effect-toggle">
1470                        <input type="checkbox" id="creativeLookTransmissionSolidMeshGlass" />
1471                        <span class="effect-indicator" aria-hidden="true"></span>
1472                        <span class="sr-only">Solid mesh glass mode</span>
1473                      </label>
1474                    </div>
1475                    <div class="slider-line slider-line--toggle-only">
1476                      <span data-tooltip="Thin hollow shells (windshields, bottles) — renders back faces for correct interior refraction. Disabled while Solid Mesh Glass is on.">Double-Sided Transmission</span>
1477                      <label class="effect-toggle">
1478                        <input type="checkbox" id="creativeLookTransmissionDoubleSide" />
1479                        <span class="effect-indicator" aria-hidden="true"></span>
1480                        <span class="sr-only">Double-sided transmission</span>
1481                      </label>
1482                    </div>
1483                  </div>
1484                  <div id="creativeLookPresetSliders" class="creative-look-preset-sliders" hidden>
1485                    <label class="slider-line creative-look-preset-slider" data-slider-id="creativeLookSketchStrokeWidth" hidden>
1486                      <span data-tooltip="Ink outline thickness, silhouette edge dilation, and mesh wobble. Independent of screentone raster.">Stroke Width</span>
1487                      <input
1488                        type="range"
1489                        id="creativeLookSketchStrokeWidth"
1490                        min="0.2"
1491                        max="2.8"
1492                        step="0.02"
1493                        value="1"
1494                      />
1495                      <span class="value" data-output="creativeLookSketchStrokeWidth">1.00×</span>
1496                    </label>
1497                    <label class="slider-line creative-look-preset-slider" data-slider-id="creativeLookSketchRasterSize" hidden>
1498                      <span data-tooltip="0 = off. Manga screentone dot pitch and paper grain scale. Independent of stroke width.">Raster Size</span>
1499                      <input
1500                        type="range"
1501                        id="creativeLookSketchRasterSize"
1502                        min="0"
1503                        max="2.8"
1504                        step="0.02"
1505                        value="1"
1506                      />
1507                      <span class="value" data-output="creativeLookSketchRasterSize">1.00×</span>
1508                    </label>
1509                    <label class="color-line creative-look-preset-ink" data-ink-control="strokeColor" hidden>
1510                      <span data-tooltip="Ink outlines, band strokes, and screentone dots.">Stroke Colour</span>
1511                      <input
1512                        type="color"
1513                        id="creativeLookInkStrokeColor"
1514                        class="color-chip"
1515                        value="#080808"
1516                      />
1517                    </label>
1518                  </div>
1519                  <div class="slider-line slider-line--toggle-only">
1520                    <span class="slider-line-label">
1521                      Bloom
1522                      <span
1523                        class="feature-info-hint"
1524                        tabindex="0"
1525                        aria-label="More information about Bloom"
1526                        data-tooltip="Viewport bloom for Shader Lab — uses Camera &amp; FX bloom sliders (threshold, strength, radius, quality). Separate from the Cam/FX bloom toggle. Skips Cam/FX grading while on — background reads blacker and contrast jumps. Extra fullscreen pass each frame. Not in PNG exports, including transparent."
1527                      ><i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i></span>
1528                    </span>
1529                    <label class="effect-toggle">
1530                      <input type="checkbox" id="creativeLookBloomEnabled" />
1531                      <span class="effect-indicator" aria-hidden="true"></span>
1532                      <span class="sr-only">Enable bloom with Shader Lab</span>
1533                    </label>
1534                  </div>
1535                  <div class="slider-line slider-line--toggle-only">
1536                    <span data-tooltip="On: the HDRI is drawn behind the scene. Off: only the solid background color is shown; HDRI still lights the model. Same as Studio → HDRI → Render Backdrop (`B`).">Render Backdrop</span>
1537                    <label class="effect-toggle">
1538                      <input type="checkbox" id="creativeLookRenderBackdrop" checked />
1539                      <span class="effect-indicator" aria-hidden="true"></span>
1540                      <span class="sr-only">Render HDRI as viewport backdrop</span>
1541                    </label>
1542                  </div>
1543                  <button
1544                    type="button"
1545                    id="creativeLookPauseAnimations"
1546                    class="ghost-btn small creative-look-pause-btn"
1547                    data-tooltip="Freeze animated Shader Lab presets (Flow Field, Plasma, Holographic, Voronoi, Scanline Hologram, Wire Pulse, Topo Minimal, Dust Field, Spectral Storm). True Chrome and Toon keep following the scene / HDRI."
1548                  >
1549                    Pause shader animations
1550                  </button>
1551                    </div>
1552                  </div>
1553                </div>
1554              </div>
1555
1556              <div class="panel-block" id="svgExtrudePanelBlock" hidden>
1557                <div class="subsection" data-subsection="svg-extrude">
1558                  <div class="block-title has-reset">
1559                    <span>SVG Extrude</span>
1560                    <button class="block-reset-btn" data-reset="svg-extrude" aria-label="Reset SVG Extrude" data-tooltip="Reset SVG extrusion settings">
1561                      <i class="fa-solid fa-rotate-left"></i>
1562                      <span class="sr-only">Reset</span>
1563                    </button>
1564                  </div>
1565                  <div id="svgExtrudeCoreControlsMount" class="svg-extrude-core-controls"></div>
1566                  <div class="slider-line">
1567                    <span data-tooltip="Inverts extrusion direction along the Z axis">Flip Extrude Direction</span>
1568                    <label class="effect-toggle">
1569                      <input type="checkbox" id="svgExtrudeFlipDirection" />
1570                      <span class="effect-indicator" aria-hidden="true"></span>
1571                      <span class="sr-only">Flip SVG extrusion direction</span>
1572                    </label>
1573                  </div>
1574                  <div id="svgExtrudeColorDepths" data-tooltip="Per-color depth and position controls for detected SVG fills"></div>
1575                  <div class="slider-line">
1576                    <span data-tooltip="Replace all imported SVG fills with one chosen color">Color Override</span>
1577                    <label class="effect-toggle">
1578                      <input type="checkbox" id="svgExtrudeColorOverride" />
1579                      <span class="effect-indicator" aria-hidden="true"></span>
1580                      <span class="sr-only">
1580Enable SVG color override</span>
1581                    </label>
1582                  </div>
1583                  <div
1584                    class="effect-foldout effect-foldout--collapsed"
1585                    data-effect-foldout="svg-color-override"
1586                    aria-hidden="true"
1587                  >
1588                  <label class="color-line">
1589                    <span data-tooltip="Front faces and bevels when Color Override is enabled">Face color</span>
1590                    <input
1591                      type="color"
1592                      id="svgExtrudeColor"
1593                      class="color-chip"
1594                      value="#7ed321"
1595                    />
1596                  </label>
1597                  <label class="color-line">
1598                    <span data-tooltip="Extruded side walls and depth — pick a contrasting color for two-tone SVG">Extrude color</span>
1599                    <input
1600                      type="color"
1601                      id="svgExtrudeExtrudeColor"
1602                      class="color-chip"
1603                      value="#7ed321"
1604                    />
1605                  </label>
1606                  </div>
1607                </div>
1608              </div>
1609
1610              <div class="panel-block">
1611                <div class="subsection" data-subsection="advanced">
1612                  <div class="block-title has-reset">
1613                    <span>Advanced</span>
1614                    <button class="block-reset-btn" data-reset="advanced" aria-label="Reset Advanced" data-tooltip="Reset Advanced settings">
1615                      <i class="fa-solid fa-rotate-left"></i>
1616                      <span class="sr-only">Reset</span>
1617                    </button>
1618                  </div>
1619                  <div class="slider-line slider-line--toggle-only">
1620                    <span data-tooltip="Reverse mesh normal direction on the current model">Reverse Normals</span>
1621                    <label class="effect-toggle">
1622                      <input type="checkbox" id="reverseNormals" />
1623                      <span class="effect-indicator" aria-hidden="true"></span>
1624                      <span class="sr-only">Reverse normal direction</span>
1625                    </label>
1626                  </div>
1627                  <div class="slider-line slider-line--toggle-only">
1628                    <span data-tooltip="Color surface normals as RGB to spot flipped shading or inspect tangent-space normal maps">Normal View</span>
1629                    <label class="effect-toggle">
1630                      <input type="checkbox" id="normalView" />
1631                      <span class="effect-indicator" aria-hidden="true"></span>
1632                      <span class="sr-only">Toggle normal view overlay</span>
1633                    </label>
1634                  </div>
1635                  <div
1636                    class="effect-foldout effect-foldout--collapsed"
1637                    data-effect-foldout="normal-view"
1638                    aria-hidden="true"
1639                  >
1640                  <label class="select-line">
1641                    <span data-tooltip="Geometry shows smoothed vertex normals. Tangent samples assigned normal maps in tangent space (flat blue when none).">Normal View Mode</span>
1642                    <select id="normalViewMode" aria-label="Normal View Mode">
1643                      <option value="geometry">Geometry</option>
1644                      <option value="tangent">Tangent (normal map)</option>
1645                    </select>
1646                  </label>
1647                  </div>
1648                  <div id="stlSmoothingControls" hidden>
1649                    <div class="slider-line slider-line--toggle-only">
1650                      <span data-tooltip="Recompute vertex normals from triangle facets. STL imports enable this automatically; turn on for GLB/OBJ when you want to adjust crease smoothing.">Smooth Shading</span>
1651                      <label class="effect-toggle">
1652                        <input type="checkbox" id="stlSmoothShading" />
1653                        <span class="effect-indicator" aria-hidden="true"></span>
1654                        <span class="sr-only">Toggle imported mesh smooth shading</span>
1655                      </label>
1656                    </div>
1657                    <label class="slider-line">
1658                      <span data-tooltip="Crease angle in degrees — lower keeps hard edges faceted, higher blends curved areas (0 = all facets, 180 = fully smooth). Only applies when Smooth Shading is on.">Smoothing Angle</span>
1659                      <input
1660                        id="stlSmoothingAngle"
1661                        type="range"
1662                        min="0"
1663                        max="180"
1664                        step="1"
1665                        value="40"
1666                      />
1667                      <span class="value" data-output="stlSmoothingAngle">40°</span>
1668                    </label>
1669                  </div>
1670                  <div class="slider-line slider-line--toggle-only">
1671                    <span data-tooltip="Tile a UV checker map across the model so you can spot stretching and seams. Texture by Atlux.">UV Checker</span>
1672                    <label class="effect-toggle">
1673                      <input type="checkbox" id="uvChecker" />
1674                      <span class="effect-indicator" aria-hidden="true"></span>
1675                      <span class="sr-only">Toggle UV checker overlay</span>
1676                    </label>
1677                  </div>
1678                  <div
1679                    class="effect-foldout effect-foldout--collapsed"
1680                    data-effect-foldout="uv-checker"
1681                    aria-hidden="true"
1682                  >
1683                  <label class="select-line">
1684                    <span data-tooltip="Pick the checker pattern. Orby is the default brand map; Classic uses Atlux's colored map; Monochrome is grayscale and reads better on already-colored meshes.">UV Checker Style</span>
1685                    <select id="uvCheckerStyle" aria-label="UV Checker Style">
1686                      <option value="orby">Orby</option>
1687                      <option value="classic">Classic</option>
1688                      <option value="monochrome">Monochrome</option>
1689                    </select>
1690                  </label>
1691                  <label class="slider-line">
1692                    <span data-tooltip="How many times the checker pattern tiles across each UV island. 1 = one full tile per island.">UV Checker Repeat</span>
1693                    <input
1694                      id="uvCheckerScale"
1695                      type="range"
1696                      min="0"
1697                      max="10"
1698                      step="0.05"
1699                      value="5"
1700                    />
1701                    <span class="value" data-output="uvCheckerScale">5.00</span>
1702                  </label>
1703                  </div>
1704                  <div class="panel-block-divider" aria-hidden="true"></div>
1705                  <div id="topologyWarningsBlock" class="topology-warnings-block">
1706                    <div class="export-controls topology-warnings-actions">
1707                      <button
1708                        type="button"
1709                        id="centerPivotBtn"
1710                        class="accent-action-btn topology-warnings-scan center-pivot-btn"
1711                        data-tooltip="Move the mesh pivot to the current bounding-box center. Keeps the model in place on screen; fixes off-axis turntable spin. Use again after extrude or other geometry changes."
1712                        disabled
1713                      >
1714                        <i class="fa-solid fa-crosshairs" aria-hidden="true"></i>
1715                        Center Pivot
1716                      </button>
1717                    </div>
1718                    <div class="export-controls topology-warnings-actions">
1719                      <button
1720                        type="button"
1721                        id="topologyWarningsScan"
1722                        class="accent-action-btn topology-warnings-scan"
1723                        data-tooltip="Analyze the loaded model for common topology problems"
1724                        aria-pressed="false"
1725                      >
1726                        <i class="fa-solid fa-stethoscope" aria-hidden="true"></i>
1727                        Mesh Health
1728                      </button>
1729                    </div>
1730                    <div id="topologyWarningsResults" class="topology-warnings-results" hidden>
1731                      <ul id="topologyWarningsList" class="topology-warnings-list" aria-live="polite"></ul>
1732                    </div>
1733                  </div>
1734                  <div id="advancedAlphaControls" class="advanced-alpha-controls" hidden>
1735                  <div class="panel-block-divider" aria-hidden="true"></div>
1736                  <p class="panel-hint advanced-section-title">Transparency</p>
1737                  <p class="panel-hint advanced-import-hint">
1738                    Blended transparent surfaces are sorted per mesh in WebGL. Fine glass often needs glTF transmission or separate materials from the author.
1739                    <button type="button" class="drop-link advanced-info-doc-btn" data-open-info-section="#info-transparency">Read more under Information — Transparency</button>.
1740                  </p>
1741                  <label class="select-line">
1742                    <span
1743                      data-tooltip="Auto applies viewer defaults. Other modes trade sorting vs solid surfaces—try if layers look wrong."
1744                      >Transparency Mode</span>
1745                    <select id="transparencyFix" aria-label="Transparency Mode">
1746                      <option value="default">Auto (recommended)</option>
1747                      <option value="opaqueBlend">Treat blend as solid</option>
1748                      <option value="frontFace">Front faces only</option>
1749                      <option value="opaqueAndFrontFace">Solid + front faces</option>
1750                    </select>
1751                  </label>
1752                  <div class="slider-line slider-line--toggle-only">
1753                    <span
1754                      data-tooltip="Uses light dither so stacked blended surfaces sort more predictably (common on Sketchfab). Turn off if hair or cloth looks too grainy."
1755                      >Stabilize Layered Transparency</span>
1756                    <label class="effect-toggle">
1757                      <input type="checkbox" id="blendSortingMitigation" checked />
1758                      <span class="effect-indicator" aria-hidden="true"></span>
1759                      <span class="sr-only">Stabilize Layered Transparency</span>
1760                    </label>
1761                  </div>
1762                  <div class="slider-line slider-line--toggle-only">
1763                    <span class="block-title-name">
1764                      <span
1765                        data-tooltip="Extra transmission and glass controls. Turn on to reveal Physical Glass, flip normals, and front-faces-only."
1766                        >Rare Fixes — Transmission &amp; Glass</span>
1767                      <span class="dev-badge" data-tooltip="This feature is still under development" aria-hidden="true"><i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i></span>
1768                    </span>
1769                    <label class="effect-toggle">
1770                      <input type="checkbox" id="rareFixesGlassOpen" />
1771                      <span class="effect-indicator" aria-hidden="true"></span>
1772                      <span class="sr-only">Show rare transmission and glass fixes</span>
1773                    </label>
1774                  </div>
1775                  <div
1776                    class="effect-foldout effect-foldout--collapsed"
1777                    data-effect-foldout="rare-fixes-glass"
1778                    aria-hidden="true"
1779                  >
1780                    <div class="slider-line slider-line--toggle-only">
1781                      <span
1782                        data-tooltip="KHR transmission + named window glass use MeshPhysicalMaterial.transmission (real refraction). Reflections come from PBR roughness and the HDRI — not fake BLEND opacity. Needs Render Backdrop. Costs more GPU than Auto glass."
1783                        >Physical Glass Transmission</span>
1784                      <label class="effect-toggle">
1785                        <input type="checkbox" id="physicalGlassTransmission" />
1786                        <span class="effect-indicator" aria-hidden="true"></span>
1787                        <span class="sr-only">Physical glass transmission</span>
1788                      </label>
1789                    </div>
1790                    <div class="slider-line slider-line--toggle-only">
1791                      <span
1792                        data-tooltip="Only affects transmission or meshes/materials named like glass, window, visor… Flip if glazing looks inside-out."
1793                        >Flip Glass Normal Y</span>
1794                      <label class="effect-toggle">
1795                        <input type="checkbox" id="flipGlassNormalMapY" />
1796                        <span class="effect-indicator" aria-hidden="true"></span>
1797                        <span class="sr-only">Flip glass normal map Y</span>
1798                      </label>
1799                    </div>
1800                    <div class="slider-line slider-line--toggle-only">
1801                      <span
1802                        data-tooltip="Front-side only for those same materials—not for whole-body BLEND characters (use Transparency Mode)."
1803                        >Glass: Front Faces Only</span>
1804                      <label class="effect-toggle">
1805                        <input type="checkbox" id="glassFrontFacesOnly" />
1806                        <span class="effect-indicator" aria-hidden="true"></span>
1807                        <span class="sr-only">Glass front faces only</span>
1808                      </label>
1809                    </div>
1810                  </div>
1811                  <div id="advancedGlassControls" class="advanced-glass-controls" hidden>
1812                    <p class="panel-hint advanced-glass-hint">When glTF transmission or named windows / glass are detected:</p>
1813                    <label class="slider-line">
1814                      <span
1815                        data-tooltip="Physical glass: scales transmission strength. BLEND glass (Auto): opacity for detected windows."
1816                        >Glass opacity</span>
1817                      <input
1818                        id="glassOpacity"
1819                        type="range"
1820                        min="0.02"
1821                        max="1"
1822                        step="0.01"
1823                        value="0.45"
1824                      />
1825                      <span class="value" data-output="glassOpacity">0.45</span>
1826                    </label>
1827                    <label class="slider-line">
1828                      <span
1829                        data-tooltip="How soft the background looks through physical glass. Three.js blurs transmission with roughness — 0 is sharp, 1 is frosted."
1830                        >Refraction blur</span>
1831                      <input
1832                        id="glassRefractionBlur"
1833                        type="range"
1834                        min="0"
1835                        max="1"
1836                        step="0.01"
1837                        value="0.08"
1838                      />
1839                      <span class="value" data-output="glassRefractionBlur">0.08</span>
1840                    </label>
1841                    <label class="slider-line">
1842                      <span
1843                        data-tooltip="PBR environment reflection strength on glass (roughness blurs the HDRI lobe — not a planar mirror)."
1844                        >Glass reflections</span>
1845                      <input
1846                        id="glassReflection"
1847                        type="range"
1848                        min="0"
1849                        max="4"
1850                        step="0.05"
1851                        value="2"
1852                      />
1853                      <span class="value" data-output="glassReflection">2.00</span>
1854                    </label>
1855                    <label class="color-line">
1856                      <span
1857                        data-tooltip="Only when Transparency Mode is Auto. Tint for detected glass / windows."
1858                        >Glass tint</span>
1859                      <input
1860                        type="color"
1861                        id="glassTint"
1862                        class="color-chip"
1863                        value="#080808"
1864                      />
1865                    </label>
1866                    <label class="slider-line">
1867                      <span
1868                        data-tooltip="Only when Transparency Mode is Auto. Makes heuristic glass read more solid (transmission, tint)."
1869                        >Glass body</span>
1870                      <input
1871                        id="glassBody"
1872                        type="range"
1873                        min="0"
1874                        max="1"
1875                        step="0.01"
1876                        value="0"
1877                      />
1878                      <span class="value" data-output="glassBody">0.00</span>
1879                    </label>
1880                  </div>
1881                  </div>
1882                </div>
1883              </div>
1884
1885              <div class="panel-block">
1886                <div class="subsection" data-subsection="transform">
1887                  <div class="block-title has-reset">
1888                    <span>Transform</span>
1889                    <button class="block-reset-btn" data-reset="transform" aria-label="Reset Transform" data-tooltip="Reset Transform settings">
1890                      <i class="fa-solid fa-rotate-left"></i>
1891                      <span class="sr-only">Reset</span>
1892                    </button>
1893                  </div>
1894                  <label class="slider-line">
1895                    <span data-tooltip="Scale object along X axis">Scale X</span>
1896                    <input
1897                      id="scaleXControl"
1898                      type="range"
1899                      min="0.1"
1900                      max="4"
1901                      value="1"
1902                      step="0.01"
1903                    />
1904                    <span class="value" data-output="scale">1.00×</span>
1905                  </label>
1906                  <label class="slider-line">
1907                    <span data-tooltip="Scale object along Y axis">Scale Y</span>
1908                    <input
1909                      id="scaleYControl"
1910                      type="range"
1911                      min="0.1"
1912                      max="4"
1913                      value="1"
1914                      step="0.01"
1915                    />
1916                    <span class="value" data-output="scaleY">1.00×</span>
1917                  </label>
1918                  <label class="slider-line">
1919                    <span data-tooltip="Scale object along Z axis">Scale Z</span>
1920                    <input
1921                      id="scaleZControl"
1922                      type="range"
1923                      min="0.1"
1924                      max="4"
1925                      value="1"
1926                      step="0.01"
1927                    />
1928                    <span class="value" data-output="scaleZ">1.00×</span>
1929                  </label>
1930                  <label class="slider-line">
1931                    <span data-tooltip="Move object along X axis">Move X</span>
1932                    <input
1933                      id="xOffsetControl"
1934                      type="range"
1935                      min="-2"
1936                      max="2"
1937                      value="0"
1938                      step="0.01"
1939                    />
1940                    <span class="value" data-output="xOffset">0.00m</span>
1941                  </label>
1942                  <label class="slider-line">
1943                    <span data-tooltip="Move object along Y axis">Move Y</span>
1944                    <input
1945                      id="yOffsetControl"
1946                      type="range"
1947                      min="-2"
1948                      max="2"
1949                      value="0"
1950                      step="0.01"
1951                    />
1952                    <span class="value" data-output="yOffset">0.00m</span>
1953                  </label>
1954                  <label class="slider-line">
1955                    <span data-tooltip="Move object along Z axis">Move Z</span>
1956                    <input
1957                      id="zOffsetControl"
1958                      type="range"
1959                      min="-2"
1960                      max="2"
1961                      value="0"
1962                      step="0.01"
1963                    />
1964                    <span class="value" data-output="zOffset">0.00m</span>
1965                  </label>
1966                  <label class="slider-line">
1967                    <span data-tooltip="Rotate object around X axis">Rotate X</span>
1968                    <input
1969                      id="rotationXControl"
1970                      type="range"
1971                      min="-180"
1972                      max="180"
1973                      value="0"
1974                      step="1"
1975                    />
1976                      <span class="value" data-output="rotationX">0°</span>
1977                  </label>
1978                  <label class="slider-line">
1979                    <span data-tooltip="Rotate object around Y axis">Rotate Y</span>
1980                    <input
1981                      id="rotationYControl"
1982                      type="range"
1983                      min="-180"
1984                      max="180"
1985                      value="0"
1986                      step="1"
1987                    />
1988                      <span class="value" data-output="rotationY">0°</span>
1989                  </label>
1990                  <label class="slider-line">
1991                    <span data-tooltip="Rotate object around Z axis">Rotate Z</span>
1992                    <input
1993                      id="rotationZControl"
1994                      type="range"
1995                      min="-180"
1996                      max="180"
1997                      value="0"
1998                      step="1"
1999                    />
2000                      <span class="value" data-output="rotationZ">0°</span>
2001                  </label>
2002                </div>
2003                <div class="subsection" data-subsection="modifiers" hidden>
2004                  <div class="block-title has-reset">
2005                    <span
2006                      class="block-title-name"
2007                      data-tooltip="Still in progress and being evaluated."
2008                    >Modifiers (Experimental)</span>
2009                    <button class="block-reset-btn" data-reset="modifiers" aria-label="Reset Modifiers" data-tooltip="Reset modifier settings">
2010                      <i class="fa-solid fa-rotate-left"></i>
2011                      <span class="sr-only">Reset</span>
2012                    </button>
2013                  </div>
2014                  <label class="slider-line">
2015                    <span>Bend</span>
2016                    <input id="modifierBendAmount" type="range" min="-100" max="100" value="0" step="1" />
2017                    <span class="value" data-output="modifierBendAmount">0</span>
2018                  </label>
2019                  <label class="slider-line">
2020                    <span>Twist</span>
2021                    <input id="modifierTwistAmount" type="range" min="-100" max="100" value="0" step="1" />
2022                    <span class="value" data-output="modifierTwistAmount">0</span>
2023                  </label>
2024                  <label class="slider-line">
2025                    <span>Taper</span>
2026                    <input id="modifierTaperAmount" type="range" min="-100" max="100" value="0" step="1" />
2027                    <span class="value" data-output="modifierTaperAmount">0</span>
2028                  </label>
2029                  <label class="slider-line">
2030                    <span>Skew</span>
2031                    <input id="modifierSkewAmount" type="range" min="-100" max="100" value="0" step="1" />
2032                    <span class="value" data-output="modifierSkewAmount">0</span>
2033                  </label>
2034                  <label class="slider-line">
2035                    <span>FFD</span>
2036                    <input id="modifierFfdAmount" type="range" min="-100" max="100" value="0" step="1" />
2037                    <span class="value" data-output="modifierFfdAmount">0</span>
2038                  </label>
2039                  <div class="modifier-mesh-actions">
2040                    <button
2041                      type="button"
2042                      id="modifierSubdivideMesh"
2043                      class="accent-action-btn"
2044                      data-tooltip="Add one subdivision pass for smoother modifier deformation (max 3). Shape library only."
2045                    >
2046                      Subdivide Mesh
2047                    </button>
2048                    <button
2049                      type="button"
2050                      id="modifierRestoreOriginalMesh"
2051                      class="accent-action-btn"
2052                      data-tooltip="Remove subdivision and restore the imported shape library mesh."
2053                    >
2054                      Remove SubD
2055                    </button>
2056                  </div>
2057                </div>
2058                <div class="panel-block-divider"></div>
2059                <div class="subsection">
2060                  <div class="block-title">Turntable</div>
2061                  <div class="segmented compact">
2062                    <label>
2063                      <input type="radio" name="autorotate" value="0" checked />
2064                      OFF
2065                    </label>
2066                    <label>
2067                      <input type="radio" name="autorotate" value="0.2" />
2068                      NORMAL
2069                    </label>
2070                    <label>
2071                      <input type="radio" name="autorotate" value="
20710.5" />
2072                      FAST
2073                    </label>
2074                  </div>
2075                  <label class="select-line">
2076                    <span>Direction</span>
2077                    <select id="autoRotateDirection" aria-label="Turntable direction">
2078                      <option value="forward">Forward</option>
2079                      <option value="reverse">Reverse</option>
2080                    </select>
2081                  </label>
2082                </div>
2083              </div>
2084
2085              <div class="panel-block">
2086                <div class="subsection" data-subsection="grid">
2087                  <div class="block-title has-toggle">
2088                    <span>Grid</span>
2089                    <div style="display: flex; align-items: center; gap: 0.5rem;">
2090                      <button class="block-reset-btn" data-reset="grid" aria-label="Reset Grid" data-tooltip="Reset Grid settings">
2091                        <i class="fa-solid fa-rotate-left"></i>
2092                        <span class="sr-only">Reset</span>
2093                      </button>
2094                      <label class="effect-toggle" data-tooltip="Show/hide ground grid">
2095                        <input type="checkbox" id="groundWire" />
2096                        <span class="effect-indicator" aria-hidden="true"></span>
2097                        <span class="sr-only">Enable grid</span>
2098                      </label>
2099                    </div>
2100                  </div>
2101                  <div
2102                    class="effect-foldout effect-foldout--collapsed"
2103                    data-effect-foldout="grid"
2104                    aria-hidden="true"
2105                  >
2106                  <label class="color-line">
2107                    <span>Color</span>
2108                    <input
2109                      type="color"
2110                      id="groundWireColor"
2111                      class="color-chip"
2112                      value="#646464"
2113                    />
2114                  </label>
2115                  <label class="slider-line">
2116                    <span>Opacity</span>
2117                    <input
2118                      id="groundWireOpacity"
2119                      type="range"
2120                      min="0"
2121                      max="1"
2122                      value="0.5"
2123                      step="0.01"
2124                    />
2125                    <span class="value" data-output="groundWireOpacity">0.5</span>
2126                  </label>
2127                  <label class="slider-line">
2128                    <span data-tooltip="Grid line thickness">Thickness</span>
2129                    <input
2130                      id="gridLineWidth"
2131                      type="range"
2132                      min="0.5"
2133                      max="2.5"
2134                      step="0.05"
2135                      value="1"
2136                    />
2137                    <span class="value" data-output="gridLineWidth">1.00</span>
2138                  </label>
2139                  <label class="slider-line">
2140                    <span data-tooltip="Vertical position of the grid">Y Position</span>
2141                    <input
2142                      id="gridY"
2143                      type="range"
2144                      min="-2"
2145                      max="2"
2146                      step="0.01"
2147                      value="0"
2148                    />
2149                    <span class="value" data-output="gridY">0.00m</span>
2150                  </label>
2151                  <label class="slider-line">
2152                    <span>Scale</span>
2153                    <input
2154                      id="gridScale"
2155                      type="range"
2156                      min="0.5"
2157                      max="3"
2158                      step="0.01"
2159                      value="1"
2160                    />
2161                    <span class="value" data-output="gridScale">1.00</span>
2162                  </label>
2163                  <button id="gridSnap" class="ghost-btn small" type="button">
2164                    Snap to Mesh
2165                  </button>
2166                  </div>
2167                </div>
2168              </div>
2169
2170              <div class="panel-block stats-block">
2171                <div class="subsection" data-subsection="object-info">
2172                  <div class="block-title has-toggle">
2173                    <span data-tooltip="File metadata and geometry statistics">Object Info</span>
2174                    <label class="effect-toggle" data-tooltip="Show object file and geometry details">
2175                      <input type="checkbox" id="toggleObjectInfo" />
2176                      <span class="effect-indicator" aria-hidden="true"></span>
2177                      <span class="sr-only">Show object info</span>
2178                    </label>
2179                  </div>
2180                  <div
2181                    class="effect-foldout effect-foldout--collapsed effect-foldout--md"
2182                    data-effect-foldout="object-info"
2183                    aria-hidden="true"
2184                  >
2185                    <dl id="meshStats">
2186                      <div><dt>Asset Name</dt><dd>—</dd></div>
2187                      <div><dt>Generator</dt><dd>—</dd></div>
2188                      <div><dt>Version</dt><dd>—</dd></div>
2189                      <div><dt>Copyright</dt><dd>—</dd></div>
2190                      <div><dt>Triangles</dt><dd>—</dd></div>
2191                      <div><dt>Vertices</dt><dd>—</dd></div>
2192                      <div><dt>Materials</dt><dd>—</dd></div>
2193                      <div><dt>Textures</dt><dd>—</dd></div>
2194                      <div><dt>File Size</dt><dd>—</dd></div>
2195                      <div><dt>Bounds</dt><dd>—</dd></div>
2196                    </dl>
2197                  </div>
2198                </div>
2199              </div>
2200
2201              <div class="panel-block" id="animationBlock">
2202                <div class="block-title">Animation</div>
2203                <div class="animation-timeline">
2204                  <div class="animation-controls">
2205                    <div class="animation-transport-btns">
2206                      <button id="playPause" class="animation-play-btn" disabled aria-label="Play animation">
2207                        <i class="fa-solid fa-play" aria-hidden="true"></i>
2208                        <span class="sr-only">Play</span>
2209                      </button>
2210                      <button
2211                        id="animationReverseBtn"
2212                        type="button"
2213                        class="animation-play-btn"
2214                        disabled
2215                        aria-pressed="false"
2216                        aria-label="Reverse animation playback"
2217                        data-tooltip="Play the animation clip backwards"
2218                      >
2219                        <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
2220                        <span class="sr-only">Reverse animation playback</span>
2221                      </button>
2222                    </div>
2223                    <input
2224                      type="range"
2225                      id="animationScrub"
2226                      min="0"
2227                      max="1"
2228                      step="0.001"
2229                      value="0"
2230                      disabled
2231                      aria-label="Animation timeline"
2232                    />
2233                    <span id="animationTime">0:00</span>
2234                  </div>
2235                </div>
2236                <label class="select-line">
2237                  <span>Clip</span>
2238                  <select id="animationSelect" disabled aria-label="Animation clip"></select>
2239                </label>
2240                <div class="slider-line slider-line--toggle-only animation-time-reference-header">
2241                  <span>Frame Reference</span>
2242                  <label
2243                    class="effect-toggle"
2244                    data-tooltip="Show frame counter and FPS grid for timing notes"
2245                  >
2246                    <input type="checkbox" id="animationTimeReference" disabled />
2247                    <span class="effect-indicator" aria-hidden="true"></span>
2248                    <span class="sr-only">Frame Reference</span>
2249                  </label>
2250                </div>
2251                <div
2252                  id="animationTimeReferenceSection"
2253                  class="effect-foldout effect-foldout--collapsed animation-time-reference-foldout"
2254                  hidden
2255                  aria-hidden="true"
2256                >
2257                  <label class="select-line animation-time-reference-line">
2258                    <span id="animationFrameNumbers" class="animation-frame-numbers" aria-live="polite">001 / 060</span>
2259                    <select
2260                      id="animationDisplayFps"
2261                      aria-label="Frame reference frame rate"
2262                      disabled
2263                    >
2264                      <option value="24">24 fps</option>
2265                      <option value="30">30 fps</option>
2266                      <option value="60" selected>60 fps</option>
2267                    </select>
2268                  </label>
2269                </div>
2270                <div class="segmented compact segmented--2" id="animationClipModeSegmented">
2271                  <label>
2272                    <input type="radio" name="animationClipMode" value="loop" checked disabled />
2273                    Loop Selected
2274                  </label>
2275                  <label>
2276                    <input type="radio" name="animationClipMode" value="cycle" disabled />
2277                    Cycle All
2278                  </label>
2279                </div>
2280                <div class="panel-block-divider" aria-hidden="true"></div>
2281                <div class="subsection">
2282                  <div class="block-title">Playback speed</div>
2283                  <div class="segmented compact segmented--4" id="animationSpeedSegmented">
2284                    <label>
2285                      <input type="radio" name="animationPlaybackSpeed" value="0.1" disabled />
2286                      0.1×
2287                    </label>
2288                    <label>
2289                      <input type="radio" name="animationPlaybackSpeed" value="0.25" disabled />
2290                      0.25×
2291                    </label>
2292                    <label>
2293                      <input type="radio" name="animationPlaybackSpeed" value="0.5" disabled />
2294                      0.5×
2295                    </label>
2296                    <label>
2297                      <input type="radio" name="animationPlaybackSpeed" value="1" checked disabled />
2298                      1.0×
2299                    </label>
2300                  </div>
2301                </div>
2302                <div class="panel-block-divider" aria-hidden="true"></div>
2303                <div class="subsection">
2304                  <div class="slider-line slider-line--toggle-only">
2305                    <span>Show bones</span>
2306                    <label class="effect-toggle" data-tooltip="Reveal the animated skeleton rig over the mesh">
2307                      <input type="checkbox" id="animationShowBones" disabled />
2308                      <span class="effect-indicator" aria-hidden="true"></span>
2309                      <span class="sr-only">Show animation bones</span>
2310                    </label>
2311                  </div>
2312                  <div class="slider-line slider-line--toggle-only" id="animationShowJointNamesRow" hidden>
2313                    <span>Show joint names</span>
2314                    <label class="effect-toggle" data-tooltip="Always show joint name labels over the skeleton">
2315                      <input type="checkbox" id="animationShowJointNames" disabled />
2316                      <span class="effect-indicator" aria-hidden="true"></span>
2317                      <span class="sr-only">Show joint name labels</span>
2318                    </label>
2319                  </div>
2320                  <div class="slider-line slider-line--toggle-only" id="animationHideMeshRow" hidden>
2321                    <span>Hide mesh</span>
2322                    <label class="effect-toggle" data-tooltip="Hide the mesh completely and playback bones only">
2323                      <input type="checkbox" id="animationHideMesh" disabled />
2324                      <span class="effect-indicator" aria-hidden="true"></span>
2325                      <span class="sr-only">Hide mesh during bone playback</span>
2326                    </label>
2327                  </div>
2328                  <label class="slider-line" id="animationBoneStrokeRow" hidden>
2329                    <span>Bone stroke</span>
2330                    <input
2331                      id="animationBoneStrokeWidth"
2332                      type="range"
2333                      min="1"
2334                      max="8"
2335                      step="0.5"
2336                      value="2"
2337                      disabled
2338                      aria-label="Bone line stroke width"
2339                    />
2340                    <span class="value" data-output="animationBoneStrokeWidth">2.0</span>
2341                  </label>
2342                  <label class="slider-line" id="animationJointScaleRow" hidden>
2343                    <span>Joint scale</span>
2344                    <input
2345                      id="animationJointScale"
2346                      type="range"
2347                      min="0.25"
2348                      max="3"
2349                      step="0.05"
2350                      value="0.5"
2351                      disabled
2352                      aria-label="Joint marker scale"
2353                    />
2354                    <span class="value" data-output="animationJointScale">0.50</span>
2355                  </label>
2356                </div>
2357              </div>
2358
2359              <div class="panel-block">
2360                <div class="block-title">Scene</div>
2361                <div class="export-controls">
2362                  <div class="scene-controls">
2363                    <button id="loadMeshButton" class="accent-action-btn" data-tooltip="Load a new 3D model file">
2364                      <i class="fa-solid fa-wand-magic-sparkles"></i>
2365                      Import Object
2366                    </button>
2367                    <button
2368                      type="button"
2369                      id="hideObjectBtn"
2370                      class="accent-action-btn hide-object-btn"
2371                      data-tooltip="Hide the loaded object from the viewport and exports"
2372                      aria-pressed="false"
2373                      disabled
2374                    >
2375                      <i class="fa-solid fa-eye" aria-hidden="true"></i>
2376                      Hide Object
2377                    </button>
2378                    <button id="resetMeshSettings" class="accent-action-btn" data-tooltip="Reset all object settings to defaults">
2379                      <i class="fa-solid fa-rotate-left"></i>
2380                      Reset Object
2381                    </button>
2382                  </div>
2383                  <div class="panel-block-divider" aria-hidden="true"></div>
2384                  <div class="scene-controls">
2385                    <button class="reset-scene accent-action-btn" data-tooltip="Clear the workspace and restore a blank canvas">
2386                      <i class="fa-solid fa-arrow-left"></i>
2387                      Reset Scene
2388                    </button>
2389                    <button class="copy-scene-settings accent-action-btn" data-tooltip="Copy all scene settings to clipboard">
2390                      <i class="fa-solid fa-copy"></i>
2391                      Copy Scene Settings
2392                    </button>
2393                    <button class="load-scene-settings accent-action-btn" data-tooltip="Paste scene settings from clipboard into a dialog">
2394                      <i class="fa-solid fa-upload"></i>
2395                      Paste Scene Settings
2396                    </button>
2397                    <button class="save-orby-scene accent-action-btn" data-tooltip="Save entire scene and model as .orby file">
2398                      <i class="fa-solid fa-floppy-disk"></i>
2399                      Save .orby Scene
2400                    </button>
2401                    <button class="load-orby-scene accent-action-btn" data-tooltip="Load entire scene and model from .orby file">
2402                      <i class="fa-solid fa-file-import"></i>
2403                      Load .orby Scene
2404                    </button>
2405                  </div>
2406                </div>
2407              </div>
2408              <div class="info-version-tag">v0.5.1052 · 2026-10-02 19:44:45 UTC</div>
2409              <button type="button" class="info-orby-mark" data-tooltip="Home" aria-label="Home">
2410                <img src="./assets/images/favicon.svg" width="28" height="28" alt="" />
2411              </button>
2412            </section>
2413
2414            <h2 class="panel-header-title" data-header="studio">Studio</h2>
2415            <section class="panel" data-panel="studio">
2416
2417              <div class="panel-block" data-block="hdri">
2418                <div class="block-title has-toggle">
2419                  <span>HDRI</span>
2420                  <div style="display: flex; align-items: center; gap: 0.5rem;">
2421                    <button class="block-reset-btn" data-reset="hdri" aria-label="Reset HDRI" data-tooltip="Reset HDRI settings">
2422                      <i class="fa-solid fa-rotate-left"></i>
2423                      <span class="sr-only">Reset</span>
2424                    </button>
2425                    <label class="effect-toggle" data-tooltip="Enable/disable HDRI environment lighting">
2426                      <input type="checkbox" id="hdriEnabled" checked />
2427                      <span class="effect-indicator" aria-hidden="true"></span>
2428                      <span class="sr-only">Enable HDRI Lighting</span>
2429                    </label>
2430                  </div>
2431                </div>
2432                <div
2433                  class="effect-foldout effect-foldout--expanded effect-foldout--md"
2434                  data-effect-foldout="hdri"
2435                  aria-hidden="false"
2436                >
2437                <input
2438                  type="file"
2439                  id="hdriFileInput"
2440                  class="sr-only"
2441                  accept=".hdr,.hdri,.exr,image/*,.png,.jpg,.jpeg,.webp,.tif,.tiff"
2442                  tabindex="-1"
2443                  aria-hidden="true"
2444                />
2445                <div class="hdri-grid" id="hdriGrid">
2446                  <button type="button" data-hdri="congress" class="hdri-icon" data-tooltip="Congress Hall environment">
2447                    <img src="./assets/images/hdri-thumbnail-congress.png" alt="Congress" />
2448                  </button>
2449                  <button data-hdri="luminous-sky" class="hdri-icon" data-tooltip="Forest environment">
2450                    <img src="./assets/images/hdri-thumbnail-forest.png" alt="Forest" />
2451                  </button>
2452                  <button data-hdri="sunset" class="hdri-icon" data-tooltip="Sunset environment">
2453                    <img src="./assets/images/hdri-thumbnail-sunset.png" alt="Sunset" />
2454                  </button>
2455                  <button data-hdri="meadow" class="hdri-icon" data-tooltip="Meadow environment">
2456                    <img src="./assets/images/hdri-thumbnail-meadow.png" alt="Meadow" />
2457                  </button>
2458                  <button data-hdri="abandoned" class="hdri-icon" data-tooltip="Abandoned building environment">
2459                    <img src="./assets/images/hdri-thumbnail-abandoned.png" alt="Abandoned" />
2460                  </button>
2461                  <button type="button" data-hdri="beach" class="hdri-icon active" data-tooltip="Beach environment">
2462                    <img src="./assets/images/hdri-thumbnail-beach.png" alt="Beach" />
2463                  </button>
2464                  <button type="button" data-hdri="blue-hour" class="hdri-icon" data-tooltip="Blue hour — Rangiroa">
2465                    <img src="./assets/images/hdri-thumbnail-blue-hour.png" alt="Blue hour" />
2466                  </button>
2467                  <button type="button" data-hdri="sunny-parking" class="hdri-icon" data-tooltip="Sunny parking — urban daylight">
2468                    <img src="./assets/images/hdri-thumbnail-sunny-parking.png" alt="Sunny parking" />
2469                  </button>
2470                  <button
2471                    type="button"
2472                    id="hdriUploadBtn"
2473                    class="hdri-icon hdri-icon--upload"
2474                    data-tooltip="Upload custom HDRI (.hdr, .exr, .jpg, .png) — 2:1 equirectangular"
2475                  >
2476                    <span class="hdri-icon__disc" aria-hidden="true"></span>
2477                    <i class="fa-solid fa-plus hdri-icon__plus" aria-hidden="true"></i>
2478                    <i class="fa-solid fa-check hdri-icon__check" aria-hidden="true"></i>
2479                    <span class="sr-only">Upload custom HDRI</span>
2480                  </button>
2481                </div>
2482                <label class="slider-line">
2483                  <span data-tooltip="HDRI lighting intensity">Intensity</span>
2484                  <input
2485                    id="hdriStrength"
2486                    type="range"
2487                    min="0"
2488                    max="3"
2489                    value="2"
2490                    step="0.1"
2491                  />
2492                  <span class="value" data-output="hdriStrength">2</span>
2493                </label>
2494                <label class="slider-line">
2495                  <span data-tooltip="Blur amount for HDRI reflections">Blurriness</span>
2496                  <input
2497                    id="hdriBlurriness"
2498                    type="range"
2499                    min="0"
2500                    max="1"
2501                    value="0"
2502                    step="0.01"
2503                  />
2504                  <span class="value" data-output="hdriBlurriness">0.00</span>
2505                </label>
2506                <label class="slider-line">
2507                    <span>Rotation</span>
2508                  <input
2509                    id="hdriRotation"
2510                    type="range"
2511                    min="0"
2512                    max="360"
2513                    value="0"
2514                    step="1"
2515                  />
2516                  <span class="value" data-output="hdriRotation">0°</span>
2517                </label>
2518                <div class="slider-line">
2519                  <span data-tooltip="On: the HDRI is drawn behind the scene. Off: only the solid background color is shown; HDRI still lights the model.">Render Backdrop</span>
2520                  <label class="effect-toggle">
2521                    <input type="checkbox" id="hdriBackground" checked />
2522                    <span class="effect-indicator" aria-hidden="true"></span>
2523                    <span class="sr-only">Render HDRI as viewport backdrop</span>
2524                  </label>
2525                </div>
2526                <!-- TEMP: HDRI Receive Shadows + AO hidden (catcher / N8AO composite bugs). Runtime forced off in SceneManager. -->
2527                <div class="slider-line" hidden aria-hidden="true">
2528                  <span data-tooltip="Invisible floor at Ground Y under the model: Ambient Occlusion for contact on the HDRI; 3-point lights + Cast Shadows for directional shadow maps. Uses Ground Y (snap to mesh if it floats).">Receive Shadows + AO</span>
2529                  <label class="effect-toggle">
2530                    <input type="checkbox" id="hdriReceiveShadowsAo" />
2531                    <span class="effect-indicator" aria-hidden="true"></span>
2532                    <span class="sr-only">Receive shadows and ambient occlusion on HDRI backdrop</span>
2533                    </label>
2534                  </div>
2535                </div>
2536              </div>
2537
2538              <div
2539                class="panel-block panel-block--compact-head"
2540                data-block="background"
2541                id="studioBackgroundPanel"
2542                hidden
2543              >
2544                <div class="block-title has-reset">
2545                  <span data-tooltip="Solid color, image, or gradient behind the scene when Render Backdrop is off — HDRI still lights the model">Background</span>
2546                  <button
2547                    type="button"
2548                    class="block-reset-btn"
2549                    data-reset="background"
2550                    aria-label="Reset Background"
2551                    data-tooltip="Reset background color"
2552                  >
2553                    <i class="fa-solid fa-rotate-left"></i>
2554                    <span class="sr-only">Reset</span>
2555                  </button>
2556                </div>
2557                <div class="slider-line">
2558                  <span data-tooltip="Flat color behind the scene when Render Backdrop is off">Solid color</span>
2559                  <label class="effect-toggle">
2560                    <input type="checkbox" id="backgroundSolidEnabled" checked />
2561                    <span class="effect-indicator" aria-hidden="true"></span>
2562                    <span class="sr-only">Enable solid color background</span>
2563                  </label>
2564                </div>
2565                <div
2566                  id="backgroundSolidFoldout"
2567                  class="effect-foldout effect-foldout--collapsed"
2568                  data-effect-foldout="background-solid"
2569                  aria-hidden="true"
2570                >
2571                  <label class="color-line">
2572                    <span>Color</span>
2573                    <input
2574                      type="color"
2575                      id="backgroundColor"
2576                      class="color-chip"
2577                      value="#505050"
2578                    />
2579                  </label>
2580                </div>
2581                <div class="slider-line">
2582                  <span data-tooltip="Multi-stop linear or radial gradient">
2583                    <span class="block-title-name">
2584                      <span>Gradient</span>
2585                      <span
2586                        class="dev-badge"
2587                        data-tooltip="Export and capture preview can look slightly brighter than the viewport — the background uses your gradient colors directly, without exposure, tone map, or Shader Lab on the backdrop. Use Capture preview frame in the Export tab to preview and adjust before exporting. We're working on a fix to get closer to the viewport preview."
2588                        tabindex="0"
2589                        role="img"
2590                        aria-label="Export and capture preview can look slightly brighter than the viewport — the background uses your gradient colors directly, without exposure, tone map, or Shader Lab on the backdrop. Use Capture preview frame in the Export tab to preview and adjust before exporting. We're working on a fix to get closer to the viewport preview."
2591                      ><i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i></span>
2592                    </span>
2593                  </span>
2594                  <label class="effect-toggle">
2595                    <input type="checkbox" id="backgroundGradientEnabled" />
2596                    <span class="effect-indicator" aria-hidden="true"></span>
2597                    <span class="sr-only">Enable gradient background</span>
2598                  </label>
2599                </div>
2600                <div
2601                  id="backgroundGradientFoldout"
2602                  class="effect-foldout effect-foldout--collapsed bg-gradient-foldout"
2603                  data-effect-foldout="background-gradient"
2604                  aria-hidden="true"
2605                >
2606                  <div class="export-option-group bg-gradient-controls">
2607                  <div class="bg-gradient-preview-wrap">
2608                    <canvas
2609                      id="backgroundGradientPreview"
2610                      class="bg-gradient-preview"
2611                      aria-label="Gradient preview — drag stops (max 3), click empty bar to add"
2612                      role="img"
2613                    ></canvas>
2614                  </div>
2615                  <label class="color-line">
2616                    <span>Stop color</span>
2617                    <input
2618                      type="color"
2619                      id="backgroundGradientStopColor"
2620                      class="color-chip"
2621                      value="#080808"
2622                    />
2623                  </label>
2624                  <div class="export-button-group">
2625                    <button type="button" data-bg-gradient-type="linear" class="export-option-btn active">Linear</button>
2626                    <button type="button" data-bg-gradient-type="radial" class="export-option-btn">Radial</button>
2627                  </div>
2628                  <label class="slider-line" id="backgroundGradientAngleRow">
2629                    <span data-tooltip="Gradient direction — same convention as CSS linear-gradient (0° = up)">Angle</span>
2630                    <input id="backgroundGradientAngle" type="range" min="0" max="360" step="1" value="180" />
2631                    <span class="value" data-output="backgroundGradientAngle">180°</span>
2632                  </label>
2633                  <div id="backgroundGradientCenterRow" hidden>
2634                    <label class="slider-line">
2635                      <span>Center X</span>
2636                      <input id="backgroundGradientCenterX" type="range" min="0" max="100" step="1" value="50" />
2637                      <span class="value" data-output="backgroundGradientCenterX">50%</span>
2638                    </label>
2639                    <label class="slider-line">
2640                      <span>Center Y</span>
2641                      <input id="backgroundGradientCenterY" type="range" min="0" max="100" step="1" value="50" />
2642                      <span class="value" data-output="backgroundGradientCenterY">50%</span>
2643                    </label>
2644                  </div>
2645                  </div>
2646                </div>
2647                <div class="slider-line">
2648                  <span data-tooltip="Custom image behind the scene">Image</span>
2649                  <label class="effect-toggle">
2650                    <input type="checkbox" id="backgroundImageEnabled" />
2651                    <span class="effect-indicator" aria-hidden="true"></span>
2652                    <span class="sr-only">Enable image background</span>
2653                  </label>
2654                </div>
2655                <div
2656                  id="backgroundImageFoldout"
2657                  class="effect-foldout effect-foldout--collapsed"
2658                  data-effect-foldout="background-image"
2659                  aria-hidden="true"
2660                >
2661                  <input
2662                    type="file"
2663                    id="backgroundImageFileInput"
2664                    class="sr-only"
2665                    accept=".png,.jpg,.jpeg,.webp,.gif,.bmp,.tif,.tiff,image/*"
2666                    tabindex="-1"
2667                    aria-hidden="true"
2668                  />
2669                  <div class="export-option-group bg-image-controls">
2670                    <button
2671                      type="button"
2672                      id="backgroundImageSelectBtn"
2673                      class="export-option-btn bg-image-select-btn"
2674                      data-tooltip="Upload a PNG, JPG, or WebP"
2675                    >
2676                      Select background image
2677                    </button>
2678                    <div
2679                      id="backgroundImageFitPanel"
2680                      class="export-button-group export-button-group--triple"
2681                      hidden
2682                    >
2683                      <button type="button" data-bg-image-fit="cover" class="export-option-btn active">Cover</button>
2684                      <button type="button" data-bg-image-fit="contain" class="export-option-btn">Contain</button>
2685                      <button type="button" data-bg-image-fit="fill" class="export-option-btn">Fill</button>
2686                    </div>
2687                    <label class="slider-line" id="backgroundImageBlurRow" hidden>
2688                      <span data-tooltip="Soften the background image">Blur</span>
2689                      <input
2690                        id="backgroundImageBlur"
2691                        type="range"
2692                        min="0"
2693                        max="1"
2694                        step="0.01"
2695                        value="0"
2696                      />
2697                      <span class="value" data-output="backgroundImageBlur">0.00</span>
2698                    </label>
2699                  </div>
2700                </div>
2701              </div>
2702
2703              <div class="panel-block" data-block="base">
2704                <div class="block-title has-toggle has-reset">
2705                  <span>Base</span>
2706                  <div style="display: flex; align-items: center; gap: 0.5rem;">
2707                    <button class="block-reset-btn" data-reset="base" aria-label="Reset Base" data-tooltip="Reset Base settings">
2708                      <i class="fa-solid fa-rotate-left"></i>
2709                      <span class="sr-only">Reset</span>
2710                    </button>
2711                    <label class="effect-toggle" data-tooltip="Show/hide solid base platform">
2712                      <input type="checkbox" id="groundSolid" />
2713                      <span class="effect-indicator" aria-hidden="true"></span>
2714                      <span class="sr-only">Enable base</span>
2715                    </label>
2716                  </div>
2717                </div>
2718                <div class="base-placement-controls">
2719                <div class="slider-line">
2720                  <span class="block-title-name slider-line-label">
2721                    <span id="groundYLabel" data-tooltip="Vertical position of the base and glass">Y Position</span>
2722                    <button
2723                      id="baseSnap"
2724                      class="slider-snap-btn"
2725                      type="button"
2726                      aria-label="Snap base to mesh"
2727                      data-tooltip="Align base to mesh bottom"
2728                    >
2729                      <i class="fa-solid fa-magnet" aria-hidden="true"></i>
2730                    </button>
2731                  </span>
2732                  <input
2733                    id="groundY"
2734                    type="range"
2735                    min="-2"
2736                    max="2"
2737                    step="0.01"
2738                    value="0"
2739                    aria-labelledby="groundYLabel"
2740                  />
2741                  <span class="value" data-output="groundY">0.00m</span>
2742                </div>
2743                <label class="slider-line">
2744                  <span data-tooltip="Size of the base and glass">Scale</span>
2745                  <input
2746                    id="baseScale"
2747                    type="range"
2748                    min="0.5"
2749                    max="10"
2750                    step="0.01"
2751                    value="1"
2752                  />
2753                  <span class="value" data-output="baseScale">1.00</span>
2754                </label>
2755                </div>
2756                <div
2757                  class="effect-foldout effect-foldout--collapsed effect-foldout--md"
2758                  data-effect-foldout="base"
2759                  aria-hidden="true"
2760                >
2761                  <div class="subsection" data-subsection="base-material">
2762                    <div class="panel-block-divider" aria-hidden="true"></div>
2763                    <label class="color-line">
2764                      <span>Color</span>
2765                      <input
2766                        type="color"
2767                        id="groundSolidColor"
2768                        class="color-chip"
2769                        value="#808080"
2770                      />
2771                    </label>
2772                    <label class="slider-line">
2773                      <span data-tooltip="PBR metalness — higher reads more like metal">Metalness</span>
2774                      <input
2775                        id="baseMetalness"
2776                        type="range"
2777                        min="0"
2778                        max="1"
2779                        step="0.01"
2780                        value="0.08"
2781                      />
2782                      <span class="value" data-output="baseMetalness">0.08</span>
2783                    </label>
2784                    <label class="slider-line">
2785                      <span data-tooltip="Lower roughness = glossier surface">Roughness</span>
2786                      <input
2787                        id="baseRoughness"
2788                        type="range"
2789                        min="0"
2790                        max="1"
2791                        step="0.01"
2792                        value="0.50"
2793                      />
2794                      <span class="value" data-output="baseRoughness">0.50</span>
2795                    </label>
2796                    <div class="panel-block-divider" aria-hidden="true"></div>
2797                    <div id="baseSurfaceControlsMount" class="surface-controls-mount"></div>
2798                  </div>
2799                </div>
2800              </div>
2801
2802              <div class="panel-block" data-block="base-glass">
2803                <div class="block-title has-toggle has-reset">
2804                  <span>Base Glass</span>
2805                  <div style="display: flex; align-items: center; gap: 0.5rem;">
2806                    <button class="block-reset-btn" data-reset="base-glass" aria-label="Reset Base Glass" data-tooltip="Reset Base Glass settings">
2807                      <i class="fa-solid fa-rotate-left"></i>
2808                      <span class="sr-only">Reset</span>
2809                    </button>
2810                    <label class="effect-toggle" data-tooltip="Realtime planar reflection of the loaded mesh on the base top (extra GPU). Shares placement and scale with Base.">
2811                      <input type="checkbox" id="baseGlassSurface" />
2812                      <span class="effect-indicator" aria-hidden="true"></span>
2813                      <span class="sr-only">Enable planar reflection on the base top</span>
2814                    </label>
2815                  </div>
2816                </div>
2817                <div
2818                  class="effect-foldout effect-foldout--collapsed"
2819                  data-effect-foldout="base-glass"
2820                  aria-hidden="true"
2821                >
2822                  <label class="slider-line">
2823                    <span data-tooltip="Base tone under the reflection — black to white (mid gray is neutral).">Brightness</span>
2824                    <input
2825                      id="baseGlassBrightness"
2826                      type="range"
2827                      min="0"
2828                      max="1"
2829                      step="0.01"
2830                      value="0.1"
2831                    />
2832                    <span class="value" data-output="baseGlassBrightness">0.10</span>
2833                  </label>
2834                  <label class="slider-line">
2835                    <span data-tooltip="Progressive softness — blur spreads wider as you increase. Disabled when Base Glass reflection is off.">Blur</span>
2836                    <input
2837                      id="baseGlassBlur"
2838                      type="range"
2839                      min="0"
2840                      max="1"
2841                      step="0.01"
2842                      value="0.1"
2843                    />
2844                    <span class="value" data-output="baseGlassBlur">0.10</span>
2845                  </label>
2846                  <label class="slider-line">
2847                    <span data-tooltip="How strong the reflection is vs the base tone (lower = subtler, less mirror-like).">Amount</span>
2848                    <input
2849                      id="baseGlassAmount"
2850                      type="range"
2851                      min="0"
2852                      max="1"
2853                      step="0.01"
2854                      value="0.5"
2855                    />
2856                    <span class="value" data-output="baseGlassAmount">0.50</span>
2857                  </label>
2858                  <div class="panel-block-divider" aria-hidden="true"></div>
2859                  <div id="baseGlassSurfaceControlsMount" class="surface-controls-mount"></div>
2860                </div>
2861              </div>
2862
2863              <div class="panel-block" data-block="backdrop">
2864                <div class="block-title has-toggle has-reset">
2865                  <span>Studio</span>
2866                  <div style="display: flex; align-items: center; gap: 0.5rem;">
2867                    <button class="block-reset-btn" data-reset="backdrop" aria-label="Reset Studio" data-tooltip="Reset Studio settings">
2868                      <i class="fa-solid fa-rotate-left"></i>
2869                      <span class="sr-only">Reset</span>
2870                    </button>
2871                    <label class="effect-toggle" data-tooltip="Show/hide seamless photo backdrop wall">
2872                      <input type="checkbox" id="backdropEnabled" />
2873                      <span class="effect-indicator" aria-hidden="true"></span>
2874                      <span class="sr-only">Enable seamless backdrop</span>
2875                    </label>
2876                  </div>
2877                </div>
2878                <div
2879                  class="effect-foldout effect-foldout--collapsed effect-foldout--md"
2880                  data-effect-foldout="backdrop"
2881                  aria-hidden="true"
2882                >
2883                  <label class="color-line">
2884                    <span>Color</span>
2885                    <input
2886                      type="color"
2887                      id="backdropColor"
2888                      class="color-chip"
2889                      value="#808080"
2890                    />
2891                  </label>
2892                  <label class="slider-line">
2893                    <span data-tooltip="PBR metalness — higher reads more like metal">Metalness</span>
2894                    <input
2895                      id="backdropMetalness"
2896                      type="range"
2897                      min="0"
2898                      max="1"
2899                      step="0.01"
2900                      value="0.02"
2901                    />
2902                    <span class="value" data-output="backdropMetalness">0.02</span>
2903                  </label>
2904                  <label class="slider-line">
2905                    <span data-tooltip="Lower roughness = glossier surface">Roughness</span>
2906                    <input
2907                      id="backdropRoughness"
2908                      type="range"
2909                      min="0"
2910                      max="1"
2911                      step="0.01"
2912                      value="0.90"
2913                    />
2914                    <span class="value" data-output="backdropRoughness">0.90</span>
2915                  </label>
2916                  <label class="slider-line">
2917                    <span data-tooltip="Uniform size of the backdrop wall">Scale</span>
2918                    <input
2919                      id="backdropScale"
2920                      type="range"
2921                      min="0.5"
2922                      max="3"
2923                      step="0.01"
2924                      value="1"
2925                    />
2926                    <span class="value" data-output="backdropScale">1.00</span>
2927                  </label>
2928                  <label class="slider-line">
2929                    <span data-tooltip="Width of the backdrop (left-right framing)">Width</span>
2930                    <input
2931                      id="backdropWidth"
2932                      type="range"
2933                      min="0.5"
2934                      max="3"
2935                      step="0.01"
2936                      value="2"
2937                    />
2938                    <span class="value" data-output="backdropWidth">2.00</span>
2939                  </label>
2940                  <label class="slider-line">
2941                    <span data-tooltip="Rotate backdrop around scene center">Rotation</span>
2942                    <input
2943                      id="backdropRotation"
2944                      type="range"
2945                      min="0"
2946                      max="360"
2947                      step="1"
2948                      value="0"
2949                    />
2950                    <span class="value" data-output="backdropRotation">0°</span>
2951                  </label>
2952                  <div class="slider-line">
2953                    <span class="block-title-name slider-line-label">
2954                      <span id="backdropYLabel" data-tooltip="Vertical position of the backdrop">Y Position</span>
2955                      <button
2956                        id="backdropSnap"
2957                        class="slider-snap-btn"
2958                        type="button"
2959                        aria-label="Snap backdrop to mesh"
2960                        data-tooltip="Align backdrop floor to mesh base"
2961                      >
2962                        <i class="fa-solid fa-magnet" aria-hidden="true"></i>
2963                      </button>
2964                    </span>
2965                    <input
2966                      id="backdropY"
2967                      type="range"
2968                      min="-2"
2969                      max="2"
2970                      step="0.01"
2971                      value="0"
2972                      aria-labelledby="backdropYLabel"
2973                    />
2974                    <span class="value" data-output="backdropY">0.00m</span>
2975                  </div>
2976                  <div class="panel-block-divider" aria-hidden="true"></div>
2977                  <div id="backdropSurfaceControlsMount" class="surface-controls-mount"></div>
2978                </div>
2979              </div>
2980
2981              <div class="panel-block" data-block="infinity-cove">
2982                <div class="block-title has-toggle has-reset">
2983                  <span>Infinity Cove</span>
2984                  <div style="display: flex; align-items: center; gap: 0.5rem;">
2985                    <button class="block-reset-btn" data-reset="infinity-cove" aria-label="Reset Infinity Cove" data-tooltip="Reset Infinity Cove settings">
2986                      <i class="fa-solid fa-rotate-left"></i>
2987                      <span class="sr-only">Reset</span>
2988                    </button>
2989                    <label class="effect-toggle" data-tooltip="Show/hide seamless 360° infinity cove (flat floor + curved wall)">
2990                      <input type="checkbox" id="infinityCoveEnabled" />
2991                      <span class="effect-indicator" aria-hidden="true"></span>
2992                      <span class="sr-only">Enable infinity cove</span>
2993                    </label>
2994                  </div>
2995                </div>
2996                <div
2997                  class="effect-foldout effect-foldout--collapsed effect-foldout--md"
2998                  data-effect-foldout="infinity-cove"
2999                  aria-hidden="true"
3000                >
3001                  <label class="color-line">
3002                    <span>Color</span>
3003                    <input
3004                      type="color"
3005                      id="infinityCoveColor"
3006                      class="color-chip"
3007                      value="#808080"
3008                    />
3009                  </label>
3010                  <label class="slider-line">
3011                    <span data-tooltip="PBR metalness — higher reads more like metal">Metalness</span>
3012                    <input
3013                      id="infinityCoveMetalness"
3014                      type="range"
3015                      min="0"
3016                      max="1"
3017                      step="0.01"
3018                      value="0.02"
3019                    />
3020                    <span class="value" data-output="infinityCoveMetalness">0.02</span>
3021                  </label>
3022                  <label class="slider-line">
3023                    <span data-tooltip="Lower roughness = glossier surface">Roughness</span>
3024                    <input
3025                      id="infinityCoveRoughness"
3026                      type="range"
3027                      min="0"
3028                      max="1"
3029                      step="0.01"
3030                      value="0.90"
3031                    />
3032                    <span class="value" data-output="infinityCoveRoughness">0.90</span>
3033                  </label>
3034                  <label class="slider-line">
3035                    <span data-tooltip="Uniform size of the cove">Scale</span>
3036                    <input
3037                      id="infinityCoveScale"
3038                      type="range"
3039                      min="0.5"
3040                      max="3"
3041                      step="0.01"
3042                      value="2"
3043                    />
3044                    <span class="value" data-output="infinityCoveScale">2.00</span>
3045                  </label>
3046                  <label class="slider-line">
3047                    <span data-tooltip="Radius of the flat circular floor stage">Width</span>
3048                    <input
3049                      id="infinityCoveWidth"
3050                      type="range"
3051                      min="0.5"
3052                      max="3"
3053                      step="0.01"
3054                      value="2"
3055                    />
3056                    <span class="value" data-output="infinityCoveWidth">2.00</span>
3057                  </label>
3058                  <label class="slider-line">
3059                    <span data-tooltip="Rotate cove around scene center">Rotation</span>
3060                    <input
3061                      id="infinityCoveRotation"
3062                      type="range"
3063                      min="0"
3064                      max="360"
3065                      step="1"
3066                      value="0"
3067                    />
3068                    <span class="value" data-output="infinityCoveRotation">0°</span>
3069                  </label>
3070                  <div class="slider-line">
3071                    <span class="block-title-name slider-line-label">
3072                      <span id="infinityCoveYLabel" data-tooltip="Vertical position of the cove floor">Y Position</span>
3073                      <button
3074                        id="infinityCoveSnap"
3075                        class="slider-snap-btn"
3076                        type="button"
3077                        aria-label="Snap infinity cove to mesh"
3078                        data-tooltip="Align cove floor to mesh base"
3079                      >
3080                        <i class="fa-solid fa-magnet" aria-hidden="true"></i>
3081                      </button>
3082                    </span>
3083                    <input
3084                      id="infinityCoveY"
3085                      type="range"
3086                      min="-2"
3087                      max="2"
3088                      step="0.01"
3089                      value="0"
3090                      aria-labelledby="infinityCoveYLabel"
3091                    />
3092                    <span class="value" data-output="infinityCoveY">0.00m</span>
3093                  </div>
3094                  <div class="panel-block-divider" aria-hidden="true"></div>
3095                  <div id="infinityCoveSurfaceControlsMount" class="surface-controls-mount"></div>
3096                </div>
3097              </div>
3098
3099              <div class="panel-block lights" data-block="lights">
3100                <div class="block-title has-toggle">
3101                  <span id="lightsTitle">Lights</span>
3102                  <div style="display: flex; align-items: center; gap: 0.5rem;">
3103                    <button class="block-reset-btn" data-reset="lights" aria-label="Reset Lights" data-tooltip="Reset all light settings">
3104                      <i class="fa-solid fa-rotate-left"></i>
3105                      <span class="sr-only">Reset</span>
3106                    </button>
3107                    <label class="effect-toggle" data-tooltip="Enable/disable 3-point lighting system">
3108                      <input type="checkbox" id="lightsEnabled" />
3109                      <span class="effect-indicator" aria-hidden="true"></span>
3110                      <span class="sr-only">Enable 3-Point Lighting</span>
3111                    </label>
3112                  </div>
3113                </div>
3114
3115                <div
3116                  class="effect-foldout effect-foldout--collapsed effect-foldout--xl"
3117                  data-effect-foldout="lights-rig"
3118                  aria-hidden="true"
3119                >
3120                <!-- Global Light Controls -->
3121                <div class="subsection" data-subsection="globalLights">
3122                  <label class="slider-line">
3123                    <span data-tooltip="Overall light intensity multiplier">Intensity</span>
3124                    <input
3125                      id="lightsMaster"
3126                      type="range"
3127                      min="0"
3128                      max="5"
3129                      step="0.01"
3130                      value="0.30"
3131                    />
3132                    <span class="value" data-output="lightsMaster">1.00</span>
3133                  </label>
3134                  <label class="slider-line">
3135                    <span data-tooltip="Vertical position of all lights">Height</span>
3136                    <input
3137                      id="lightsHeight"
3138                      type="range"
3139                      min="0"
3140                      max="10"
3141                      step="0.1"
3142                      value="5"
3143                    />
3144                    <span class="value" data-output="lightsHeight">5.0</span>
3145                  </label>
3146                  <label class="slider-line">
3147                    <span data-tooltip="Scale the entire 3-point light rig — spreads lights farther from or closer to the subject">Rig Scale</span>
3148                    <input
3149                      id="lightsRigScale"
3150                      type="range"
3151                      min="0.25"
3152                      max="4"
3153                      step="0.01"
3154                      value="1"
3155                    />
3156                    <span class="value" data-output="lightsRigScale">1.00×</span>
3157                  </label>
3158                  <label class="slider-line">
3159                    <span data-tooltip="Rotate all lights around the object">Rotate</span>
3160                    <input
3161                      id="lightsRotation"
3162                      type="range"
3163                      min="0"
3164                      max="360"
3165                      value="0"
3166                      step="1"
3167                    />
3168                    <span class="value" data-output="lightsRotation">0°</span>
3169                  </label>
3170                  <div class="slider-line">
3171                    <span>Auto Rotate</span>
3172                    <label class="effect-toggle" data-tooltip="Rotate lights around the object (360° every 10s; matches 10s PNG/MP4 export when enabled)">
3173                      <input type="checkbox" id="lightsAutoRotate" />
3174                      <span class="effect-indicator" aria-hidden="true"></span>
3175                      <span class="sr-only">Auto rotate lights</span>
3176                    </label>
3177                  </div>
3178                  <div class="slider-line">
3179                    <span data-tooltip="Show visual indicators for light positions">Show Spotlights</span>
3180                    <label class="effect-toggle" data-tooltip="Display light position indicators in the viewport">
3181                      <input type="checkbox" id="showLightIndicators" />
3182                      <span class="effect-indicator" aria-hidden="true"></span>
3183                      <span class="sr-only">Show spotlights</span>
3184                    </label>
3185                  </div>
3186                  <div class="slider-line">
3187                    <span data-tooltip="Wireframe beam lines from each light to the shadow coverage area">Show Light Beams</span>
3188                    <label class="effect-toggle" data-tooltip="Display wireframe falloff and shadow-frustum guides">
3189                      <input type="checkbox" id="showLightFalloffIndicators" />
3190                      <span class="effect-indicator" aria-hidden="true"></span>
3191                      <span class="sr-only">Show light beams</span>
3192                    </label>
3193                  </div>
3194                </div>
3195
3196                <div class="panel-block-divider"></div>
3197
3198                <!-- Key Light -->
3199                <div class="subsection" data-subsection="keyLight">
3200                  <div class="block-title has-toggle has-reset">
3201                    <span>Key</span>
3202                    <div class="creative-look-heading-actions">
3203                      <button class="block-reset-btn" data-reset="keyLight" aria-label="Reset Key Light" data-tooltip="Reset Key Light settings">
3204                        <i class="fa-solid fa-rotate-left"></i>
3205                        <span class="sr-only">Reset</span>
3206                      </button>
3207                      <button
3208                        type="button"
3209                        id="keyLightGoboBtn"
3210                        class="gobo-panel-btn"
3211                        aria-expanded="false"
3212                        aria-controls="keyLightGoboFoldout"
3213                        data-tooltip="Gobo — project patterned light/shadow from the key light"
3214                      >
3215                        <i class="fa-solid fa-tree" aria-hidden="true"></i>
3216                        <span class="sr-only">Gobo textures</span>
3217                      </button>
3218                      <label class="effect-toggle" data-tooltip="Enable/disable Key Light (main light)">
3219                        <input type="checkbox" id="keyLightEnabled" />
3220                        <span class="effect-indicator" aria-hidden="true"></span>
3221                        <span class="sr-only">Enable Key Light</span>
3222                      </label>
3223                    </div>
3224                  </div>
3225                  <div
3226                    class="effect-foldout effect-foldout--collapsed effect-foldout--md"
3227                    data-effect-foldout="key-light"
3228                    aria-hidden="true"
3229                  >
3230                  <label class="color-line light-color-row" data-light="key">
3231                    <span>Color</span>
3232                  <input type="color" id="keyLightColor" name="keyLightColor" class="color-chip light-chip" value="#ffdfc9" />
3233                </label>
3234                  <label class="slider-line">
3235                    <span>Intensity</span>
3236                    <input
3237                      id="keyLightStrength"
3238                      type="range"
3239                      min="0"
3240                      max="5"
3241                      step="0.01"
3242                      value="1.28"
3243                    />
3244                    <span class="value" data-output="keyLightStrength">1.28</span>
3245                </label>
3246                  <label class="slider-line">
3247                    <span>Height</span>
3248                    <input
3249                      id="keyLightHeight"
3250                      type="range"
3251                      min="0"
3252                      max="10"
3253                      step="0.1"
3254                      value="5"
3255                    />
3256                    <span class="value" data-output="keyLightHeight">5.0</span>
3257                </label>
3258                  <label class="slider-line">
3259                    <span>Rotate</span>
3260                    <input
3261                      id="keyLightRotate"
3262                      type="range"
3263                      min="0"
3264                      max="360"
3265                      value="0"
3266                      step="1"
3267                    />
3268                    <span class="value" data-output="keyLightRotate">0°</span>
3269                  </label>
3270                  <div class="slider-line">
3271                    <span>Cast Shadows</span>
3272                    <label class="effect-toggle">
3273                      <input type="checkbox" id="keyLightCastShadows" />
3274                      <span class="effect-indicator" aria-hidden="true"></span>
3275                      <span class="sr-only">Cast shadows</span>
3276                    </label>
3277                  </div>
3278                  <div
3279                    id="keyLightGoboFoldout"
3280                    class="creative-look-foldout creative-look-foldout--collapsed"
3281                  >
3282                    <div class="creative-look-foldout-body">
3283                      <div class="slider-line slider-line--toggle-only">
3284                        <span data-tooltip="Project the selected gobo pattern from the key light">Gobo</span>
3285                        <label class="effect-toggle">
3286                          <input type="checkbox" id="goboEnabled" />
3287                          <span class="effect-indicator" aria-hidden="true"></span>
3288                          <span class="sr-only">Enable gobo projection</span>
3289                        </label>
3290                      </div>
3291                      <div class="hdri-grid" id="goboGrid">
3292                        <button
3293                          type="button"
3294                          data-gobo="palm"
3295                          class="hdri-icon active"
3296                          data-tooltip="Palm leaf gobo — dappled foliage shadows"
3297                        >
3298                          <img
3299                            src="./assets/gobos/orby-spotlight-gobo01-palm.jpg"
3300                            alt="Palm gobo"
3301                            width="192"
3302                            height="192"
3303                          />
3304                        </button>
3305                        <button
3306                          type="button"
3307                          data-gobo="leaf"
3308                          class="hdri-icon"
3309                          data-tooltip="Single leaf gobo — soft organic shadow"
3310                        >
3311                          <img
3312                            src="./assets/gobos/orby-spotlight-gobo02-leaf.jpg"
3313                            alt="Leaf gobo"
3314                            width="192"
3315                            height="192"
3316                          />
3317                        </button>
3318                        <button
3319                          type="button"
3320                          data-gobo="tree"
3321                          class="hdri-icon"
3322                          data-tooltip="Tree canopy gobo — broad branching shadows"
3323                        >
3324                          <img
3325                            src="./assets/gobos/orby-spotlight-gobo03-tree.jpg"
3326                            alt="Tree gobo"
3327                            width="192"
3328                            height="192"
3329                          />
3330                        </button>
3331                      </div>
3332                      <label class="slider-line">
3333                        <span data-tooltip="Blur the gobo mask. Independent from cast-shadow softness — tune per texture.">Softness</span>
3334                        <input
3335                          id="goboSoftness"
3336                          type="range"
3337                          min="0"
3338                          max="4"
3339                          step="0.05"
3340                          value="0.3"
3341                        />
3342                        <span class="value" data-output="goboSoftness">0.30</span>
3343                      </label>
3344                      <label class="select-line">
3345                        <span data-tooltip="Gobo penumbra sample count — raise for cinematic stills (Ultra = 49-tap separable blur).">Softness quality</span>
3346                        <select id="goboSoftnessQuality" aria-label="Gobo softness quality">
3347                          <option value="low">Low</option>
3348                          <option value="medium" selected>Medium</option>
3349                          <option value="high">High</option>
3350                          <option value="ultra">Ultra</option>
3351                        </select>
3352                      </label>
3353                      <label class="slider-line">
3354                        <span data-tooltip="Pattern size (0–10). Higher = smaller pattern. 5 matches the former 0.50 setting.">Scale</span>
3355                        <input
3356                          id="goboScale"
3357                          type="range"
3358                          min="0"
3359                          max="10"
3360                          step="0.05"
3361                          value="5"
3362                        />
3363                        <span class="value" data-output="goboScale">5.00</span>
3364                      </label>
3365                      <label class="slider-line">
3366                        <span data-tooltip="Rotate the projected pattern around its center">Rotation</span>
3367                        <input
3368                          id="goboRotation"
3369                          type="range"
3370                          min="0"
3371                          max="360"
3372                          step="1"
3373                          value="0"
3374                        />
3375                        <span class="value" data-output="goboRotation">0°</span>
3376                      </label>
3377                    </div>
3378                  </div>
3379                  </div>
3380                </div>
3381
3382                <div class="panel-block-divider"></div>
3383
3384                <!-- Fill Light -->
3385                <div class="subsection" data-subsection="fillLight">
3386                  <div class="block-title has-toggle has-reset">
3387                    <span>Fill</span>
3388                    <div style="display: flex; align-items: center; gap: 0.5rem;">
3389                      <button class="block-reset-btn" data-reset="fillLight" aria-label="Reset Fill Light" data-tooltip="Reset Fill Light settings">
3390                        <i class="fa-solid fa-rotate-left"></i>
3391                        <span class="sr-only">Reset</span>
3392                      </button>
3393                      <label class="effect-toggle" data-tooltip="Enable/disable Fill Light (soft fill)">
3394                        <input type="checkbox" id="fillLightEnabled" />
3395                        <span class="effect-indicator" aria-hidden="true"></span>
3396                        <span class="sr-only">Enable Fill Light</span>
3397                      </label>
3398                    </div>
3399                  </div>
3400                  <div
3401                    class="effect-foldout effect-foldout--collapsed"
3402                    data-effect-foldout="fill-light"
3403                    aria-hidden="true"
3404                  >
3405                  <label class="color-line light-color-row" data-light="fill">
3406                    <span>Color</span>
3407                    <input type="color" id="fillLightColor" name="fillLightColor" class="color-chip light-chip" value="#b0c7ff" />
3408                </label>
3409                <label class="slider-line">
3410                  <span>Intensity</span>
3411                  <input
3412                      id="fillLightStrength"
3413                    type="range"
3414                    min="0"
3415                    max="5"
3416                    step="0.01"
3417                      value="0.8"
3418                  />
3419                    <span class="value" data-output="fillLightStrength">0.80</span>
3420                </label>
3421                <label class="slider-line">
3422                    <span>Height</span>
3423                    <input
3424                      id="fillLightHeight"
3425                      type="range"
3426                      min="0"
3427                      max="10"
3428                      step="0.1"
3429                      value="3"
3430                    />
3431                    <span class="value" data-output="fillLightHeight">3.0</span>
3432                  </label>
3433                  <label class="slider-line">
3434                    <span>Rotate</span>
3435                    <input
3436                      id="fillLightRotate"
3437                      type="range"
3438                      min="0"
3439                      max="360"
3440                      value="0"
3441                      step="1"
3442                    />
3443                    <span class="value" data-output="fillLightRotate">0°</span>
3444                  </label>
3445                  <div class="slider-line">
3446                    <span>Cast Shadows</span>
3447                  <label class="effect-toggle">
3448                      <input type="checkbox" id="fillLightCastShadows" />
3449                    <span class="effect-indicator" aria-hidden="true"></span>
3450                      <span class="sr-only">Cast shadows</span>
3451                  </label>
3452                </div>
3453                  </div>
3454                </div>
3455
3456                <div class="panel-block-divider"></div>
3457
3458                <!-- Rim Light -->
3459                <div class="subsection" data-subsection="rimLight">
3460                  <div class="block-title has-toggle has-reset">
3461                    <span>Rim</span>
3462                    <div style="display: flex; align-items: center; gap: 0.5rem;">
3463                      <button class="block-reset-btn" data-reset="rimLight" aria-label="Reset Rim Light" data-tooltip="Reset Rim Light settings">
3464                        <i class="fa-solid fa-rotate-left"></i>
3465                        <span class="sr-only">Reset</span>
3466                      </button>
3467                  <label class="effect-toggle" data-tooltip="Enable/disable Rim Light (edge highlight)">
3468                        <input type="checkbox" id="rimLightEnabled" />
3469                    <span class="effect-indicator" aria-hidden="true"></span>
3470                        <span class="sr-only">Enable Rim Light</span>
3471                  </label>
3472                </div>
3473                  </div>
3474                  <div
3475                    class="effect-foldout effect-foldout--collapsed"
3476                    data-effect-foldout="rim-light"
3477                    aria-hidden="true"
3478                  >
3479                  <label class="color-line light-color-row" data-light="rim">
3480                    <span>Color</span>
3481                    <input type="color" id="rimLightColor" name="rimLightColor" class="color-chip light-chip" value="#a0eaf9" />
3482                  </label>
3483                <label class="slider-line">
3484                    <span>Intensity</span>
3485                  <input
3486                      id="rimLightStrength"
3487                      type="range"
3488                      min="0"
3489                      max="5"
3490                      step="0.01"
3491                      value="0.96"
3492                    />
3493                    <span class="value" data-output="rimLightStrength">0.96</span>
3494                  </label>
3495                  <label class="slider-line">
3496                    <span>Height</span>
3497                    <input
3498                      id="rimLightHeight"
3499                      type="range"
3500                      min="0"
3501                      max="10"
3502                      step="0.1"
3503                      value="4"
3504                    />
3505                    <span class="value" data-output="rimLightHeight">4.0</span>
3506                  </label>
3507                  <label class="slider-line">
3508                    <span>Rotate</span>
3509                    <input
3510                      id="rimLightRotate"
3511                    type="range"
3512                    min="0"
3513                    max="360"
3514                    value="0"
3515                    step="1"
3516                  />
3517                    <span class="value" data-output="rimLightRotate">0°</span>
3518                  </label>
3519                  <div class="slider-line">
3520                    <span>Cast Shadows</span>
3521                    <label class="effect-toggle">
3522                      <input type="checkbox" id="rimLightCastShadows" />
3523                      <span class="effect-indicator" aria-hidden="true"></span>
3524                      <span class="sr-only">Cast shadows</span>
3525                    </label>
3526                </div>
3527                  </div>
3528              </div>
3529
3530                <div class="panel-block-divider"></div>
3531
3532                <!-- Ambient Light -->
3533                <div class="subsection" data-subsection="ambientLight">
3534                  <div class="block-title has-toggle has-reset">
3535                    <span>Ambient</span>
3536                    <div style="display: flex; align-items: center; gap: 0.5rem;">
3537                      <button class="block-reset-btn" data-reset="ambientLight" aria-label="Reset Ambient Light" data-tooltip="Reset Ambient Light settings">
3538                        <i class="fa-solid fa-rotate-left"></i>
3539                        <span class="sr-only">Reset</span>
3540              </button>
3541                      <label class="effect-toggle" data-tooltip="Enable/disable Ambient Light (global illumination)">
3542                        <input type="checkbox" id="ambientLightEnabled" />
3543                        <span class="effect-indicator" aria-hidden="true"></span>
3544                        <span class="sr-only">Enable Ambient Light</span>
3545                      </label>
3546                    </div>
3547                  </div>
3548                  <div
3549                    class="effect-foldout effect-foldout--collapsed"
3550                    data-effect-foldout="ambient-light"
3551                    aria-hidden="true"
3552                  >
3553                  <label class="color-line light-color-row" data-light="ambient">
3554                    <span>Color</span>
3555                    <input type="color" id="ambientLightColor" name="ambientLightColor" class="color-chip light-chip" value="#7c8ca6" />
3556                  </label>
3557                  <label class="slider-line">
3558                    <span>Intensity</span>
3559                    <input
3560                      id="ambientLightStrength"
3561                      type="range"
3562                      min="0"
3563                      max="5"
3564                      step="0.01"
3565                      value="0.48"
3566                    />
3567                    <span class="value" data-output="ambientLightStrength">0.48</span>
3568                  </label>
3569                  </div>
3570                </div>
3571
3572                <div class="panel-block-divider"></div>
3573                <div class="subsection" data-subsection="lightsShadows">
3574                  <div class="block-title has-toggle has-reset">
3575                    <span>Shadows</span>
3576                    <div style="display: flex; align-items: center; gap: 0.5rem;">
3577                      <button class="block-reset-btn" data-reset="lights-shadows" aria-label="Reset Shadows" data-tooltip="Reset shadow settings">
3578                        <i class="fa-solid fa-rotate-left"></i>
3579                        <span class="sr-only">Reset</span>
3580                      </button>
3581                      <label class="effect-toggle" data-tooltip="Enable/disable shadow casting from 3-point lights">
3582                        <input type="checkbox" id="lightsCastShadows" />
3583                        <span class="effect-indicator" aria-hidden="true"></span>
3584                        <span class="sr-only">Enable shadows</span>
3585                      </label>
3586                    </div>
3587                  </div>
3588                  <div
3589                    class="effect-foldout effect-foldout--collapsed effect-foldout--md"
3590                    data-effect-foldout="lights-shadows"
3591                    aria-hidden="true"
3592                  >
3593                  <label class="select-line">
3594                    <span data-tooltip="Shadow map resolution for 3-point lights">Quality</span>
3595                    <select id="lightsShadowQuality" aria-label="Shadow quality">
3596                      <option value="low">Low</option>
3597                      <option value="medium" selected>Medium</option>
3598                      <option value="high">High</option>
3599                      <option value="ultra">Ultra</option>
3600                    </select>
3601                  </label>
3602                  <label class="color-line">
3603                    <span data-tooltip="Color of shadowed areas. Black gives the darkest shadows.">Shadow Color</span>
3604                    <input type="color" id="lightsShadowColor" class="color-chip" value="#080808" />
3605                  </label>
3606                  <label class="slider-line">
3607                    <span data-tooltip="0 = harder shadow edge. Higher values = softer penumbra.">Softness</span>
3608                    <input
3609                      id="lightsShadowSoftness"
3610                      type="range"
3611                      min="0"
3612                      max="4"
3613                      step="0.05"
3614                      value="0.6"
3615                    />
3616                    <span class="value" data-output="lightsShadowSoftness">0.6</span>
3617                  </label>
3618                  <label class="slider-line">
3619                    <span data-tooltip="How strong the shadow tint is. Lower for softer, less solid shadows.">Opacity</span>
3620                    <input
3621                      id="lightsShadowOpacity"
3622                      type="range"
3623                      min="0"
3624                      max="1"
3625                      step="0.01"
3626                      value="0.25"
3627                    />
3628                    <span class="value" data-output="lightsShadowOpacity">0.25</span>
3629                  </label>
3630                  <label class="slider-line">
3631                    <span data-tooltip="Cast-shadow contact only — does not fix bright leaks on side faces (use Hard Edge Angle under 3D Shape). Negative pulls shadows onto surfaces.">Cast Shadow Offset</span>
3632                    <input
3633                      id="lightsShadowContactOffset"
3634                      type="range"
3635                      min="-0.002"
3636                      max="0.0005"
3637                      step="0.00001"
3638                      value="-0.0005"
3639                    />
3640                    <span class="value" data-output="lightsShadowContactOffset">-0.0005</span>
3641                  </label>
3642                  <label class="slider-line">
3643                    <span data-tooltip="Offsets shadow-map comparison along surface normals — reduces cast-shadow acne and terminator gaps on receiving surfaces.">Normal Bias</span>
3644                    <input
3645                      id="lightsShadowNormalBias"
3646                      type="range"
3647                      min="0"
3648                      max="0.08"
3649                      step="0.001"
3650                      value="0.010"
3651                    />
3652                    <span class="value" data-output="lightsShadowNormalBias">0.010</span>
3653                  </label>
3654                  <div class="slider-line">
3655                    <span data-tooltip="Lets both faces of a mesh receive cast shadows. Good for thin cards and foliage, and for extruded typography (inner strokes, back faces).">Two-Sided Cast</span>
3656                    <label class="effect-toggle">
3657                      <input type="checkbox" id="lightsShadowTwoSided" />
3658                      <span class="effect-indicator" aria-hidden="true"></span>
3659                      <span class="sr-only">Enable two-sided shadow casting</span>
3660                    </label>
3661                    <span class="value" aria-hidden="true"></span>
3662                  </div>
3663                  </div>
3664                </div>
3665                </div>
3666              </div>
3667
3668              <div class="panel-block">
3669                <div class="block-title">Scene</div>
3670                <div class="scene-controls">
3671                  <button id="resetStudioSettings" class="accent-action-btn" data-tooltip="Reset all studio settings to defaults">
3672                    <i class="fa-solid fa-rotate-left"></i>
3673                    Reset Studio
3674                  </button>
3675                  <button class="reset-scene accent-action-btn" data-tooltip="Clear the workspace and restore a blank canvas">
3676                    <i class="fa-solid fa-arrow-left"></i>
3677                    Reset Scene
3678                  </button>
3679                  <button class="copy-scene-settings accent-action-btn" data-tooltip="Copy all scene settings to clipboard">
3680                    <i class="fa-solid fa-copy"></i>
3681                    Copy Scene Settings
3682                  </button>
3683                  <button class="load-scene-settings accent-action-btn" data-tooltip="Paste scene settings from clipboard into a dialog">
3684                    <i class="fa-solid fa-upload"></i>
3685                    Paste Scene Settings
3686                  </button>
3687                  <button class="save-orby-scene accent-action-btn" data-tooltip="Save entire scene and model as .orby file">
3688                    <i class="fa-solid fa-floppy-disk"></i>
3689                    Save .orby Scene
3690                  </button>
3691                  <button class="load-orby-scene accent-action-btn" data-tooltip="Load entire scene and model from .orby file">
3692                    <i class="fa-solid fa-file-import"></i>
3693                    Load .orby Scene
3694                  </button>
3695                </div>
3696              </div>
3697              <div class="info-version-tag">v0.5.1052 · 2026-10-02 19:44:45 UTC</div>
3698              <button type="button" class="info-orby-mark" data-tooltip="Home" aria-label="Home">
3699                <img src="./assets/images/favicon.svg" width="28" height="28" alt="" />
3700              </button>
3701            </section>
3702
3703            <h2 class="panel-header-title" data-header="render">Camera</h2>
3704            <section class="panel" data-panel="render">
3705
3706              <div class="panel-block">
3707                <div class="subsection">
3708                <div class="block-title has-reset">
3709                  <span>Basic</span>
3710                    <button class="block-reset-btn" data-reset="camera" aria-label="Reset Camera" data-tooltip="Reset Camera settings">
3711                      <i class="fa-solid fa-rotate-left"></i>
3712                      <span class="sr-only">Reset</span>
3713                    </button>
3714                </div>
3715                <label class="slider-line">
3716                  <span data-tooltip="Camera roll — rotate the frame around the view axis (Dutch angle)">Roll</span>
3717                  <input
3718                    id="cameraTilt"
3719                    type="range"
3720                    min="-45"
3721                    max="45"
3722                    value="0"
3723                    step="1"
3724                  />
3725                  <span class="value" data-output="cameraTilt">0°</span>
3726                </label>
3727                <label class="slider-line">
3728                  <span data-tooltip="Camera world position along X axis">Position X</span>
3729                  <input
3730                    id="cameraPosX"
3731                    type="range"
3732                    min="-20"
3733                    max="20"
3734                    value="0"
3735                    step="0.01"
3736                  />
3737                  <span class="value" data-output="cameraPosX">0.00m</span>
3738                </label>
3739                <label class="slider-line">
3740                  <span data-tooltip="Camera world position along Y axis">Position Y</span>
3741                  <input
3742                    id="cameraPosY"
3743                    type="range"
3744                    min="-20"
3745                    max="20"
3746                    value="1.5"
3747                    step="0.01"
3748                  />
3749                  <span class="value" data-output="cameraPosY">1.50m</span>
3750                </label>
3751                <label class="slider-line">
3752                  <span data-tooltip="Camera world position along Z axis">Position Z</span>
3753                  <input
3754                    id="cameraPosZ"
3755                    type="range"
3756                    min="-20"
3757                    max="20"
3758                    value="6"
3759                    step="0.01"
3760                  />
3761                  <span class="value" data-output="cameraPosZ">6.00m</span>
3762                </label>
3763                <label class="slider-line">
3764                  <span data-tooltip="Distance from camera to orbit target">Distance</span>
3765                  <input
3766                    id="cameraDistance"
3767                    type="range"
3768                    min="0.5"
3769                    max="50"
3770                    value="6.02"
3771                    step="0.01"
3772                  />
3773                  <span class="value" data-output="cameraDistance">6.02m</span>
3774                </label>
3775                <div
3776                  class="effect-foldout effect-foldout--expanded"
3777                  data-effect-foldout="manual-exposure"
3778                  aria-hidden="false"
3779                >
3780                <label class="slider-line">
3781                  <span data-tooltip="Overall scene brightness">Exposure</span>
3782                  <input
3783                    id="exposure"
3784                    type="range"
3785                    min="0"
3786                    max="2"
3787                    value="1.0"
3788                    step="0.01"
3789                  />
3790                  <span class="value" data-output="exposure">1.00</span>
3791                </label>
3792                </div>
3793                <div class="slider-line">
3794                  <span>Auto Exposure</span>
3795                  <label class="effect-toggle" data-tooltip="Automatically adjust exposure for optimal brightness">
3796                    <input type="checkbox" id="autoExposure" />
3797                    <span class="effect-indicator" aria-hidden="true"></span>
3798                    <span class="sr-only">Enable auto exposure</span>
3799                  </label>
3800                </div>
3801                <div class="slider-line">
3802                  <span>Manual Render Distance</span>
3803                  <label class="effect-toggle" data-tooltip="Rare override — set near/far manually for telephoto or isometric shots when AO banding appears on the backdrop">
3804                    <input type="checkbox" id="manualClipPlanes" />
3805                    <span class="effect-indicator" aria-hidden="true"></span>
3806                    <span class="sr-only">Enable manual render distance</span>
3807                  </label>
3808                </div>
3809                <div
3810                  id="clipPlanesFoldout"
3811                  class="clip-planes-foldout clip-planes-foldout--collapsed"
3812                  aria-hidden="true"
3813                >
3814                <label class="slider-line">
3815                  <span data-tooltip="Near clip plane — geometry closer than this is not rendered">Near Clip</span>
3816                  <input
3817                    id="cameraClipNear"
3818                    type="range"
3819                    min="0.01"
3820                    max="50"
3821                    value="0.1"
3822                    step="0.01"
3823                  />
3824                  <span class="value" data-output="cameraClipNear">0.10</span>
3825                </label>
3826                <label class="slider-line">
3827                  <span data-tooltip="Far clip plane — geometry farther than this is not rendered">Far Clip</span>
3828                  <input
3829                    id="cameraClipFar"
3830                    type="range"
3831                    min="1"
3832                    max="500"
3833                    value="100"
3834                    step="0.5"
3835                  />
3836                  <span class="value" data-output="cameraClipFar">100</span>
3837                </label>
3838                </div>
3839                <div class="panel-block-divider"></div>
3840                <div class="subsection" data-subsection="view-presets">
3841                  <div class="block-title">View Presets</div>
3842                  <div
3843                    class="view-preset-grid"
3844                    role="group"
3845                    aria-label="View presets"
3846                  >
3847                    <button type="button" class="lens-preset-btn" data-view-preset="front" aria-pressed="false">
3848                      <span class="lens-preset-btn__focal">Front</span>
3849                    </button>
3850                    <button type="button" class="lens-preset-btn" data-view-preset="left" aria-pressed="false">
3851                      <span class="lens-preset-btn__focal">Left</span>
3852                    </button>
3853                    <button type="button" class="lens-preset-btn" data-view-preset="right" aria-pressed="false">
3854                      <span class="lens-preset-btn__focal">Right</span>
3855                    </button>
3856                    <button type="button" class="lens-preset-btn" data-view-preset="top" aria-pressed="false">
3857                      <span class="lens-preset-btn__focal">Top</span>
3858                    </button>
3859                  </div>
3860                </div>
3861                <div class="panel-block-divider"></div>
3862                <div class="subsection" data-subsection="lens">
3863                  <div class="block-title has-reset">
3864                    <span>Lens</span>
3865                    <button
3866                      class="block-reset-btn"
3867                      data-reset="lens"
3868                      aria-label="Reset Lens"
3869                      data-tooltip="Reset Lens settings"
3870                    >
3871                      <i class="fa-solid fa-rotate-left"></i>
3872                      <span class="sr-only">Reset</span>
3873                    </button>
3874                  </div>
3875                  <div
3876                    class="lens-preset-grid"
3877                    role="group"
3878                    aria-label="Focal length presets"
3879                  >
3880                    <button type="button" class="lens-preset-btn" data-lens-focal="14" aria-pressed="false">
3881                      <span class="lens-preset-btn__focal">14mm</span>
3882                      <span class="lens-preset-btn__label">Ultra wide</span>
3883                    </button>
3884                    <button type="button" class="lens-preset-btn" data-lens-focal="24" aria-pressed="false">
3885                      <span class="lens-preset-btn__focal">24mm</span>
3886                      <span class="lens-preset-btn__label">Wide</span>
3887                    </button>
3888                    <button type="button" class="lens-preset-btn" data-lens-focal="35" aria-pressed="false">
3889                      <span class="lens-preset-btn__focal">35mm</span>
3890                      <span class="lens-preset-btn__label">Wide</span>
3891                    </button>
3892                    <button type="button" class="lens-preset-btn" data-lens-focal="50" aria-pressed="false">
3893                      <span class="lens-preset-btn__focal">50mm</span>
3894                      <span class="lens-preset-btn__label">Standard</span>
3895                    </button>
3896                    <button type="button" class="lens-preset-btn" data-lens-focal="85" aria-pressed="false">
3897                      <span class="lens-preset-btn__focal">85mm</span>
3898                      <span class="lens-preset-btn__label">Portrait</span>
3899                    </button>
3900                    <button type="button" class="lens-preset-btn" data-lens-focal="100" aria-pressed="false">
3901                      <span class="lens-preset-btn__focal">100mm</span>
3902                      <span class="lens-preset-btn__label">Macro</span>
3903                    </button>
3904                    <button type="button" class="lens-preset-btn" data-lens-focal="135" aria-pressed="false">
3905                      <span class="lens-preset-btn__focal">135mm</span>
3906                      <span class="lens-preset-btn__label">Tele</span>
3907                    </button>
3908                    <button type="button" class="lens-preset-btn" data-lens-focal="200" aria-pressed="false">
3909                      <span class="lens-preset-btn__focal">200mm</span>
3910                      <span class="lens-preset-btn__label">Tele</span>
3911                    </button>
3912                  </div>
3913                  <label class="select-line">
3914                    <span data-tooltip="Sensor size used to convert focal length to field of view">Sensor</span>
3915                    <select id="lensSensor" aria-label="Camera sensor format">
3916                      <option value="full-frame">Full frame (36mm)</option>
3917                      <option value="aps-c" selected>APS-C (23.5mm)</option>
3918                      <option value="m43">Micro Four Thirds (17.3mm)</option>
3919                      <option value="super-35">Super 35 (24.9mm)</option>
3920                    </select>
3921                  </label>
3922                  <label class="slider-line">
3923                    <span data-tooltip="Vertical field of view — fine-tune after choosing a focal length preset">Manual FOV</span>
3924                    <input
3925                      id="cameraFov"
3926                      type="range"
3927                      min="2"
3928                      max="120"
3929                      value="45"
3930                      step="0.1"
3931                    />
3932                    <span class="value" data-output="cameraFov">45°</span>
3933                  </label>
3934                </div>
3935                <div class="panel-block-divider"></div>
3936                <div class="subsection" data-subsection="isometric">
3937                  <div class="block-title has-toggle has-reset">
3938                    <span data-tooltip="RTS isometric view — locks orbit; pan optional via Unlock. Zoom and focal length still work. Roll and fisheye are disabled until turned off.">Isometric Camera</span>
3939                    <div style="display: flex; align-items: center; gap: 0.5rem;">
3940                      <button
3941                        class="block-reset-btn"
3942                        data-reset="isometric"
3943                        aria-label="Reset Isometric Camera"
3944                        data-tooltip="Reset Isometric Camera settings"
3945                      >
3946                        <i class="fa-solid fa-rotate-left"></i>
3947                        <span class="sr-only">Reset</span>
3948                      </button>
3949                      <label class="effect-toggle" data-tooltip="Enable isometric camera (orbit/pan locked; focal length still adjustable)">
3950                        <input type="checkbox" id="isometricEnabled" />
3951                        <span class="effect-indicator" aria-hidden="true"></span>
3952                        <span class="sr-only">Enable isometric camera</span>
3953                      </label>
3954                    </div>
3955                  </div>
3956                  <div
3957                    class="effect-foldout effect-foldout--collapsed effect-foldout--md"
3958                    data-effect-foldout="isometric"
3959                    aria-hidden="true"
3960                  >
3961                  <div
3962                    class="iso-controls-stack"
3963                    role="group"
3964                    aria-label="Isometric Camera presets"
3965                  >
3966                    <div class="iso-preset-grid">
3967                    <button type="button" class="iso-preset-btn" data-iso-preset="true-isometric" aria-pressed="false">
3968                      <span class="iso-preset-btn__title">True iso</span>
3969                      <span class="iso-preset-btn__subtitle">45° / 35.26°</span>
3970                    </button>
3971                    <button type="button" class="iso-preset-btn" data-iso-preset="dimetric" aria-pressed="false">
3972                      <span class="iso-preset-btn__title">Dimetric</span>
3973                      <span class="iso-preset-btn__subtitle">45° / 30° — RTS</span>
3974                    </button>
3975                    <button type="button" class="iso-preset-btn" data-iso-preset="high-oblique" aria-pressed="false">
3976                      <span class="iso-preset-btn__title">High Oblique</span>
3977                      <span class="iso-preset-btn__subtitle">45° / 60° — City Builder</span>
3978                    </button>
3979                    <button type="button" class="iso-preset-btn" data-iso-preset="pixel-2-1" aria-pressed="false">
3980                      <span class="iso-preset-btn__title">2:1 pixel</span>
3981                      <span class="iso-preset-btn__subtitle">Pixel-perfect</span>
3982                    </button>
3983                    </div>
3984                    <div class="iso-action-row">
3985                    <button
3986                      id="isoOrbitStep"
3987                      class="ghost-btn small"
3988                      type="button"
3989                      data-tooltip="Rotate the isometric camera 45° around the model (repeats)"
3990                    >
3991                      Rotate camera 45
3992                    </button>
3993                    <button
3994                      id="isoAssetRotateStep"
3995                      class="ghost-btn small"
3996                      type="button"
3997                      data-tooltip="Rotate the asset 45° on Y — shortcut for Object → Rotate Y when batching isometric renders"
3998                    >
3999                      Rotate asset 45
4000                    </button>
4001                  </div>
4002                  </div>
4003                  <button
4004                    id="isoPanUnlock"
4005                    class="ghost-btn small"
4006                    type="button"
4007                    aria-pressed="false"
4008                    data-tooltip="Allow right-drag to pan the orbit target while isometric angles stay locked"
4009                  >
4010                    Unlock Camera Pan
4011                  </button>
4012                  </div>
4013                </div>
4014                <div class="panel-block-divider"></div>
4015                <div class="subsection" data-subsection="fisheye">
4016                  <div class="block-title has-toggle">
4017                    <span data-tooltip="Post-process barrel / fisheye (Giliam de Carpentier). Renders after full grading stack.">Fisheye Lens</span>
4018                    <div style="display: flex; align-items: center; gap: 0.5rem;">
4019                      <button
4020                        type="button"
4021                        class="block-reset-btn"
4022                        data-reset="fisheye"
4023                        aria-label="Reset Fisheye Lens"
4024                        data-tooltip="Reset Fisheye Lens to defaults"
4025                      >
4026                        <i class="fa-solid fa-rotate-left"></i>
4027                        <span class="sr-only">Reset</span>
4028                      </button>
4029                      <label class="effect-toggle" data-tooltip="Enable lens distortion (uses Horizontal + strength + cylindrical ratio)">
4030                        <input type="checkbox" id="fisheyeEnabled" />
4031                        <span class="effect-indicator" aria-hidden="true"></span>
4032                        <span class="sr-only">Enable Fisheye Lens</span>
4033                      </label>
4034                    </div>
4035                  </div>
4036                  <div
4037                    class="effect-foldout effect-foldout--collapsed"
4038                    data-effect-foldout="fisheye"
4039                    aria-hidden="true"
4040                  >
4041                  <label class="slider-line">
4042                    <span data-tooltip="Target horizontal field of view; vertical FOV is derived so the shader matches the projection (avoids black edges)">
4042Horizontal</span>
4043                    <input
4044                      id="fisheyeHorizontalFOV"
4045                      type="range"
4046                      min="5"
4047                      max="160"
4048                      value="131"
4049                      step="1"
4050                    />
4051                    <span class="value" data-output="fisheyeHorizontalFOV">131°</span>
4052                  </label>
4053                  <label class="slider-line">
4054                    <span data-tooltip="0 = no distortion, 1 = full stereographic-style remapping">Strength</span>
4055                    <input
4056                      id="fisheyeStrength"
4057                      type="range"
4058                      min="0"
4059                      max="1"
4060                      value="0.37"
4061                      step="0.01"
4062                    />
4063                    <span class="value" data-output="fisheyeStrength">0.37</span>
4064                  </label>
4065                  <label class="slider-line">
4066                    <span data-tooltip="1 = spherical; higher bends verticals less (anamorphic-like)">Cylindrical</span>
4067                    <input
4068                      id="fisheyeCylindricalRatio"
4069                      type="range"
4070                      min="0.25"
4071                      max="4"
4072                      value="4"
4073                      step="0.025"
4074                    />
4075                    <span class="value" data-output="fisheyeCylindricalRatio">4.00</span>
4076                  </label>
4077                  </div>
4078                </div>
4079                <div class="panel-block-divider"></div>
4080                <div class="subsection" data-subsection="auto-orbit">
4081                  <div class="block-title">Auto Orbit</div>
4082                  <div class="segmented compact">
4083                    <label>
4084                      <input type="radio" name="cameraAutoOrbit" value="off" checked />
4085                      OFF
4086                    </label>
4087                    <label>
4088                      <input type="radio" name="cameraAutoOrbit" value="slow" />
4089                      SLOW
4090                    </label>
4091                    <label>
4092                      <input type="radio" name="cameraAutoOrbit" value="fast" />
4093                      FAST
4094                    </label>
4095                  </div>
4096                </div>
4097                <div class="panel-block-divider"></div>
4098                <div class="subsection" data-subsection="handheld">
4099                  <div class="block-title" data-tooltip="Procedural shake on top of orbit; does not affect controls. Not visible in PNG exports.">Handheld</div>
4100                  <div class="segmented compact">
4101                    <label>
4102                      <input type="radio" name="cameraHandheld" value="off" checked />
4103                      OFF
4104                    </label>
4105                    <label>
4106                      <input type="radio" name="cameraHandheld" value="low" />
4107                      SUBTLE
4108                    </label>
4109                    <label>
4110                      <input type="radio" name="cameraHandheld" value="high" />
4111                      STRONG
4112                    </label>
4113                  </div>
4114                </div>
4115                </div>
4116              </div>
4117
4118              <div class="panel-block">
4119                <div class="subsection" data-subsection="color-tone">
4120                  <div class="block-title has-reset">
4121                    <span>Color & Tone</span>
4122                    <button class="block-reset-btn" data-reset="color-correction" aria-label="Reset Color & Tone" data-tooltip="Reset Color & Tone settings">
4123                      <i class="fa-solid fa-rotate-left"></i>
4124                      <span class="sr-only">Reset</span>
4125                    </button>
4126                  </div>
4127                <label class="slider-line slider-line--temperature">
4128                  <span>Temperature</span>
4129                  <input
4130                    id="cameraTemperature"
4131                    type="range"
4132                    min="2000"
4133                    max="10000"
4134                    value="6000"
4135                    step="50"
4136                  />
4137                  <span class="value" data-output="cameraTemperature">6000K</span>
4138                </label>
4139                <label class="slider-line slider-line--tint">
4140                  <span>Tint</span>
4141                  <input
4142                    id="cameraTint"
4143                    type="range"
4144                    min="-100"
4145                    max="100"
4146                    value="0"
4147                    step="1"
4148                  />
4149                  <span class="value" data-output="cameraTint">0</span>
4150                </label>
4151                <label class="slider-line slider-line--saturation">
4152                  <span>Saturation</span>
4153                  <input
4154                    id="cameraSaturation"
4155                    type="range"
4156                    min="0"
4157                    max="2"
4158                    value="1.0"
4159                    step="0.01"
4160                  />
4161                  <span class="value" data-output="cameraSaturation">1.00</span>
4162                </label>
4163                <label class="slider-line">
4164                  <span>Contrast</span>
4165                  <input
4166                    id="cameraContrast"
4167                    type="range"
4168                    min="0"
4169                    max="2"
4170                    value="1.0"
4171                    step="0.01"
4172                  />
4173                  <span class="value" data-output="cameraContrast">1.00</span>
4174                </label>
4175                <label class="slider-line">
4176                  <span>Highlights</span>
4177                  <input
4178                    id="cameraHighlights"
4179                    type="range"
4180                    min="-100"
4181                    max="100"
4182                    value="0"
4183                    step="1"
4184                  />
4185                  <span class="value" data-output="cameraHighlights">0</span>
4186                </label>
4187                <label class="slider-line">
4188                  <span>Shadows</span>
4189                  <input
4190                    id="cameraShadows"
4191                    type="range"
4192                    min="-50"
4193                    max="50"
4194                    value="0"
4195                    step="1"
4196                  />
4197                    <span class="value" data-output="cameraShadows">0</span>
4198                </label>
4199                <label class="slider-line">
4200                  <span>Clarity</span>
4201                  <input
4202                    id="cameraClarity"
4203                    type="range"
4204                    min="-100"
4205                    max="100"
4206                    value="0"
4207                    step="1"
4208                  />
4209                  <span class="value" data-output="cameraClarity">0</span>
4210                </label>
4211                <label class="slider-line">
4212                  <span>Fade</span>
4213                  <input
4214                    id="cameraFade"
4215                    type="range"
4216                    min="0"
4217                    max="100"
4218                    value="0"
4219                    step="1"
4220                  />
4221                  <span class="value" data-output="cameraFade">0</span>
4222                </label>
4223                <label class="slider-line">
4224                  <span>Sharpness</span>
4225                  <input
4226                    id="cameraSharpness"
4227                    type="range"
4228                    min="0"
4229                    max="100"
4230                    value="0"
4231                    step="1"
4232                  />
4233                  <span class="value" data-output="cameraSharpness">0</span>
4234                </label>
4235                </div>
4236                <div class="panel-block-divider"></div>
4237                <div class="subsection" data-subsection="histogram">
4238                  <div class="block-title has-toggle">
4239                    <span>Histogram</span>
4240                    <label class="effect-toggle" data-tooltip="Show/hide exposure histogram">
4241                      <input type="checkbox" id="histogramEnabled" />
4242                      <span class="effect-indicator" aria-hidden="true"></span>
4243                      <span class="sr-only">Enable Histogram</span>
4244                    </label>
4245                  </div>
4246                  <div id="histogramContainer" class="histogram-container histogram-container--collapsed"></div>
4247                </div>
4248                <div class="panel-block-divider"></div>
4249                <div class="subsection tone-curve-sub" data-subsection="tone-curve">
4250                  <div class="block-title has-toggle has-reset">
4251                    <span>Curve</span>
4252                    <div style="display: flex; align-items: center; gap: 0.5rem;">
4253                      <button
4254                        class="block-reset-btn"
4255                        data-reset="tone-curve"
4256                        aria-label="Reset curve"
4257                        data-tooltip="Reset"
4258                      >
4259                        <i class="fa-solid fa-rotate-left"></i>
4260                        <span class="sr-only">Reset</span>
4261                      </button>
4262                      <label class="effect-toggle" data-tooltip="Show or hide the Tone Curve">
4263                        <input type="checkbox" id="toneCurveOpen" />
4264                        <span class="effect-indicator" aria-hidden="true"></span>
4265                        <span class="sr-only">Show Tone Curve</span>
4266                      </label>
4267                    </div>
4268                  </div>
4269                  <div
4270                    id="toneCurveContainer"
4271                    class="tone-curve-foldout tone-curve-foldout--collapsed"
4272                  >
4273                    <div class="tone-curve-canvas-wrap">
4274                      <canvas
4275                        id="toneCurveCanvas"
4276                        class="tone-curve-canvas"
4277                        width="400"
4278                        height="400"
4279                        aria-label="Tone Curve"
4280                      ></canvas>
4281                    </div>
4282                  </div>
4283                </div>
4284                <div class="panel-block-divider"></div>
4285                <div class="subsection" data-subsection="look-filters">
4286                  <div class="block-title has-toggle">
4287                    <span>Look Filters</span>
4288                    <label class="effect-toggle" data-tooltip="Show Look Filter presets">
4289                      <input type="checkbox" id="lookFilterPresetsOpen" />
4290                      <span class="effect-indicator" aria-hidden="true"></span>
4291                      <span class="sr-only">Show Look Filters</span>
4292                    </label>
4293                  </div>
4294                  <div
4295                    id="lookFilterPresetsContainer"
4296                    class="look-filter-presets-container look-filter-presets-container--collapsed"
4297                  >
4298                    <div class="look-filter-grid" role="list" aria-label="Look Filters">
4299                      <button
4300                        type="button"
4301                        class="look-filter-tile"
4302                        data-look-filter="none"
4303                        role="listitem"
4304                        aria-pressed="false"
4305                      >
4306                        <img
4307                          class="look-filter-tile__thumb"
4308                          data-src="./assets/images/look-filters/none.png"
4309                          alt=""
4310                          width="96"
4311                          height="96"
4312                          decoding="async"
4313                        />
4314                        <span class="look-filter-tile__label">None</span>
4315                      </button>
4316                      <button
4317                        type="button"
4318                        class="look-filter-tile"
4319                        data-look-filter="studio"
4320                        role="listitem"
4321                        aria-pressed="false"
4322                      >
4323                        <img
4324                          class="look-filter-tile__thumb"
4325                          data-src="./assets/images/look-filters/studio.png"
4326                          alt=""
4327                          width="96"
4328                          height="96"
4329                          decoding="async"
4330                        />
4331                        <span class="look-filter-tile__label">Studio</span>
4332                      </button>
4333                      <button
4334                        type="button"
4335                        class="look-filter-tile"
4336                        data-look-filter="noir"
4337                        role="listitem"
4338                        aria-pressed="false"
4339                      >
4340                        <img
4341                          class="look-filter-tile__thumb"
4342                          data-src="./assets/images/look-filters/noir.png"
4343                          alt=""
4344                          width="96"
4345                          height="96"
4346                          decoding="async"
4347                        />
4348                        <span class="look-filter-tile__label">Noir</span>
4349                      </button>
4350                      <button
4351                        type="button"
4352                        class="look-filter-tile"
4353                        data-look-filter="mood"
4354                        role="listitem"
4355                        aria-pressed="false"
4356                      >
4357                        <img
4358                          class="look-filter-tile__thumb"
4359                          data-src="./assets/images/look-filters/mood.png"
4360                          alt=""
4361                          width="96"
4362                          height="96"
4363                          decoding="async"
4364                        />
4365                        <span class="look-filter-tile__label">Mood</span>
4366                      </button>
4367                      <button
4368                        type="button"
4369                        class="look-filter-tile"
4370                        data-look-filter="vintage"
4371                        role="listitem"
4372                        aria-pressed="false"
4373                      >
4374                        <img
4375                          class="look-filter-tile__thumb"
4376                          data-src="./assets/images/look-filters/vintage.png"
4377                          alt=""
4378                          width="96"
4379                          height="96"
4380                          decoding="async"
4381                        />
4382                        <span class="look-filter-tile__label">Vintage</span>
4383                      </button>
4384                      <button
4385                        type="button"
4386                        class="look-filter-tile"
4387                        data-look-filter="cinema"
4388                        role="listitem"
4389                        aria-pressed="false"
4390                      >
4391                        <img
4392                          class="look-filter-tile__thumb"
4393                          data-src="./assets/images/look-filters/cinema.png"
4394                          alt=""
4395                          width="96"
4396                          height="96"
4397                          decoding="async"
4398                        />
4399                        <span class="look-filter-tile__label">Cinema</span>
4400                      </button>
4401                      <button
4402                        type="button"
4403                        class="look-filter-tile"
4404                        data-look-filter="frost"
4405                        role="listitem"
4406                        aria-pressed="false"
4407                      >
4408                        <img
4409                          class="look-filter-tile__thumb"
4410                          data-src="./assets/images/look-filters/frost.png"
4411                          alt=""
4412                          width="96"
4413                          height="96"
4414                          decoding="async"
4415                        />
4416                        <span class="look-filter-tile__label">Frost</span>
4417                      </button>
4418                      <button
4419                        type="button"
4420                        class="look-filter-tile"
4421                        data-look-filter="golden"
4422                        role="listitem"
4423                        aria-pressed="false"
4424                      >
4425                        <img
4426                          class="look-filter-tile__thumb"
4427                          data-src="./assets/images/look-filters/golden.png"
4428                          alt=""
4429                          width="96"
4430                          height="96"
4431                          decoding="async"
4432                        />
4433                        <span class="look-filter-tile__label">Golden</span>
4434                      </button>
4435                      <button
4436                        type="button"
4437                        class="look-filter-tile"
4438                        data-look-filter="dream"
4439                        role="listitem"
4440                        aria-pressed="false"
4441                      >
4442                        <img
4443                          class="look-filter-tile__thumb"
4444                          data-src="./assets/images/look-filters/dream.png"
4445                          alt=""
4446                          width="96"
4447                          height="96"
4448                          decoding="async"
4449                        />
4450                        <span class="look-filter-tile__label">Dream</span>
4451                      </button>
4452                      <button
4453                        type="button"
4454                        class="look-filter-tile"
4455                        data-look-filter="neon"
4456                        role="listitem"
4457                        aria-pressed="false"
4458                      >
4459                        <img
4460                          class="look-filter-tile__thumb"
4461                          data-src="./assets/images/look-filters/neon.png"
4462                          alt=""
4463                          width="96"
4464                          height="96"
4465                          decoding="async"
4466                        />
4467                        <span class="look-filter-tile__label">Neon</span>
4468                      </button>
4469                    </div>
4470                  </div>
4471                </div>
4472                <div class="panel-block-divider"></div>
4473                <div class="subsection" data-subsection="ambient-occlusion">
4474                  <div class="block-title has-toggle">
4475                    <span>Ambient Occlusion</span>
4476                    <div style="display: flex; align-items: center; gap: 0.5rem;">
4477                      <button class="block-reset-btn" data-reset="ambient-occlusion" aria-label="Reset Ambient Occlusion" data-tooltip="Reset ambient occlusion settings">
4478                        <i class="fa-solid fa-rotate-left"></i>
4479                        <span class="sr-only">Reset</span>
4480                      </button>
4481                      <label class="effect-toggle" data-tooltip="Screen-space AO (N8AO). Uses WebGL post-processing; off by default. Turn off Render Quality → Low if this stays disabled there.">
4482                        <input type="checkbox" id="toggleAmbientOcclusion" />
4483                        <span class="effect-indicator" aria-hidden="true"></span>
4484                        <span class="sr-only">Enable Ambient Occlusion</span>
4485                      </label>
4486                    </div>
4487                  </div>
4488                  <div
4489                    class="effect-foldout effect-foldout--collapsed effect-foldout--md"
4490                    data-effect-foldout="ambient-occlusion"
4491                    aria-hidden="true"
4492                  >
4493                  <label class="slider-line">
4494                    <span>Strength</span>
4495                    <input
4496                      id="ambientOcclusionIntensity"
4497                      type="range"
4498                      min="0.25"
4499                      max="20"
4500                      value="3"
4501                      step="0.25"
4502                    />
4503                    <span class="value" data-output="ambientOcclusionIntensity">3.00</span>
4504                  </label>
4505                  <label class="slider-line">
4506                    <span>Radius</span>
4507                    <input
4508                      id="ambientOcclusionRadius"
4509                      type="range"
4510                      min="0.1"
4511                      max="12"
4512                      value="1"
4513                      step="0.05"
4514                    />
4515                    <span class="value" data-output="ambientOcclusionRadius">1.00</span>
4516                  </label>
4517                  <label class="color-line">
4518                    <span>
4518Colour</span>
4519                    <input
4520                      type="color"
4521                      id="ambientOcclusionColor"
4522                      class="color-chip"
4523                      value="#080808"
4524                    />
4525                  </label>
4526                  <label class="select-line">
4527                    <span data-tooltip="Low: half-res buffer + lighter N8AO samples. Medium: half-res + balanced denoise (default). Ultra: full resolution + Ultra N8AO preset.">AO Quality</span>
4528                    <select id="ambientOcclusionQuality" aria-label="Ambient Occlusion quality">
4529                      <option value="low">Low</option>
4530                      <option value="medium" selected>Medium</option>
4531                      <option value="max">Ultra</option>
4532                    </select>
4533                  </label>
4534                  </div>
4535                </div>
4536                <div class="panel-block-divider"></div>
4537                <div class="subsection" data-subsection="dof">
4538                  <div class="block-title has-toggle">
4539                    <span class="block-title-name">
4540                      <span>Depth of Field</span>
4541                      <span class="dev-badge" data-tooltip="This feature is still under development" tabindex="0" role="img" aria-label="This feature is still under development"><i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i></span>
4542                    </span>
4543                    <div style="display: flex; align-items: center; gap: 0.5rem;">
4544                      <button class="block-reset-btn" data-reset="dof" aria-label="Reset Depth of Field" data-tooltip="Reset Depth of Field settings">
4545                        <i class="fa-solid fa-rotate-left"></i>
4546                        <span class="sr-only">Reset</span>
4547                      </button>
4548                      <label class="effect-toggle" data-tooltip="Enable/disable depth of field blur effect">
4549                        <input type="checkbox" id="toggleDof" />
4550                        <span class="effect-indicator" aria-hidden="true"></span>
4551                        <span class="sr-only">Enable Depth of Field</span>
4552                      </label>
4553                    </div>
4554                  </div>
4555                  <div
4556                    class="effect-foldout effect-foldout--collapsed"
4557                    data-effect-foldout="dof"
4558                    aria-hidden="true"
4559                  >
4560                  <label class="select-line">
4561                    <span>Focus mode</span>
4562                    <select id="dofFocusMode" aria-label="Depth of field focus mode" data-tooltip="Auto tracks the screen center on the model. Manual locks focus to the distance slider.">
4563                      <option value="auto" selected>Auto</option>
4564                      <option value="manual">Manual</option>
4565                    </select>
4566                  </label>
4567                  <div class="slider-line slider-line--toggle-only">
4568                    <span class="slider-line-label">Focus plane</span>
4569                    <label
4570                      class="effect-toggle"
4571                      data-tooltip="View-depth focal plane used by the DOF shader (purple = in focus here). If blur seams sit in front of or behind this plane, that is a DOF bug — not wrong slider use."
4572                    >
4573                      <input type="checkbox" id="toggleDofFocusPlane" />
4574                      <span class="effect-indicator" aria-hidden="true"></span>
4575                      <span class="sr-only">Show focus plane</span>
4576                    </label>
4577                  </div>
4578                  <label class="slider-line">
4579                    <span>Focus distance</span>
4580                    <input
4581                      id="dofFocus"
4582                      type="range"
4583                      min="0.1"
4584                      max="10"
4585                      value="1.5"
4586                      step="0.1"
4587                    />
4588                    <span class="value" data-output="dofFocus">1.5m</span>
4589                  </label>
4590                  <label class="slider-line">
4591                    <span data-tooltip="Blur on geometry nearer than the focal plane (nose, front wings). Keep low to avoid artifacts.">Near blur</span>
4592                    <input
4593                      id="dofForegroundBlur"
4594                      type="range"
4595                      min="0"
4596                      max="2"
4597                      value="1"
4598                      step="0.05"
4599                    />
4600                    <span class="value" data-output="dofForegroundBlur">1.00</span>
4601                  </label>
4602                  <label class="slider-line">
4603                    <span data-tooltip="Blur on geometry farther than the focal plane (rear wings, background).">Far blur</span>
4604                    <input
4605                      id="dofBackgroundBlur"
4606                      type="range"
4607                      min="0"
4608                      max="2"
4609                      value="1"
4610                      step="0.05"
4611                    />
4612                    <span class="value" data-output="dofBackgroundBlur">1.00</span>
4613                  </label>
4614                  <label class="slider-line">
4615                    <span data-tooltip="Lens aperture — lower f-stop values yield a shallower depth of field.">F-stop</span>
4616                    <input
4617                      id="dofAperture"
4618                      type="range"
4619                      min="0.001"
4620                      max="0.01"
4621                      value="0.003"
4622                      step="0.0001"
4623                    />
4624                    <span class="value" data-output="dofAperture">f/4</span>
4625                  </label>
4626                  <div class="slider-line slider-line--toggle-only">
4627                    <span class="slider-line-label">Compensate zoom</span>
4628                    <label
4629                      class="effect-toggle"
4630                      data-tooltip="Reduce depth of field when the camera pulls back to a wide framing."
4631                    >
4632                      <input type="checkbox" id="toggleDofZoomAttenuation" checked />
4633                      <span class="effect-indicator" aria-hidden="true"></span>
4634                      <span class="sr-only">Compensate zoom</span>
4635                    </label>
4636                  </div>
4637                  <label class="select-line">
4638                    <span>Quality</span>
4639                    <select id="dofQuality" aria-label="Depth of field quality" data-tooltip="Martins Upitis bokeh (three.js dof2). Quality sets ring × sample count — High matches the official example defaults.">
4640                      <option value="low">Low</option>
4641                      <option value="medium">Medium</option>
4642                      <option value="high" selected>High</option>
4643                      <option value="ultra">Ultra</option>
4644                    </select>
4645                  </label>
4646                  </div>
4647                </div>
4648                <div class="panel-block-divider"></div>
4649                <div class="subsection" data-subsection="bloom">
4650                  <div class="block-title has-toggle">
4651                    <span>Bloom</span>
4652                    <div style="display: flex; align-items: center; gap: 0.5rem;">
4653                      <button class="block-reset-btn" data-reset="bloom" aria-label="Reset Bloom" data-tooltip="Reset Bloom settings">
4654                        <i class="fa-solid fa-rotate-left"></i>
4655                        <span class="sr-only">Reset</span>
4656                      </button>
4657                      <label class="effect-toggle" data-tooltip="Enable/disable bloom glow effect">
4658                        <input type="checkbox" id="toggleBloom" checked />
4659                        <span class="effect-indicator" aria-hidden="true"></span>
4660                        <span class="sr-only">Enable Bloom</span>
4661                      </label>
4662                    </div>
4663                  </div>
4664                  <div
4665                    class="effect-foldout effect-foldout--expanded effect-foldout--md"
4666                    data-effect-foldout="bloom"
4667                    aria-hidden="false"
4668                  >
4669                  <label class="slider-line">
4670                    <span>Threshold</span>
4671                    <input
4672                      id="bloomThreshold"
4673                      type="range"
4674                      min="0"
4675                      max="1"
4676                      value="1"
4677                      step="0.01"
4678                    />
4679                    <span class="value" data-output="bloomThreshold">1.00</span>
4680                  </label>
4681                  <label class="slider-line">
4682                    <span>Strength</span>
4683                    <input
4684                      id="bloomStrength"
4685                      type="range"
4686                      min="0"
4687                      max="2"
4688                      value="0.2"
4689                      step="0.01"
4690                    />
4691                    <span class="value" data-output="bloomStrength">0.20</span>
4692                  </label>
4693                  <label class="slider-line">
4694                    <span>Radius</span>
4695                    <input
4696                      id="bloomRadius"
4697                      type="range"
4698                      min="0"
4699                      max="1"
4700                      value="0.2"
4701                      step="0.01"
4702                    />
4703                    <span class="value" data-output="bloomRadius">0.20</span>
4704                  </label>
4705                  <label class="color-line">
4706                    <span>Color</span>
4707                    <input type="color" id="bloomColor" class="color-chip" value="#ffe9cc" />
4708                  </label>
4709                  <label class="select-line">
4710                    <span>Quality</span>
4711                    <select id="bloomQuality" aria-label="Bloom quality">
4712                      <option value="low">Low</option>
4713                      <option value="medium" selected>Medium</option>
4714                      <option value="high">High</option>
4715                      <option value="ultra">Ultra</option>
4716                    </select>
4717                  </label>
4718                  </div>
4719                </div>
4720                <div class="panel-block-divider"></div>
4721                <div class="subsection" data-subsection="anamorphic-lens-flare">
4722                  <div class="block-title has-toggle">
4723                    <span>Anamorphic Bloom</span>
4724                    <div style="display: flex; align-items: center; gap: 0.5rem;">
4725                      <button class="block-reset-btn" data-reset="anamorphic-bloom" aria-label="Reset Anamorphic Bloom" data-tooltip="Reset Anamorphic Bloom settings">
4726                        <i class="fa-solid fa-rotate-left"></i>
4727                        <span class="sr-only">Reset</span>
4728                      </button>
4729                      <label class="effect-toggle" data-tooltip="Streak on bright areas; angle control below (requires Bloom on)">
4730                        <input type="checkbox" id="anamorphicBloomEnabled" />
4731                        <span class="effect-indicator" aria-hidden="true"></span>
4732                        <span class="sr-only">Enable Anamorphic Bloom</span>
4733                      </label>
4734                    </div>
4735                  </div>
4736                  <div
4737                    class="effect-foldout effect-foldout--collapsed effect-foldout--md"
4738                    data-effect-foldout="anamorphic-lens-flare"
4739                    aria-hidden="true"
4740                  >
4741                  <label class="slider-line">
4742                    <span>Strength</span>
4743                    <input
4744                      id="anamorphicBloomStrength"
4745                      type="range"
4746                      min="0"
4747                      max="3"
4748                      value="1"
4749                      step="0.01"
4750                    />
4751                    <span class="value" data-output="anamorphicBloomStrength">1.00</span>
4752                  </label>
4753                  <label class="slider-line">
4754                    <span>Spread</span>
4755                    <input
4756                      id="anamorphicBloomSpread"
4757                      type="range"
4758                      min="0"
4759                      max="1.68"
4760                      value="0.2"
4761                      step="0.01"
4762                    />
4763                    <span class="value" data-output="anamorphicBloomSpread">0.20</span>
4764                  </label>
4765                  <label class="slider-line">
4766                    <span data-tooltip="0° = horizontal (classic anamorphic); 180° flips the streak axis — enough for lens / flare direction">Streak angle</span>
4767                    <input
4768                      id="anamorphicBloomStreakAngle"
4769                      type="range"
4770                      min="0"
4771                      max="180"
4772                      value="0"
4773                      step="1"
4774                    />
4775                    <span class="value" data-output="anamorphicBloomStreakAngle">0°</span>
4776                  </label>
4777                  <label class="slider-line">
4778                    <span data-tooltip="Linear luminance after bloom. Max (2) targets only the brightest pixels; small frame-to-frame swings there can strobe — the engine widens soften automatically above 1.0, or lower threshold.">Threshold</span>
4779                    <input
4780                      id="anamorphicBloomThreshold"
4781                      type="range"
4782                      min="0"
4783                      max="2"
4784                      value="0.7"
4785                      step="0.01"
4786                    />
4787                    <span class="value" data-output="anamorphicBloomThreshold">0.70</span>
4788                  </label>
4789                  <label class="slider-line">
4790                    <span>Soften</span>
4791                    <input
4792                      id="anamorphicBloomSoften"
4793                      type="range"
4794                      min="0.01"
4795                      max="0.6"
4796                      value="0.12"
4797                      step="0.01"
4798                    />
4799                    <span class="value" data-output="anamorphicBloomSoften">0.12</span>
4800                  </label>
4801                  <label class="color-line">
4802                    <span>Tint</span>
4803                    <input type="color" id="anamorphicBloomStreakTint" class="color-chip" value="#7ec8ff" />
4804                  </label>
4805                  <label class="select-line">
4806                    <span>Quality</span>
4807                    <select id="anamorphicBloomQuality" aria-label="Anamorphic bloom quality">
4808                      <option value="low">Low</option>
4809                      <option value="medium" selected>Medium</option>
4810                      <option value="high">High</option>
4811                      <option value="ultra">Ultra</option>
4812                    </select>
4813                  </label>
4814                  </div>
4815                </div>
4816                <div class="panel-block-divider"></div>
4817                <div class="subsection" data-subsection="lens-flare">
4818                  <div class="block-title has-toggle">
4819                    <span>Lens Flare</span>
4820                    <div style="display: flex; align-items: center; gap: 0.5rem;">
4821                      <button class="block-reset-btn" data-reset="lens-flare" aria-label="Reset Lens Flare" data-tooltip="Reset Lens Flare settings">
4822                        <i class="fa-solid fa-rotate-left"></i>
4823                        <span class="sr-only">Reset</span>
4824                      </button>
4825                      <label class="effect-toggle" data-tooltip="Enable/disable lens flare effect">
4826                        <input type="checkbox" id="lensFlareEnabled" />
4827                        <span class="effect-indicator" aria-hidden="true"></span>
4828                        <span class="sr-only">Enable lens flare</span>
4829                      </label>
4830                    </div>
4831                  </div>
4832                  <div
4833                    class="effect-foldout effect-foldout--collapsed effect-foldout--lg"
4834                    data-effect-foldout="lens-flare"
4835                    aria-hidden="true"
4836                  >
4837                  <label class="slider-line">
4838                    <span>Rotation</span>
4839                    <input
4840                      id="lensFlareRotation"
4841                      type="range"
4842                      min="0"
4843                      max="360"
4844                      value="0"
4845                      step="1"
4846                    />
4847                    <span class="value" data-output="lensFlareRotation">0°</span>
4848                  </label>
4849                  <label class="slider-line">
4850                    <span>Height</span>
4851                    <input
4852                      id="lensFlareHeight"
4853                      type="range"
4854                      min="0"
4855                      max="90"
4856                      value="15"
4857                      step="1"
4858                    />
4859                    <span class="value" data-output="lensFlareHeight">15°</span>
4860                  </label>
4861                  <label class="slider-line" data-tooltip="Push the rainbow halo brighter and wider">
4862                    <span>Halo</span>
4863                    <input
4864                      id="lensFlareHalo"
4865                      type="range"
4866                      min="0"
4867                      max="5"
4868                      value="1"
4869                      step="0.05"
4870                    />
4871                    <span class="value" data-output="lensFlareHalo">1.00×</span>
4872                  </label>
4873                  <label class="slider-line" data-tooltip="Shorten or lengthen the star rays from the flare">
4874                    <span>Streak Length</span>
4875                    <input
4876                      id="lensFlareStreakLength"
4877                      type="range"
4878                      min="0"
4879                      max="10"
4880                      value="5"
4881                      step="0.1"
4882                    />
4883                    <span class="value" data-output="lensFlareStreakLength">5.0</span>
4884                  </label>
4885                  <label class="color-line">
4886                    <span>Color</span>
4887                    <input
4888                      type="color"
4889                      id="lensFlareColor"
4890                      class="color-chip"
4891                      value="#d28756"
4892                    />
4893                  </label>
4894                  <label class="slider-line" data-tooltip="Sun disc at the light source — eases out when occluded">
4895                    <span>Sun Disc Size</span>
4896                    <input
4897                      id="lensFlareSunDiscScale"
4898                      type="range"
4899                      min="0"
4900                      max="10"
4901                      value="1.5"
4902                      step="0.1"
4903                    />
4904                    <span class="value" data-output="lensFlareSunDiscScale">1.5</span>
4905                  </label>
4906                  <label class="slider-line" data-tooltip="0 = solid sharp disc, 5 = soft diffuse glow">
4907                    <span>Sun Disc Blur</span>
4908                    <input
4909                      id="lensFlareSunDiscBlur"
4910                      type="range"
4911                      min="0"
4912                      max="5"
4913                      value="1.25"
4914                      step="0.1"
4915                    />
4916                    <span class="value" data-output="lensFlareSunDiscBlur">1.25</span>
4917                  </label>
4918                  <label class="color-line">
4919                    <span>Sun Disc Color</span>
4920                    <input
4921                      type="color"
4922                      id="lensFlareSunDiscColor"
4923                      class="color-chip"
4924                      value="#fff0c8"
4925                    />
4926                  </label>
4927                  <label class="slider-line" data-tooltip="Brightness of the soft glow around the sun">
4928                    <span>Glow Intensity</span>
4929                    <input
4930                      id="lensFlareDiscGlowIntensity"
4931                      type="range"
4932                      min="0"
4933                      max="10"
4934                      value="0"
4935                      step="0.1"
4936                    />
4937                    <span class="value" data-output="lensFlareDiscGlowIntensity">0</span>
4938                  </label>
4939                  <label class="slider-line" data-tooltip="How far the glow extends from the sun">
4940                    <span>Glow Size</span>
4941                    <input
4942                      id="lensFlareDiscGlowSize"
4943                      type="range"
4944                      min="0"
4945                      max="10"
4946                      value="5"
4947                      step="0.1"
4948                    />
4949                    <span class="value" data-output="lensFlareDiscGlowSize">5</span>
4950                  </label>
4951                  <label class="color-line">
4952                    <span>Glow Color</span>
4953                    <input
4954                      type="color"
4955                      id="lensFlareDiscGlowColor"
4956                      class="color-chip"
4957                      value="#ff8844"
4958                    />
4959                  </label>
4960                  <label class="select-line">
4961                    <span>Quality</span>
4962                    <select id="lensFlareQuality" aria-label="Lens flare quality" data-tooltip="Lowers ghost/dirt sample counts — same look, less GPU work (not feature cutoffs)">
4963                      <option value="low">Low</option>
4964                      <option value="medium">Medium</option>
4965                      <option value="high" selected>High</option>
4966                      <option value="ultra">Ultra</option>
4967                    </select>
4968                  </label>
4969                  <div
4970                    class="slider-line"
4971                    data-tooltip="Animate flare streaks with iTime — only while camera auto-orbit is on (off by default)"
4972                  >
4973                    <span>Spin during orbit</span>
4974                    <label class="effect-toggle">
4975                      <input type="checkbox" id="lensFlareSpinDuringOrbit" />
4976                      <span class="effect-indicator" aria-hidden="true"></span>
4977                      <span class="sr-only">Animate lens flare streaks during camera auto-orbit</span>
4978                    </label>
4979                  </div>
4980                  <button
4981                    id="lensFlareKeyLightConnect"
4982                    class="ghost-btn small"
4983                    type="button"
4984                    aria-pressed="false"
4985                    data-tooltip="Match key-light direction to lens flare rotation and height"
4986                  >
4987                    Connect Key Light Position
4988                  </button>
4989                  </div>
4990                </div>
4991                <div class="panel-block-divider"></div>
4992                <div class="subsection" data-subsection="volumetric-scattering">
4993                  <div class="block-title has-toggle">
4994                    <span data-tooltip="Volumetric light rays — follows Lens Flare rotation and height (virtual sun mesh)">Light Rays</span>
4995                    <div style="display: flex; align-items: center; gap: 0.5rem;">
4996                      <button class="block-reset-btn" data-reset="volumetric-scattering" aria-label="Reset Light Rays" data-tooltip="Reset Light Rays settings">
4997                        <i class="fa-solid fa-rotate-left"></i>
4998                        <span class="sr-only">Reset</span>
4999                      </button>
5000                      <label class="effect-toggle" data-tooltip="Enable/disable light rays from the sun">
5001                        <input type="checkbox" id="godRaysEnabled" />
5002                        <span class="effect-indicator" aria-hidden="true"></span>
5003                        <span class="sr-only">Enable Light Rays</span>
5004                      </label>
5005                    </div>
5006                  </div>
5007                  <div
5008                    class="effect-foldout effect-foldout--collapsed effect-foldout--lg"
5009                    data-effect-foldout="volumetric-scattering"
5010                    aria-hidden="true"
5011                  >
5012                  <label class="color-line">
5013                    <span>Color</span>
5014                    <input
5015                      type="color"
5016                      id="godRaysColor"
5017                      class="color-chip"
5018                      value="#ffe8c4"
5019                    />
5020                  </label>
5021                  <label
5022                    class="slider-line"
5023                    data-tooltip="Size of the virtual sun mesh that casts rays (1 = full default disc)"
5024                  >
5025                    <span>Sun size</span>
5026                    <input
5027                      id="godRaysLightScale"
5028                      type="range"
5029                      min="0.08"
5030                      max="1.25"
5031                      value="0.4"
5032                      step="0.01"
5033                    />
5034                    <span class="value" data-output="godRaysLightScale">0.4</span>
5035                  </label>
5036                  <label class="slider-line" data-tooltip="Overall opacity of the light rays composite">
5037                    <span>Opacity</span>
5038                    <input
5039                      id="godRaysOpacity"
5040                      type="range"
5041                      min="0"
5042                      max="1"
5043                      value="1"
5044                      step="0.01"
5045                    />
5046                    <span class="value" data-output="godRaysOpacity">1</span>
5047                  </label>
5048                  <label class="slider-line" data-tooltip="Ray density — higher reaches farther across the frame">
5049                    <span>Density</span>
5050                    <input
5051                      id="godRaysDensity"
5052                      type="range"
5053                      min="0"
5054                      max="1"
5055                      value="0.96"
5056                      step="0.01"
5057                    />
5058                    <span class="value" data-output="godRaysDensity">0.96</span>
5059                  </label>
5060                  <label class="slider-line" data-tooltip="Illumination decay along each ray sample (lower = faster falloff)">
5061                    <span>Decay</span>
5062                    <input
5063                      id="godRaysDecay"
5064                      type="range"
5065                      min="0"
5066                      max="1"
5067                      value="0.92"
5068                      step="0.01"
5069                    />
5070                    <span class="value" data-output="godRaysDecay">0.92</span>
5071                  </label>
5072                  <label class="slider-line" data-tooltip="Weight of each ray sample">
5073                    <span>Weight</span>
5074                    <input
5075                      id="godRaysWeight"
5076                      type="range"
5077                      min="0"
5078                      max="1"
5079                      value="0.4"
5080                      step="0.01"
5081                    />
5082                    <span class="value" data-output="godRaysWeight">0.4</span>
5083                  </label>
5084                  <label class="slider-line" data-tooltip="Exposure multiplier after radial blur">
5085                    <span>Exposure</span>
5086                    <input
5087                      id="godRaysExposure"
5088                      type="range"
5089                      min="0"
5090                      max="2"
5091                      value="0.6"
5092                      step="0.01"
5093                    />
5094                    <span class="value" data-output="godRaysExposure">0.6</span>
5095                  </label>
5096                  <label class="slider-line" data-tooltip="Maximum output intensity clamp">
5097                    <span>Clamp Max</span>
5098                    <input
5099                      id="godRaysClampMax"
5100                      type="range"
5101                      min="0"
5102                      max="1"
5103                      value="1"
5104                      step="0.01"
5105                    />
5106                    <span class="value" data-output="godRaysClampMax">1</span>
5107                  </label>
5108                  <div
5109                    class="slider-line"
5110                    data-tooltip="Blur the sun mask before radial blur (reduces artifacts)"
5111                  >
5112                    <span>Blur mask</span>
5113                    <label class="effect-toggle">
5114                      <input type="checkbox" id="godRaysBlur" checked />
5115                      <span class="effect-indicator" aria-hidden="true"></span>
5116                      <span class="sr-only">Blur sun mask before radial blur</span>
5117                    </label>
5118                  </div>
5119                  <label class="select-line" data-tooltip="Resolution scale and sample count preset">
5120                    <span>Quality</span>
5121                    <select id="godRaysQuality" aria-label="God rays quality">
5122                      <option value="low">Low</option>
5123                      <option value="medium" selected>Medium</option>
5124                      <option value="high">High</option>
5125                      <option value="ultra">Ultra</option>
5126                    </select>
5127                  </label>
5128                  </div>
5129                </div>
5130                <div class="panel-block-divider"></div>
5131                <div class="subsection" data-subsection="lens-dirt">
5132                  <div class="block-title has-toggle">
5133                    <span>Lens Dirt</span>
5134                    <div style="display: flex; align-items: center; gap: 0.5rem;">
5135                      <button class="block-reset-btn" data-reset="lens-dirt" aria-label="Reset Lens Dirt" data-tooltip="Reset Lens Dirt settings">
5136                        <i class="fa-solid fa-rotate-left"></i>
5137                        <span class="sr-only">Reset</span>
5138                      </button>
5139                      <label class="effect-toggle" data-tooltip="Enable/disable lens dirt overlay">
5140                        <input type="checkbox" id="lensDirtEnabled" />
5141                        <span class="effect-indicator" aria-hidden="true"></span>
5142                        <span class="sr-only">Enable Lens Dirt</span>
5143                      </label>
5144                    </div>
5145                  </div>
5146                  <div
5147                    class="effect-foldout effect-foldout--collapsed"
5148                    data-effect-foldout="lens-dirt"
5149                    aria-hidden="true"
5150                  >
5151                  <label class="slider-line">
5152                    <span>Strength</span>
5153                    <input
5154                      id="lensDirtStrength"
5155                      type="range"
5156                      min="0"
5157                      max="1"
5158                      step="0.01"
5159                      value="0.8"
5160                    />
5161                    <span class="value" data-output="lensDirtStrength">0.80</span>
5162                  </label>
5163                  <label
5164                    class="color-line"
5165                    data-tooltip="Multiplies the lens dirt texture. White keeps the original texture; pick a colour to match bright lights (e.g. cool blue)."
5166                  >
5167                    <span>Dirt tint</span>
5168                    <input type="color" id="lensDirtTintColor" class="color-chip" value="#ffffff" />
5169                  </label>
5170                  </div>
5171                </div>
5172                <div class="panel-block-divider"></div>
5173                <div class="subsection" data-subsection="grain">
5174                  <div class="block-title has-toggle">
5175                    <span>Grain</span>
5176                    <div style="display: flex; align-items: center; gap: 0.5rem;">
5177                      <button class="block-reset-btn" data-reset="grain" aria-label="Reset Grain" data-tooltip="Reset Grain settings">
5178                        <i class="fa-solid fa-rotate-left"></i>
5179                        <span class="sr-only">Reset</span>
5180                      </button>
5181                      <label class="effect-toggle" data-tooltip="Enable/disable grain effect">
5182                        <input type="checkbox" id="toggleGrain" />
5183                        <span class="effect-indicator" aria-hidden="true"></span>
5184                        <span class="sr-only">Enable Grain</span>
5185                      </label>
5186                    </div>
5187                  </div>
5188                  <div
5189                    class="effect-foldout effect-foldout--collapsed"
5190                    data-effect-foldout="grain"
5191                    aria-hidden="true"
5192                  >
5193                  <label class="slider-line">
5194                    <span>Strength</span>
5195                    <input
5196                      id="grainIntensity"
5197                      type="range"
5198                      min="0"
5199                      max="5"
5200                      value="0.20"
5201                      step="0.02"
5202                    />
5203                    <span class="value" data-output="grainIntensity">0.20</span>
5204                  </label>
5205                  <label class="slider-line">
5206                    <span>Scale</span>
5207                    <input
5208                      id="grainScale"
5209                      type="range"
5210                      min="1"
5211                      max="3"
5212                      value="1"
5213                      step="0.05"
5214                    />
5215                    <span class="value" data-output="grainScale" data-format="multiplier">1.00×</span>
5216                  </label>
5217                  </div>
5218                </div>
5219                <div class="panel-block-divider"></div>
5220                <div class="subsection" data-subsection="vignette">
5221                  <div class="block-title has-toggle">
5222                    <span>Vignette</span>
5223                    <div style="display: flex; align-items: center; gap: 0.5rem;">
5224                      <button class="block-reset-btn" data-reset="vignette" aria-label="Reset Vignette" data-tooltip="Reset Vignette settings">
5225                        <i class="fa-solid fa-rotate-left"></i>
5226                        <span class="sr-only">Reset</span>
5227                      </button>
5228                      <label class="effect-toggle" data-tooltip="Enable/disable vignette darkening at frame edges">
5229                        <input type="checkbox" id="toggleVignette" />
5230                        <span class="effect-indicator" aria-hidden="true"></span>
5231                        <span class="sr-only">Enable Vignette</span>
5232                      </label>
5233                    </div>
5234                  </div>
5235                  <div
5236                    class="effect-foldout effect-foldout--collapsed"
5237                    data-effect-foldout="vignette"
5238                    aria-hidden="true"
5239                  >
5240                  <label class="slider-line">
5241                    <span>Strength</span>
5242                    <input
5243                      id="vignetteIntensity"
5244                      type="range"
5245                      min="0"
5246                      max="1"
5247                      value="0.5"
5248                      step="0.01"
5249                    />
5250                    <span class="value" data-output="vignetteIntensity">0.50</span>
5251                  </label>
5252                  <label class="color-line">
5253                    <span>Color</span>
5254                    <input
5255                      type="color"
5256                      id="vignetteColor"
5257                      class="color-chip"
5258                      value="#080808"
5259                    />
5260                  </label>
5261                  </div>
5262                </div>
5263                <div class="panel-block-divider"></div>
5264                <div class="subsection" data-subsection="aberration">
5265                  <div class="block-title has-toggle">
5266                    <span>Chromatic Aberration</span>
5267                    <div style="display: flex; align-items: center; gap: 0.5rem;">
5268                      <button class="block-reset-btn" data-reset="aberration" aria-label="Reset Chromatic Aberration" data-tooltip="Reset Chromatic Aberration settings">
5269                        <i class="fa-solid fa-rotate-left"></i>
5270                        <span class="sr-only">Reset</span>
5271                      </button>
5272                      <label class="effect-toggle" data-tooltip="Enable/disable chromatic aberration effect">
5273                        <input type="checkbox" id="toggleAberration" />
5274                        <span class="effect-indicator" aria-hidden="true"></span>
5275                        <span class="sr-only">Enable Chromatic Aberration</span>
5276                      </label>
5277                    </div>
5278                  </div>
5279                  <div
5280                    class="effect-foldout effect-foldout--collapsed"
5281                    data-effect-foldout="aberration"
5282                    aria-hidden="true"
5283                  >
5284                  <label class="slider-line">
5285                    <span data-tooltip="Overall radial red/blue channel separation magnitude.">Amount</span>
5286                    <input
5287                      id="aberrationAmount"
5288                      type="range"
5289                      min="0"
5290                      max="0.02"
5291                      value="0.0006"
5292                      step="0.0001"
5293                    />
5294                    <span class="value" data-output="aberrationAmount">0.0006</span>
5295                  </label>
5296                  <label class="slider-line">
5297                    <span data-tooltip="Radial smear along the color split — zoom-blur style streaks at the frame edges.">Blur</span>
5298                    <input
5299                      id="aberrationBlur"
5300                      type="range"
5301                      min="0"
5302                      max="1"
5303                      value="0"
5304                      step="0.01"
5305                    />
5306                    <span class="value" data-output="aberrationBlur">0.00</span>
5307                  </label>
5308                  <label class="slider-line">
5309                    <span data-tooltip="How far aberration reaches toward the frame center. Higher = more spread.">Edge</span>
5310                    <input
5311                      id="aberrationFalloff"
5312                      type="range"
5313                      min="0.5"
5314                      max="3"
5315                      value="1"
5316                      step="0.05"
5317                    />
5318                    <span class="value" data-output="aberrationFalloff">1.00</span>
5319                  </label>
5320                  <label class="select-line">
5321                    <span data-tooltip="Blur streak sample count — higher tiers smooth heavy smear with more GPU taps.">Quality</span>
5322                    <select id="aberrationQuality" aria-label="Chromatic aberration quality">
5323                      <option value="low">Low</option>
5324                      <option value="medium" selected>Medium</option>
5325                      <option value="high">High</option>
5326                      <option value="ultra">Ultra</option>
5327                    </select>
5328                  </label>
5329                  </div>
5330                </div>
5331              </div>
5332
5333              <div class="panel-block">
5334                <div class="subsection" data-subsection="color-checker">
5335                  <div class="block-title has-toggle">
5336                    <span>ColorChecker</span>
5337                    <div style="display: flex; align-items: center; gap: 0.5rem;">
5338                      <button type="button" class="block-reset-btn" data-reset="color-checker" aria-label="Reset ColorChecker" data-tooltip="Reset ColorChecker placement">
5339                        <i class="fa-solid fa-rotate-left"></i>
5340                        <span class="sr-only">Reset</span>
5341                      </button>
5342                      <label class="effect-toggle" data-tooltip="Show or hide the ColorChecker chart in the viewport">
5343                        <input type="checkbox" id="colorCheckerEnabled" />
5344                        <span class="effect-indicator" aria-hidden="true"></span>
5345                        <span class="sr-only">Show ColorChecker chart</span>
5346                      </label>
5347                    </div>
5348                  </div>
5349                  <div
5350                    class="effect-foldout effect-foldout--collapsed effect-foldout--md"
5351                    data-effect-foldout="color-checker"
5352                    aria-hidden="true"
5353                  >
5354                  <button
5355                    type="button"
5356                    id="colorCheckerRawToggle"
5357                    class="accent-action-btn color-checker-raw-toggle"
5358                    aria-pressed="false"
5359                    data-tooltip="Same as Display → Unlit on the Object tab: neutral mesh view for comparing grade + chart. Toggle off restores your previous display mode."
5360                  >
5361                    <i class="fa-solid fa-palette" aria-hidden="true"></i>
5362                    <span class="color-checker-raw-toggle__label">Reference colors — Off</span>
5363                  </button>
5364                  <label class="slider-line">
5365                    <span data-tooltip="Radius of the orbit around the orbit target in the horizontal plane (scene units).">Distance</span>
5366                    <input
5367                      id="colorCheckerDistance"
5368                      type="range"
5369                      min="0.1"
5370                      max="6"
5371                      value="2"
5372                      step="0.05"
5373                    />
5374                    <span class="value" data-output="colorCheckerDistance">2.00m</span>
5375                  </label>
5376                  <label class="slider-line">
5377                    <span data-tooltip="Yaw around the vertical axis through the target — independent of Studio Lights and HDRI dome rotation.">Rotate</span>
5378                    <input
5379                      id="colorCheckerRotate"
5380                      type="range"
5381                      min="0"
5382                      max="360"
5383                      value="333"
5384                      step="1"
5385                    />
5386                    <span class="value" data-output="colorCheckerRotate">333°</span>
5387                  </label>
5388                  <label class="slider-line">
5389                    <span data-tooltip="Lift above the ground/grid (chart base rests on the floor; positive values raise it further).">Height</span>
5390                    <input
5391                      id="colorCheckerHeight"
5392                      type="range"
5393                      min="-3"
5394                      max="10"
5395                      value="0.05"
5396                      step="0.1"
5397                    />
5398                    <span class="value" data-output="colorCheckerHeight">0.05m</span>
5399                  </label>
5400                  <label class="slider-line">
5401                    <span data-tooltip="Uniform size of the chart. Default matches a real ColorChecker (~356 mm) on import-normalized models (~2 m).">Scale</span>
5402                    <input
5403                      id="colorCheckerScale"
5404                      type="range"
5405                      min="0.02"
5406                      max="4"
5407                      value="0.055"
5408                      step="0.01"
5409                    />
5410                    <span class="value" data-output="colorCheckerScale">0.06×</span>
5411                  </label>
5412                  </div>
5413                </div>
5414                <div class="panel-block-divider"></div>
5415                <div class="subsection" data-subsection="composition-guides">
5416                  <div class="block-title has-toggle">
5417                    <span data-tooltip="Rule of thirds, center cross, diagonals, center circle, 90% action safe, and a centered square for shape-library thumbnail framing">Composition Guides</span>
5418                    <label class="effect-toggle" data-tooltip="Show composition overlays in the viewport">
5419                      <input type="checkbox" id="compositionGridEnabled" />
5420                      <span class="effect-indicator" aria-hidden="true"></span>
5421                      <span class="sr-only">Show composition guides</span>
5422                    </label>
5423                  </div>
5424                  <div
5425                    class="effect-foldout effect-foldout--collapsed"
5426                    data-effect-foldout="composition-guides"
5427                    aria-hidden="true"
5428                  >
5429                  <label class="select-line">
5430                    <span data-tooltip="Light lines suit dark footage; dark lines suit bright scenes.">Colour</span>
5431                    <select id="compositionGuidesColor" aria-label="Composition guides colour">
5432                      <option value="light">Light</option>
5433                      <option value="dark">Dark</option>
5434                    </select>
5435                  </label>
5436                  </div>
5437                </div>
5438                <div class="panel-block-divider"></div>
5439                <div class="subsection" data-subsection="cinematic-letterbox">
5440                  <div class="block-title has-toggle">
5441                    <span data-tooltip="Black bars matting the viewport to a 21∶9 picture area (common on 16∶9 displays). Opaque PNG exports include these mattes when enabled; export pixel size is unchanged.">21∶9 Letterbox</span>
5442                    <label class="effect-toggle" data-tooltip="Show cinematic widescreen mattes in the viewport">
5443                      <input type="checkbox" id="cinematicLetterbox219" />
5444                      <span class="effect-indicator" aria-hidden="true"></span>
5445                      <span class="sr-only">Show 21∶9 Letterbox</span>
5446                    </label>
5447                  </div>
5448                </div>
5449              </div>
5450
5451              <div class="panel-block panel-block--compact-head">
5452                <div class="block-title">
5453                  <span>Quality</span>
5454                </div>
5455                <label class="select-line">
5456                  <span data-tooltip="Low: no bloom, no depth of field, no FXAA, plus 1K shadows and 1× DPR — your settings stay saved. Medium: lower DPR, 1K shadows, half-res bloom (depth of field still works if on). Ultra: full quality.">Render Quality</span>
5457                  <select id="renderQuality" aria-label="Render Quality">
5458                    <option value="low">Low</option>
5459                    <option value="medium" selected>Medium</option>
5460                    <option value="max">Ultra</option>
5461                  </select>
5462                </label>
5463                <label class="select-line">
5464                  <span>Anti-Aliasing</span>
5465                  <select id="antiAliasing" aria-label="Anti-aliasing">
5466                    <option value="none">None</option>
5467                    <option value="fxaa" selected>FXAA</option>
5468                  </select>
5469                </label>
5470                <label class="select-line">
5471                  <span>Tone Mapping</span>
5472                  <select id="toneMapping" aria-label="Tone mapping">
5473                    <option value="none">None</option>
5474                    <option value="reinhard">Reinhard</option>
5475                    <option value="aces-filmic" selected>ACES Filmic</option>
5476                  </select>
5477                </label>
5478              </div>
5479
5480              <div class="panel-block export-block" style="display: none;">
5481                <button id="exportImageLegacy" class="accent-action-btn" data-tooltip="Export current view as image">
5482                  <i class="fa-solid fa-download"></i>
5483                  Export image
5484                </button>
5485              </div>
5486
5487              <div class="panel-block">
5488                <div class="block-title">Scene</div>
5489                <div class="export-controls">
5490                  <button id="resetRenderSettings" class="accent-action-btn" data-tooltip="Reset all camera settings to defaults">
5491                        <i class="fa-solid fa-rotate-left"></i>
5492                    Reset Camera
5493              </button>
5494                  <button class="reset-scene accent-action-btn" data-tooltip="Clear the workspace and restore a blank canvas">
5495                    <i class="fa-solid fa-arrow-left"></i>
5496                    Reset Scene
5497                  </button>
5498                  <button class="copy-scene-settings accent-action-btn" data-tooltip="Copy all scene settings to clipboard">
5499                    <i class="fa-solid fa-copy"></i>
5500                    Copy Scene Settings
5501              </button>
5502                  <button class="load-scene-settings accent-action-btn" data-tooltip="Paste scene settings from clipboard into a dialog">
5503                    <i class="fa-solid fa-upload"></i>
5504                    Paste Scene Settings
5505                  </button>
5506                  <button class="save-orby-scene accent-action-btn" data-tooltip="Save entire scene and model as .orby file">
5507                    <i class="fa-solid fa-floppy-disk"></i>
5508                    Save .orby Scene
5509                  </button>
5510                  <button class="load-orby-scene accent-action-btn" data-tooltip="Load entire scene and model from .orby file">
5511                    <i class="fa-solid fa-file-import"></i>
5512                    Load .orby Scene
5513                  </button>
5514                </div>
5515              </div>
5516              <div class="info-version-tag">v0.5.1052 · 2026-10-02 19:44:45 UTC</div>
5517              <button type="button" class="info-orby-mark" data-tooltip="Home" aria-label="Home">
5518                <img src="./assets/images/favicon.svg" width="28" height="28" alt="" />
5519              </button>
5520            </section>
5521
5522            <h2 class="panel-header-title" data-header="export">Export</h2>
5523            <section class="panel" data-panel="export">
5524              <div class="panel-block" data-export-section="image">
5525                <div class="block-title has-toggle">
5526                  <span>Image</span>
5527                  <label class="effect-toggle" data-tooltip="Show Image export options">
5528                    <input type="checkbox" id="exportImageSectionOpen" />
5529                    <span class="effect-indicator" aria-hidden="true"></span>
5530                    <span class="sr-only">Show Image export options</span>
5531                  </label>
5532                </div>
5533                <div
5534                  class="effect-foldout effect-foldout--collapsed effect-foldout--md"
5535                  data-export-foldout="image"
5536                  aria-hidden="true"
5537                >
5538                <p class="export-format-sub">
5539                  Raster snapshot of the current view—lighting, materials, and post effects included. Choose PNG, JPEG, or WebP; toggle transparency when the format supports it. Size is relative to the viewer—1× matches your current screen resolution, 2× exports at double that (larger file, more detail).
5540                </p>
5541                <div class="export-controls">
5542                  <div class="export-option-group">
5543                    <span class="export-label">Format</span>
5544                    <div class="export-button-group export-button-group--triple">
5545                      <button type="button" data-export-image-format="png" class="export-option-btn active" data-tooltip="Lossless PNG with optional transparency">.PNG</button>
5546                      <button type="button" data-export-image-format="jpeg" class="export-option-btn" data-tooltip="Smaller JPEG — no transparency">.JPEG</button>
5547                      <button type="button" data-export-image-format="webp" class="export-option-btn" data-tooltip="WebP with optional transparency">.WEBP</button>
5548                    </div>
5549                  </div>
5550                  <div id="exportImageTransparentSettings" class="export-option-group">
5551                    <span class="export-label">Transparent</span>
5552                    <div class="export-button-group">
5553                      <button type="button" data-export-transparent="false" class="export-option-btn" data-tooltip="Export with solid background">NO</button>
5554                      <button type="button" data-export-transparent="true" class="export-option-btn active" data-tooltip="Export with transparent background">YES</button>
5555                    </div>
5556                  </div>
5557                  <div id="exportImageTransparentFraming" class="export-image-transparent-framing is-muted">
5558                    <div class="export-option-group">
5559                      <span class="export-label">Framing</span>
5560                      <div class="export-button-group">
5561                        <button type="button" data-export-transparent-framing="crop" class="export-option-btn active" data-tooltip="Trim empty pixels around the mesh — best for stickers and compositing">CROP TO ASSET</button>
5562                        <button type="button" data-export-transparent-framing="full" class="export-option-btn" data-tooltip="Keep the viewport canvas with transparent margins — best for overlays and motion graphics">FULL FRAME</button>
5563                      </div>
5564                    </div>
5565                  </div>
5566                  <div class="export-option-group">
5567                    <span class="export-label">Size</span>
5568                    <div class="export-button-group">
5569                      <button data-export-size="1" class="export-option-btn" data-tooltip="Export at 1× resolution">1X</button>
5570                      <button data-export-size="2" class="export-option-btn active" data-tooltip="Export at 2× resolution (higher quality)">2X</button>
5571                    </div>
5572                  </div>
5573                  <button id="exportImageButton" class="accent-action-btn" data-tooltip="Export current view as image">
5574                    <i class="fa-solid fa-download"></i>
5575                    <span class="export-image-btn-label">Export .PNG</span>
5576                  </button>
5577                </div>
5578                </div>
5579              </div>
5580
5581              <div class="panel-block" data-export-section="svg">
5582                <div class="block-title has-toggle">
5583                  <span>SVG</span>
5584                  <label class="effect-toggle" data-tooltip="Show SVG export options">
5585                    <input type="checkbox" id="exportSvgSectionOpen" />
5586                    <span class="effect-indicator" aria-hidden="true"></span>
5587                    <span class="sr-only">Show SVG export options</span>
5588                  </label>
5589                </div>
5590                <div
5591                  class="effect-foldout effect-foldout--collapsed effect-foldout--md"
5592                  data-export-foldout="svg"
5593                  aria-hidden="true"
5594                >
5595                <p class="export-format-sub">
5596                  Vector output derived from the current framing—great for logos, precision edges, and scaling without pixels. Silhouette traces a single outline; Color builds flat filled regions from the render.
5597                </p>
5598                <label class="select-line">
5599                  <span data-tooltip="Low: fewer colors and coarser paths (smaller files). Medium: balanced. High: maximum colors and trace detail (larger files).">Detail Level</span>
5600                  <select id="exportSvgColorDetail" aria-label="SVG export detail level">
5601                    <option value="low">Low</option>
5602                    <option value="medium">Medium</option>
5603                    <option value="high" selected>High</option>
5604                  </select>
5605                </label>
5606                <div class="export-controls">
5607                  <button id="exportSvgButton" class="accent-action-btn" data-tooltip="Export silhouette as vector SVG">
5608                    <i class="fa-solid fa-draw-polygon"></i>
5609                    Export .SVG (Silhouette)
5610                  </button>
5611                  <button id="exportSvgColorButton" class="accent-action-btn" data-tooltip="Export flat-color vector SVG using the detail level above">
5612                    <i class="fa-solid fa-palette"></i>
5613                    Export .SVG (Color)
5614                  </button>
5615                </div>
5616                </div>
5617              </div>
5618
5619              <div class="panel-block" data-export-section="glb">
5620                <div class="block-title has-toggle">
5621                  <span>GLB</span>
5622                  <label class="effect-toggle" data-tooltip="Show GLB export options">
5623                    <input type="checkbox" id="exportGlbSectionOpen" />
5624                    <span class="effect-indicator" aria-hidden="true"></span>
5625                    <span class="sr-only">Show GLB export options</span>
5626                  </label>
5627                </div>
5628                <div
5629                  class="effect-foldout effect-foldout--collapsed effect-foldout--md"
5630                  data-export-foldout="glb"
5631                  aria-hidden="true"
5632                >
5633                <p class="export-format-sub">
5634                  Export a .GLB for other 3D tools and AR — from an imported SVG extrusion, or from Shader Lab <strong>PS2 Crush</strong>, <strong>PSX</strong>, or <strong>VGA/DOS 3D</strong> (with the look applied). Tip: dial in extrusion or Shader Lab before exporting.
5635                </p>
5636                <div class="export-controls">
5637                  <button id="exportSvgGlbButton" class="accent-action-btn" data-tooltip="Export .GLB — SVG extrusion, or Shader Lab PS2 Crush / PSX / VGA with the look applied">
5638                    <i class="fa-solid fa-cube"></i>
5639                    Export .GLB
5640                  </button>
5641                </div>
5642                </div>
5643              </div>
5644              <div class="panel-block" data-export-section="video">
5645                <div class="block-title has-toggle">
5646                  <span>Video</span>
5647                  <label class="effect-toggle" data-tooltip="Show Video export options">
5648                    <input type="checkbox" id="exportVideoSectionOpen" />
5649                    <span class="effect-indicator" aria-hidden="true"></span>
5650                    <span class="sr-only">Show Video export options</span>
5651                  </label>
5652                </div>
5653                <div
5654                  class="effect-foldout effect-foldout--collapsed effect-foldout--xl"
5655                  data-export-foldout="video"
5656                  aria-hidden="true"
5657                >
5658                <p class="export-format-sub">
5659                  Combine object turntable, camera orbit/dolly/roll, and optional HDRI rotation.
5660                </p>
5661                <p class="export-format-sub export-format-warning">
5662                  MP4 is a real-time viewport capture, not an offline render. Heavier scenes may drop frames or fail—best for previews and lighter setups. For dependable output, export a PNG sequence.
5663                </p>
5664                <div class="export-controls">
5665                  <div class="block-title export-section-title">Object</div>
5666                  <div id="exportVideoObjectGroup" class="export-option-group export-video-object-group">
5667                    <div class="export-button-group">
5668                      <button type="button" data-video-movement="turntable" class="export-option-btn active" data-tooltip="Rotate the mesh in place over the export length">TURNTABLE</button>
5669                    </div>
5670                    <span class="export-label">Laps</span>
5671                    <div class="export-button-group export-button-group--triple">
5672                      <button type="button" data-video-object-spins="0" class="export-option-btn" data-tooltip="No full 360° mesh rotation — use arc below for partial turns">0</button>
5673                      <button type="button" data-video-object-spins="1" class="export-option-btn active" data-tooltip="One full mesh rotation over the export length">1</button>
5674                      <button type="button" data-video-object-spins="2" class="export-option-btn" data-tooltip="Two full mesh rotations over the same duration">2</button>
5675                    </div>
5676                    <span class="export-label">Arc</span>
5677                    <div id="exportObjectArcGroup" class="export-button-group export-button-group--triple">
5678                      <button type="button" data-video-object-arc="22.5" class="export-option-btn" data-tooltip="Partial 22.5° mesh rotation when laps is 0">22.5°</button>
5679                      <button type="button" data-video-object-arc="45" class="export-option-btn" data-tooltip="Partial 45° mesh rotation when laps is 0">45°</button>
5680                      <button type="button" data-video-object-arc="90" class="export-option-btn" data-tooltip="Partial 90° mesh rotation when laps is 0">90°</button>
5681                    </div>
5682                    <span class="export-label">Direction</span>
5683                    <div class="export-button-group">
5684                      <button type="button" data-video-object-direction="reverse" class="export-option-btn" data-tooltip="Opposite mesh rotation direction">REVERSE</button>
5685                      <button type="button" data-video-object-direction="forward" class="export-option-btn active" data-tooltip="Default mesh rotation direction">FORWARD</button>
5686                    </div>
5687                  </div>
5688                  <div class="panel-block-divider" aria-hidden="true"></div>
5689                  <div class="block-title export-section-title">Camera</div>
5690                  <div class="export-option-group export-video-camera-group">
5691                    <div class="export-button-group">
5692                      <button type="button" data-video-movement="orbit" class="export-option-btn" data-tooltip="Orbit around your current target over the export length">ORBIT</button>
5693                    </div>
5694                    <span class="export-label">Orbit Laps</span>
5695                    <div class="export-button-group export-button-group--triple">
5696                      <button type="button" data-video-camera-spins="0" class="export-option-btn" data-tooltip="No full 360° camera orbit — use arc below for partial moves">0</button>
5697                      <button type="button" data-video-camera-spins="1" class="export-option-btn active" data-tooltip="One full camera orbit over the export length">1</button>
5698                      <button type="button" data-video-camera-spins="2" class="export-option-btn" data-tooltip="Two full camera orbits over the same duration">2</button>
5699                    </div>
5700                    <span class="export-label">Orbit Arc</span>
5701                    <div id="exportCameraArcGroup" class="export-button-group export-button-group--triple">
5702                      <button type="button" data-video-camera-arc="22.5" class="export-option-btn" data-tooltip="Partial 22.5° camera orbit when orbit laps is 0">22.5°</button>
5703                      <button type="button" data-video-camera-arc="45" class="export-option-btn" data-tooltip="Partial 45° camera orbit when orbit laps is 0">45°</button>
5704                      <button type="button" data-video-camera-arc="90" class="export-option-btn" data-tooltip="Partial 90° camera orbit when orbit laps is 0">90°</button>
5705                    </div>
5706                    <span class="export-label">Orbit Direction</span>
5707                    <div class="export-button-group">
5708                      <button type="button" data-video-camera-direction="reverse" class="export-option-btn" data-tooltip="Opposite camera orbit direction">REVERSE</button>
5709                      <button type="button" data-video-camera-direction="forward" class="export-option-btn active" data-tooltip="Default camera orbit direction">FORWARD</button>
5710                    </div>
5711                    <div class="export-button-group">
5712                      <button type="button" data-video-movement="zoom-in" class="export-option-btn" data-tooltip="Dolly toward the orbit target over the export length">ZOOM IN</button>
5713                      <button type="button" data-video-movement="zoom-out" class="export-option-btn" data-tooltip="Dolly away from the orbit target over the export length">ZOOM OUT</button>
5714                    </div>
5715                    <div class="export-button-group">
5716                      <button type="button" data-video-movement="tilt-left" class="export-option-btn" data-tooltip="Roll left (counter-clockwise) over the export length">ROLL LEFT</button>
5717                      <button type="button" data-video-movement="tilt-right" class="export-option-btn" data-tooltip="Roll right (clockwise) over the export length">ROLL RIGHT</button>
5718                    </div>
5719                    <div id="exportMovementSliders" class="export-video-camera-sliders">
5720                    <label id="exportZoomDistanceSettings" class="slider-line">
5721                      <span data-tooltip="Camera: how far the camera dollies in or out over the export length (scene units).">Zoom distance</span>
5722                      <input
5723                        id="exportZoomDistance"
5724                        type="range"
5725                        min="0.1"
5726                        max="6"
5727                        value="1.5"
5728                        step="0.05"
5729                      />
5730                      <span class="value" data-output="exportZoomDistance">1.50m</span>
5731                    </label>
5732                    <label id="exportTiltAngleSettings" class="slider-line">
5733                      <span data-tooltip="Camera: roll angle applied over the export length (degrees).">Roll angle</span>
5734                      <input
5735                        id="exportTiltAngle"
5736                        type="range"
5737                        min="0"
5738                        max="180"
5739                        value="15"
5740                        step="1"
5741                      />
5742                      <span class="value" data-output="exportTiltAngle">15°</span>
5743                    </label>
5744                    <label id="exportFovOffsetSettings" class="slider-line">
5745                      <span data-tooltip="Camera: animate field of view linearly over the export length. Center = no change; left narrows (telephoto), right widens (wide-angle).">FOV animation</span>
5746                      <input
5747                        id="exportFovOffset"
5748                        type="range"
5749                        min="-40"
5750                        max="40"
5751                        value="0"
5752                        step="1"
5753                      />
5754                      <span class="value" data-output="exportFovOffset">0°</span>
5755                    </label>
5756                    <label id="exportPitchOffsetSettings" class="slider-line">
5757                      <span data-tooltip="Camera: pivot up or down on the orbit target over the export length — like nodding your head. Center = no change; right tilts up, left tilts down.">Pitch animation</span>
5758                      <input
5759                        id="exportPitchOffset"
5760                        type="range"
5761                        min="-90"
5762                        max="90"
5763                        value="0"
5764                        step="1"
5765                      />
5766                      <span class="value" data-output="exportPitchOffset">0°</span>
5767                    </label>
5768                    </div>
5769                  </div>
5770                  <div class="block-title export-section-title" data-tooltip="One curve for the whole clip — object spin, camera moves, FOV, and pitch.">Timing</div>
5771                  <div class="export-option-group export-video-timing-group">
5772                    <label id="exportMovementEasingFamilyLine" class="select-line">
5773                      <span data-tooltip="Linear is default for turntables; ease out suits camera dollies and orbits.">Easing</span>
5774                      <select id="exportMovementEasingFamily" aria-label="Export timing easing curve">
5775                        <option value="linear" selected>Linear</option>
5776                        <option value="sine">Sine</option>
5777                        <option value="quad">Quad</option>
5778                        <option value="cubic">Cubic</option>
5779                        <option value="quart">Quart</option>
5780                        <option value="quint">Quint</option>
5781                        <option value="expo">Expo</option>
5782                        <option value="circ">Circ</option>
5783                      </select>
5784                    </label>
5785                    <label id="exportMovementEasingTypeLine" class="select-line is-muted">
5786                      <span data-tooltip="Ease in accelerates from rest; ease out decelerates into the end of the clip; in-out blends both.">Type</span>
5787                      <select id="exportMovementEasingType" aria-label="Export timing easing type" disabled>
5788                        <option value="in">In</option>
5789                        <option value="out" selected>Out</option>
5790                        <option value="inOut">In-out</option>
5791                      </select>
5792                    </label>
5793                  </div>
5794                  <div class="export-video-preview-actions scene-controls">
5795                    <button
5796                      type="button"
5797                      id="exportVideoCameraSaveButton"
5798                      class="accent-action-btn export-video-camera-btn"
5799                      data-tooltip="Remember this camera framing for this session (position, target, and roll)"
5800                    >
5801                      <i class="fa-solid fa-floppy-disk" aria-hidden="true"></i>
5802                      <span>Save Camera Position</span>
5803                    </button>
5804                    <button
5805                      type="button"
5806                      id="exportVideoCameraRestoreButton"
5807                      class="accent-action-btn export-video-camera-btn"
5808                      disabled
5809                      data-tooltip="Restore the camera framing you saved this session"
5810                    >
5811                      <i class="fa-solid fa-rotate-left" aria-hidden="true"></i>
5812                      <span>Restore Camera Position</span>
5813                    </button>
5814                  </div>
5815                  <div id="exportMeshAnimationsSettings" class="export-option-group" hidden>
5816                    <label class="select-line">
5817                      <span data-tooltip="GLB clip baked into export and preview timeline. Off: static mesh in the export file; preview keeps live studio playback.">GLB animation</span>
5818                      <select id="exportMeshAnimationSelect" aria-label="GLB animation for export"></select>
5819                    </label>
5820                    <div id="exportMeshMatchDurationWrap" class="slider-line" hidden>
5821                      <span data-tooltip="Set export length to the selected clip duration. Length presets (5s / 10s / 15s) are ignored while this is on.">Match export length to clip</span>
5822                      <label class="effect-toggle">
5823                        <input type="checkbox" id="exportMeshMatchDurationToClip" />
5824                        <span class="effect-indicator" aria-hidden="true"></span>
5825                        <span class="sr-only">Match export length to selected GLB clip</span>
5826                      </label>
5827                    </div>
5828                    <div id="exportMeshSyncCameraWrap" class="slider-line" hidden>
5829                      <span data-tooltip="When off, camera and turntable moves keep your Length preset timing while the clip plays at normal speed over the export.">Sync camera move to duration</span>
5830                      <label class="effect-toggle">
5831                        <input type="checkbox" id="exportMeshSyncCameraToDuration" checked />
5832                        <span class="effect-indicator" aria-hidden="true"></span>
5833                        <span class="sr-only">Sync camera and turntable to export duration</span>
5834                      </label>
5835                    </div>
5836                  </div>
5837                  <div class="panel-block-divider" aria-hidden="true"></div>
5838                  <div class="block-title export-section-title">Output</div>
5839                  <div class="export-option-group">
5840                    <span class="export-label">Format</span>
5841                    <div class="export-button-group">
5842                      <button data-video-format="mp4" class="export-option-btn active" data-tooltip="Encoded .MP4 export">.MP4</button>
5843                      <button data-video-format="png" class="export-option-btn" data-tooltip="Numbered PNG sequence">.PNG</button>
5844                    </div>
5845                  </div>
5846                  <div id="exportPngTransparentSettings" class="export-png-transparent is-muted">
5847                    <div class="export-option-group">
5848                      <span class="export-label">Transparent</span>
5849                      <div class="export-button-group">
5850                        <button type="button" data-video-mov-transparent="false" class="export-option-btn active" disabled data-tooltip="Solid background">NO</button>
5851                        <button type="button" data-video-mov-transparent="true" class="export-option-btn is-disabled" disabled data-tooltip="Transparent PNG sequence for compositing">YES</button>
5852                      </div>
5853                    </div>
5854                  </div>
5855                  <div id="exportVideoTransparentFraming" class="export-video-transparent-framing is-muted">
5856                    <div class="export-option-group">
5857                      <span class="export-label">Framing</span>
5858                      <div class="export-button-group">
5859                        <button type="button" data-export-transparent-framing="crop" class="export-option-btn active" data-tooltip="Trim empty pixels around the mesh — best for stickers and compositing">CROP TO ASSET</button>
5860                        <button type="button" data-export-transparent-framing="full" class="export-option-btn" data-tooltip="Keep the export canvas with transparent margins — best for overlays and motion graphics">FULL FRAME</button>
5861                      </div>
5862                    </div>
5863                  </div>
5864                  <div id="exportPngFolderSettings" class="export-png-folder is-muted">
5865                    <div class="export-option-group">
5866                      <span class="export-label">Output folder</span>
5867                      <div class="export-path-row">
5868                        <button type="button" id="exportPngFolderChoose" class="export-option-btn export-path-choose" data-tooltip="Choose a folder — frames write directly to disk (Chrome / Edge; Safari and Firefox use ZIP)">Choose…</button>
5869                        <span id="exportPngFolderLabel" class="export-path-label">No folder — downloads as ZIP</span>
5870                      </div>
5871                    </div>
5872                  </div>
5873                  <div id="exportMp4Settings" class="export-video-foldout export-video-foldout--borderless">
5874                    <div class="export-option-group">
5875                      <span class="export-label">Quality</span>
5876                      <div class="export-button-group export-button-group--triple">
5877                        <button data-video-mp4-quality="low" class="export-option-btn" data-tooltip="Smaller file, lower quality">LOW</button>
5878                        <button data-video-mp4-quality="medium" class="export-option-btn active" data-tooltip="Balanced quality and size">MEDIUM</button>
5879                        <button data-video-mp4-quality="high" class="export-option-btn" data-tooltip="Higher quality, larger file">HIGH</button>
5880                      </div>
5881                    </div>
5882                  </div>
5883                  <div id="exportVideoLengthGroup" class="export-option-group">
5884                    <span class="export-label">Length</span>
5885                    <div class="export-button-group export-button-group--triple">
5886                      <button data-video-duration="5" class="export-option-btn active" data-tooltip="5 second export duration">5s</button>
5887                      <button data-video-duration="10" class="export-option-btn" data-tooltip="10 second export duration">10s</button>
5888                      <button data-video-duration="15" class="export-option-btn" data-tooltip="15 second export duration">15s</button>
5889                    </div>
5890                    <span id="exportVideoLengthClipHint" class="export-length-clip-hint" hidden></span>
5891                  </div>
5892                  <div class="export-option-group">
5893                    <span class="export-label">FPS</span>
5894                    <div class="export-button-group export-button-group--triple">
5895                      <button data-video-fps="24" class="export-option-btn" data-tooltip="Cinematic motion">24</button>
5896                      <button data-video-fps="30" class="export-option-btn active" data-tooltip="Smoother standard video">30</button>
5897                      <button data-video-fps="60" class="export-option-btn" data-tooltip="Very smooth motion, larger files">60</button>
5898                    </div>
5899                  </div>
5900                  <div class="export-option-group">
5901                    <span class="export-label">Resolution</span>
5902                    <div class="export-button-group export-button-group--triple">
5903                      <button data-video-resolution="1080p" class="export-option-btn active" data-tooltip="1920 × 1080">1080p</button>
5904                      <button data-video-resolution="1440p" class="export-option-btn" data-tooltip="2560 × 1440">1440p</button>
5905                      <button data-video-resolution="2160p" class="export-option-btn" data-tooltip="3840 × 2160 (4K). Heavy encode; some browsers may fall back.">2160p</button>
5906                    </div>
5907                  </div>
5908                  <button
5909                    id="exportVideoCapturePreviewButton"
5910                    class="accent-action-btn"
5911                    data-tooltip="Render one offline frame at export resolution (same path as PNG encode). Uses preview scrub time when preview is active."
5912                  >
5913                    <i class="fa-solid fa-camera"></i>
5914                    Capture preview frame
5915                  </button>
5916                  <div class="export-capture-preview-thumb" id="exportCapturePreviewThumbWrap">
5917                    <div class="export-capture-preview-thumb-frame">
5918                      <img id="exportCapturePreviewThumb" alt="Last export capture preview" hidden />
5919                      <div class="export-capture-preview-thumb-empty" id="exportCapturePreviewThumbEmpty">
5920                        <i class="fa-solid fa-eye" aria-hidden="true"></i>
5921                        <span>Capture a preview frame to see it here</span>
5922                      </div>
5923                    </div>
5924                    <span class="export-capture-preview-thumb-label" id="exportCapturePreviewThumbLabel"></span>
5925                  </div>
5926                  <button id="exportVideoButton" class="accent-action-btn" data-tooltip="Export MP4 or PNG sequence. For long PNG exports, choose an output folder to write frames directly to disk.">
5927                    <i class="fa-solid fa-film"></i>
5928                    Export Video
5929                  </button>
5930                </div>
5931                </div>
5932              </div>
5933
5934              <div class="panel-block" data-export-section="watermark">
5935                <div class="block-title has-toggle">
5936                  <span>Logotype &amp; Credit</span>
5937                  <div style="display: flex; align-items: center; gap: 0.5rem;">
5938                    <button class="block-reset-btn" id="watermarkResetBtn" aria-label="Reset logotype and credit" data-tooltip="Reset logotype and credit settings">
5939                      <i class="fa-solid fa-rotate-left"></i>
5940                      <span class="sr-only">Reset</span>
5941                    </button>
5942                    <label class="effect-toggle" data-tooltip="Add a logotype and credit line to the viewport and exports">
5943                      <input type="checkbox" id="exportWatermarkSectionOpen" />
5944                      <span class="effect-indicator" aria-hidden="true"></span>
5945                      <span class="sr-only">Toggle logotype and credit</span>
5946                    </label>
5947                  </div>
5948                </div>
5949                <div
5950                  class="effect-foldout effect-foldout--collapsed effect-foldout--md"
5951                  data-export-foldout="watermark"
5952                  aria-hidden="true"
5953                >
5954                <div class="export-controls">
5955                  <div class="export-option-group">
5956                    <span class="export-label">Logotype</span>
5957                    <div class="export-button-group">
5958                      <button type="button" data-watermark-logo="orby" class="export-option-btn active" data-tooltip="Use the Orby mark">Orby</button>
5959                      <button type="button" id="watermarkCustomBtn" data-watermark-logo="custom" class="export-option-btn watermark-custom-btn" data-tooltip="Upload your own SVG logotype">Custom</button>
5960                    </div>
5961                    <input type="file" id="watermarkCustomFile" name="watermarkCustomFile" class="sr-only" accept=".svg,image/svg+xml" aria-label="Custom watermark SVG file" />
5962                  </div>
5963                  <label class="slider-line">
5964                    <span data-tooltip="Scale the logotype up or down">Logotype Scale</span>
5965                    <input id="watermarkLogoScale" type="range" min="50" max="200" step="1" value="100" />
5966                    <span class="value" data-output="watermarkLogoScale">100%</span>
5967                  </label>
5968                  <label class="color-line">
5969                    <span data-tooltip="Tint the logotype">Logotype Color</span>
5970                    <input type="color" id="watermarkLogoColor" class="color-chip" value="#c4ff00" />
5971                  </label>
5972                  <div class="export-option-group">
5973                    <span class="export-label">Placement</span>
5974                    <div class="export-button-group">
5975                      <button type="button" data-watermark-placement="left" class="export-option-btn active" data-tooltip="Logotype bottom-left, credit bottom-right">LEFT</button>
5976                      <button type="button" data-watermark-placement="right" class="export-option-btn" data-tooltip="Logotype bottom-right, credit bottom-left">RIGHT</button>
5977                    </div>
5978                  </div>
5979                  <div class="slider-line">
5980                    <span data-tooltip="Show a credit line on the opposite side of the logotype">Credit</span>
5981                    <label class="effect-toggle">
5982                      <input type="checkbox" id="watermarkCreditEnabled" />
5983                      <span class="effect-indicator" aria-hidden="true"></span>
5984                      <span class="sr-only">Toggle credit text</span>
5985                    </label>
5986                  </div>
5987                  <div class="effect-foldout effect-foldout--collapsed watermark-credit-foldout" data-watermark-credit-foldout hidden aria-hidden="true">
5988                    <input
5989                      type="text"
5990                      id="watermarkCredit"
5991                      class="watermark-credit-input"
5992                      maxlength="160"
5993                      placeholder="Credit, name, or © line"
5994                      value=""
5995                      autocomplete="off"
5996                      spellcheck="false"
5997                      aria-label="Credit text"
5998                      data-tooltip="Credit, name, or legal text shown opposite the logotype"
5999                    />
6000                    <label class="slider-line">
6001                      <span data-tooltip="Scale the credit text up or down">Credit Scale</span>
6002                      <input id="watermarkCreditScale" type="range" min="50" max="200" step="1" value="100" />
6003                      <span class="value" data-output="watermarkCreditScale">100%</span>
6004                    </label>
6005                    <label class="color-line">
6006                      <span data-tooltip="Credit text color">Credit Color</span>
6007                      <input type="color" id="watermarkCreditColor" class="color-chip" value="#ffffff" />
6008                    </label>
6009                  </div>
6010                </div>
6011                </div>
6012              </div>
6013
6014              <div class="info-version-tag">v0.5.1052 · 2026-10-02 19:44:45 UTC</div>
6015              <button type="button" class="info-orby-mark" data-tooltip="Home" aria-label="Home">
6016                <img src="./assets/images/favicon.svg" width="28" height="28" alt="" />
6017              </button>
6018            </section>
6019
6020            <section class="panel" data-panel="info">
6021              <!-- Logotype Animation -->
6022              <div class="info-logotype-container">
6023                <div id="infoLogotypeAnimation" class="info-logotype"></div>
6024              </div>
6025
6026              <div class="panel-block info-panel-block info-panel-block--compact bug-report-panel-block" id="info-bug-report">
6027                <div class="block-title">
6028                  <i class="fa-solid fa-circle-exclamation" style="display: inline-block; vertical-align: -0.125em; margin-right: 0.5rem; color: var(--accent);"></i>
6029                  Report An Issue
6030                </div>
6031                <p class="bug-report-panel-description">
6032                  Spotted something wrong? Use the quick form here or the full
6033                  <a href="./support/#report-issue" class="about-highlight" target="_blank" rel="noopener noreferrer">Support page</a>
6034                  for troubleshooting and reports. We can’t reply, but we read everything you send.
6035                </p>
6036                <button type="button" class="bug-report-panel-open accent-action-btn" data-bug-report-open>
6037                  <i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
6038                  Tell us what happened
6039                </button>
6040              </div>
6041
6042              <div class="panel-block info-panel-block info-panel-block--compact" id="info-sounds">
6043                <div class="block-title has-toggle">
6044                  <span>
6045                    <i class="fa-solid fa-volume-high" style="display: inline-block; vertical-align: -0.125em; margin-right: 0.5rem; color: var(--accent);"></i>
6046                    UI Sounds
6047                  </span>
6048                  <div style="display: flex; align-items: center; gap: 0.5rem;">
6049                    <label class="effect-toggle">
6050                      <input type="checkbox" id="uiSoundsEnabled" checked />
6051                      <span class="effect-indicator" aria-hidden="true"></span>
6052                      <span class="sr-only">UI sounds on</span>
6053                    </label>
6054                  </div>
6055                </div>
6056                <label class="slider-line">
6057                  <span>Volume</span>
6058                  <input
6059                    id="uiSoundsVolume"
6060                    type="range"
6061                    min="0"
6062                    max="100"
6063                    step="1"
6064                    value="100"
6065                  />
6066                  <span class="value" data-output="uiSoundsVolume">100%</span>
6067                </label>
6068              </div>
6069
6070              <div
6071                id="infoPanelProseMount"
6072                class="info-panel-prose-mount"
6073                hidden
6074                aria-busy="true"
6075                aria-live="polite"
6076              ></div>
6077
6078
6079              <div class="info-version-tag">v0.5.1052 · 2026-10-02 19:44:45 UTC</div>
6080              <button type="button" class="info-orby-mark" data-tooltip="Home" aria-label="Home">
6081                <img src="./assets/images/favicon.svg" width="28" height="28" alt="" />
6082              </button>
6083            </section>
6084
6085          </div>
6086            <div class="shelf-scrollbar" aria-hidden="true">
6087              <div class="shelf-scrollbar-thumb"></div>
6088            </div>
6089          </div>
6090          <div
6091            id="exportVideoPreviewDock"
6092            class="export-video-preview-dock"
6093            hidden
6094            aria-hidden="true"
6095          >
6096            <div class="export-video-preview-dock__inner">
6097              <div class="block-title export-section-title">Preview</div>
6098              <div class="animation-timeline">
6099                <div class="animation-controls">
6100                  <div class="animation-transport-btns">
6101                    <button
6102                      id="exportPreviewPlayPause"
6103                      type="button"
6104                      class="animation-play-btn"
6105                      disabled
6106                      aria-label="Play export preview"
6107                      data-tooltip="Play export movement preview in the viewport"
6108                    >
6109                      <i class="fa-solid fa-play" aria-hidden="true"></i>
6110                      <span class="sr-only">Play</span>
6111                    </button>
6112                    <button
6113                      id="exportPreviewReset"
6114                      type="button"
6115                      class="animation-play-btn"
6116                      disabled
6117                      aria-label="Stop preview and return to start"
6118                      data-tooltip="End preview, return to frame 0, and restore camera orbit"
6119                    >
6120                      <i class="fa-solid fa-rotate-left" aria-hidden="true"></i>
6121                      <span class="sr-only">Stop preview</span>
6122                    </button>
6123                  </div>
6124                  <input
6125                    type="range"
6126                    id="exportPreviewScrub"
6127                    min="0"
6128                    max="1"
6129                    step="0.001"
6130                    value="0"
6131                    disabled
6132                    aria-label="Export preview timeline"
6133                  />
6134                  <span id="exportPreviewTime">00:00</span>
6135                </div>
6136              </div>
6137              <div class="export-preview-pause-all-row">
6138                <button
6139                  type="button"
6140                  id="exportPreviewPauseAll"
6141                  class="ghost-btn small"
6142                  disabled
6143                  data-tooltip="Freeze export preview motion (camera, turntable, GLB), 3D type reveal/constant loops, and animated Shader Lab presets (Flow Field, Plasma, etc.). Stays in sync with Object → Pause shader animations. Press again to resume."
6144                >
6145                  Pause all animations
6146                </button>
6147              </div>
6148            </div>
6149          </div>
6150        </aside>
6151      </main>
6152    </div>
6153
6154    <template id="isometricToastTemplate">
6155      <div class="toast-isometric-cluster">
6156        <div
6157          class="toast toast--persistent toast--isometric-hint"
6158          role="status"
6159          aria-live="polite"
6160          data-toast-icon="info"
6161        >
6162          <span class="toast-icon toast-icon--info" aria-hidden="true">
6163            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
6164              <circle cx="9" cy="9" r="9" fill="currentColor"/>
6165              <path d="M9 8.1V12.15" stroke="var(--orby-black)" stroke-width="1.65" stroke-linecap="round"/>
6166              <circle cx="9" cy="5.55" r="0.9" fill="var(--orby-black)"/>
6167            </svg>
6168          </span>
6169          <span class="toast-message">
6170            Isometric Camera <span class="toast-status-on">ON</span>
6171            <span class="toast-isometric-sep" aria-hidden="true"> — </span>
6172            <span class="toast-isometric-detail">Camera Pan locked</span>
6173          </span>
6174          <button type="button" class="toast-dismiss close-btn" aria-label="Dismiss"></button>
6175        </div>
6176        <button type="button" class="toast-isometric-unlock-btn orby-pill-btn orby-pill-btn--accent">
6177          Unlock Camera Pan
6178        </button>
6179      </div>
6180    </template>
6181
6182    <template id="toastTemplate">
6183      <div class="toast" role="status" aria-live="polite">
6184        <span class="toast-icon toast-icon--success" aria-hidden="true">
6185          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
6186            <circle cx="9" cy="9" r="9" fill="currentColor"/>
6187            <path d="M5.25 9.15L7.65 11.55L12.75 6.45" stroke="var(--orby-black)" stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round"/>
6188          </svg>
6189        </span>
6190        <span class="toast-icon toast-icon--info" aria-hidden="true">
6191          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
6192            <circle cx="9" cy="9" r="9" fill="currentColor"/>
6193            <path d="M9 8.1V12.15" stroke="var(--orby-black)" stroke-width="1.65" stroke-linecap="round"/>
6194            <circle cx="9" cy="5.55" r="0.9" fill="var(--orby-black)"/>
6195          </svg>
6196        </span>
6197        <span class="toast-message"></span>
6198      </div>
6199    </template>
6200
6201    
6201<script type="importmap">
6202      {
6203        "imports": {
6204          "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
6205          "opentype": "./scripts/vendor/opentype.module.js",
6206          "three/examples/jsm/postprocessing/Pass.js": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/Pass.js",
6207          "three/examples/jsm/objects/Reflector.js": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/objects/Reflector.js",
6208          "postprocessing": "https://cdn.jsdelivr.net/npm/[email protected]/build/index.js",
6209          "n8ao": "https://cdn.jsdelivr.net/npm/[email protected]/dist/N8AO.js",
6210          "gsap": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
6211          "gsap/ScrollTrigger": "https://cdn.jsdelivr.net/npm/[email protected]/ScrollTrigger.js"
6212        }
6213      }
6214    </script>
6214
6215    
6215<script type="module" src="./scripts/entry.js?v=0.5.1052"></script>
6215
6216    
6217    <!-- Long messages: stay open until OK (e.g. unsupported USDZ); short text still uses toast -->
6218    <div
6219      id="messageAlertModal"
6220      class="load-settings-modal message-alert-modal"
6221      style="display: none;"
6222      role="dialog"
6223      aria-modal="true"
6224      aria-labelledby="messageAlertTitle"
6225    >
6226      <div class="load-settings-content message-alert-content">
6227        <div class="load-settings-header">
6228          <h3 id="messageAlertTitle">Message</h3>
6229          <button type="button" id="messageAlertClose" class="close-btn" aria-label="Close"></button>
6230        </div>
6231        <p id="messageAlertBody" class="message-alert-body"></p>
6232        <div class="load-settings-actions message-alert-actions" id="messageAlertActions">
6233          <button type="button" id="messageAlertCancel" class="ghost-btn" hidden>
6234            No
6235          </button>
6236          <button type="button" id="messageAlertOk" class="accent-action-btn">OK</button>
6237        </div>
6238      </div>
6239    </div>
6240
6241    <!-- Paste scene settings modal (JSON) -->
6242    <div id="loadSceneSettingsModal" class="load-settings-modal" style="display: none;">
6243      <div class="load-settings-content">
6244        <div class="load-settings-header">
6245          <h3>Paste Scene Settings</h3>
6246          <button type="button" id="closeLoadSceneSettings" class="close-btn" aria-label="Close"></button>
6247        </div>
6248        <p class="load-settings-description">Paste your scene settings JSON below and click Apply. This includes all visual settings: lighting, camera position and angle, post-processing, materials, and object transforms (scale, position, rotation).</p>
6249        <label class="sr-only" for="loadSceneSettingsText">Scene settings JSON</label>
6250        <textarea
6251          id="loadSceneSettingsText"
6252          placeholder="Paste scene settings JSON here..."
6253          rows="10"
6254          aria-label="Scene settings JSON"
6255        ></textarea>
6256        <div class="load-settings-actions">
6257          <button id="applySceneSettings" class="ghost-btn">
6258            Apply
6259          </button>
6260          <button id="cancelLoadSceneSettings" class="ghost-btn">
6261            Cancel
6262          </button>
6263        </div>
6264      </div>
6265    </div>
6266
6267    <div id="bugReportModal" class="load-settings-modal bug-report-modal" style="display: none;">
6268      <div class="load-settings-content bug-report-content">
6269        <div class="load-settings-header">
6270          <h3>Report an issue</h3>
6271          <button type="button" id="closeBugReport" class="close-btn" aria-label="Close"></button>
6272        </div>
6273        <p class="load-settings-description">
6274          Tell me what’s happening. I read every report and appreciate the detail. If you can, use <span class="bug-report-intro-emphasis">Copy Scene Settings</span> from the menu and paste it into Details — that helps pinpoint the issue. <span class="bug-report-intro-emphasis">I don’t collect contact details</span>, so I can’t reply, but every submission is read.
6275        </p>
6276        <form id="bugReportForm">
6277          <div class="bug-report-field">
6278            <span id="bugReportCategoryLabel" class="bug-report-field-label">Category</span>
6279            <div class="bug-report-combo" id="bugReportCategoryCombo">
6280              <input type="hidden" name="category" id="bugReportCategory" value="rendering" required />
6281              <button
6282                type="button"
6283                id="bugReportCategoryTrigger"
6284                class="bug-report-combo-trigger"
6285                aria-haspopup="listbox"
6286                aria-expanded="false"
6287                aria-controls="bugReportCategoryListbox"
6288                aria-labelledby="bugReportCategoryLabel"
6289              >
6290                <span class="bug-report-combo-trigger-text" id="bugReportCategoryTriggerText"
6291                  >Rendering / Display</span
6292                >
6293              </button>
6294              <ul
6295                id="bugReportCategoryListbox"
6296                class="bug-report-combo-listbox"
6297                role="listbox"
6298                tabindex="-1"
6299                aria-labelledby="bugReportCategoryLabel"
6300                hidden
6301              >
6302                <li role="option" data-value="crash" class="bug-report-combo-option" aria-selected="false" tabindex="-1">
6303                  Crash / Freeze
6304                </li>
6305                <li role="option" data-value="rendering" class="bug-report-combo-option" aria-selected="true" tabindex="-1">
6306                  Rendering / Display
6307                </li>
6308                <li
6309                  role="option"
6310                  data-value="loaded-mesh-materials"
6311                  class="bug-report-combo-option"
6312                  aria-selected="false"
6313                  tabindex="-1"
6314                >
6315                  Loaded Mesh / Materials
6316                </li>
6317                <li role="option" data-value="ui" class="bug-report-combo-option" aria-selected="false" tabindex="-1">
6318                  UI / Controls
6319                </li>
6320                <li role="option" data-value="export" class="bug-report-combo-option" aria-selected="false" tabindex="-1">
6321                  Export
6322                </li>
6323                <li role="option" data-value="performance" class="bug-report-combo-option" aria-selected="false" tabindex="-1">
6324                  Performance
6325                </li>
6326                <li role="option" data-value="other" class="bug-report-combo-option" aria-selected="false" tabindex="-1">
6327                  Other
6328                </li>
6329              </ul>
6330            </div>
6331          </div>
6332          <div class="bug-report-field bug-report-field-severity">
6333            <span id="bugReportSeverityLabel" class="bug-report-field-label">Severity</span>
6334            <div class="bug-report-severity-combo" id="bugReportSeverityCombo">
6335              <input type="hidden" name="severity" id="bugReportSeverity" value="moderate" />
6336              <button
6337                type="button"
6338                id="bugReportSeverityTrigger"
6339                class="bug-report-severity-trigger"
6340                aria-haspopup="listbox"
6341                aria-expanded="false"
6342                aria-controls="bugReportSeverityListbox"
6343                aria-labelledby="bugReportSeverityLabel"
6344              >
6345                <span class="bug-report-severity-trigger-inner">
6346                  <span class="bug-report-severity-dot" data-severity="moderate" aria-hidden="true"></span>
6347                  <span class="bug-report-severity-trigger-text" id="bugReportSeverityTriggerText"
6348                    ><span class="bug-report-severity-level">Moderate</span
6349                    ><span class="bug-report-severity-desc"> — Noticeable issue</span></span
6350                  >
6351                </span>
6352              </button>
6353              <ul
6354                id="bugReportSeverityListbox"
6355                class="bug-report-severity-listbox"
6356                role="listbox"
6357                tabindex="-1"
6358                aria-labelledby="bugReportSeverityLabel"
6359                hidden
6360              >
6361                <li role="option" data-value="cosmetic" class="bug-report-severity-list-option" aria-selected="false" tabindex="-1">
6362                  <span class="bug-report-severity-dot" data-severity="cosmetic" aria-hidden="true"></span>
6363                  <span class="bug-report-severity-label"
6364                    ><span class="bug-report-severity-level">Low</span
6365                    ><span class="bug-report-severity-desc"> — Visual issue or polish</span></span
6366                  >
6367                </li>
6368                <li role="option" data-value="minor" class="bug-report-severity-list-option" aria-selected="false" tabindex="-1">
6369                  <span class="bug-report-severity-dot" data-severity="minor" aria-hidden="true"></span>
6370                  <span class="bug-report-severity-label"
6371                    ><span class="bug-report-severity-level">Minor</span
6372                    ><span class="bug-report-severity-desc"> — Minor glitch</span></span
6373                  >
6374                </li>
6375                <li role="option" data-value="moderate" class="bug-report-severity-list-option" aria-selected="true" tabindex="-1">
6376                  <span class="bug-report-severity-dot" data-severity="moderate" aria-hidden="true"></span>
6377                  <span class="bug-report-severity-label"
6378                    ><span class="bug-report-severity-level">Moderate</span
6379                    ><span class="bug-report-severity-desc"> — Noticeable issue</span></span
6380                  >
6381                </li>
6382                <li role="option" data-value="major" class="bug-report-severity-list-option" aria-selected="false" tabindex="-1">
6383                  <span class="bug-report-severity-dot" data-severity="major" aria-hidden="true"></span>
6384                  <span class="bug-report-severity-label"
6385                    ><span class="bug-report-severity-level">Major</span
6386                    ><span class="bug-report-severity-desc"> — Important feature broken</span></span
6387                  >
6388                </li>
6389                <li role="option" data-value="blocker" class="bug-report-severity-list-option" aria-selected="false" tabindex="-1">
6390                  <span class="bug-report-severity-dot" data-severity="blocker" aria-hidden="true"></span>
6391                  <span class="bug-report-severity-label"
6392                    ><span class="bug-report-severity-level">
6392Blocker</span
6393                    ><span class="bug-report-severity-desc"> — Can’t use the app or it crashes</span></span
6394                  >
6395                </li>
6396              </ul>
6397            </div>
6398          </div>
6399          <div class="bug-report-field">
6400            <label for="bugReportMessage" id="bugReportMessageLabel">Details</label>
6401            <div class="bug-report-message-block">
6402              <div class="bug-report-message-stage">
6403                <textarea
6404                  id="bugReportMessage"
6405                  class="bug-report-message-textarea"
6406                  name="message"
6407                  rows="6"
6408                  maxlength="8000"
6409                  required
6410                  placeholder="About 5+ words: steps to reproduce, browser/OS, what you expected… Paste Copy Scene Settings here if you can."
6411                  aria-labelledby="bugReportMessageLabel"
6412                ></textarea>
6413                <div class="bug-report-message-sending-overlay" hidden aria-hidden="true">
6414                  <div class="bug-report-message-sending-bar-track">
6415                    <div class="bug-report-message-sending-bar-fill"></div>
6416                  </div>
6417                </div>
6418              </div>
6419              <div
6420                class="bug-report-word-meter"
6421                id="bugReportWordMeter"
6422                role="progressbar"
6423                aria-valuemin="0"
6424                aria-valuemax="5"
6425                aria-valuenow="0"
6426                aria-label="Words of detail"
6427              >
6428                <div class="bug-report-word-meter-fill" id="bugReportWordMeterFill"></div>
6429              </div>
6430            </div>
6431          </div>
6432          <input
6433            type="text"
6434            name="honeypot"
6435            class="sr-only"
6436            tabindex="-1"
6437            autocomplete="off"
6438            aria-hidden="true"
6439          />
6440          <p class="bug-report-status" aria-live="polite">
6441            <span class="bug-report-status-text"></span>
6442          </p>
6443          <div class="load-settings-actions bug-report-actions">
6444            <button
6445              type="button"
6446              id="cancelBugReport"
6447              class="orby-magic-btn orby-magic-btn--on-dark orby-magic-btn--outline-dark bug-report-action-btn"
6448            >
6449              <span class="orby-magic-btn__ring" aria-hidden="true"></span>
6450              <span class="orby-magic-btn__inner">
6451                <span class="orby-magic-btn__label">Cancel</span>
6452                <span class="orby-magic-btn__arrow" aria-hidden="true"
6453                  ><svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"
6454                    ><path
6455                      d="M3.5 8h9M9 4.5L12.5 8 9 11.5"
6456                      stroke="currentColor"
6457                      stroke-width="1.75"
6458                      stroke-linecap="round"
6459                      stroke-linejoin="round" /></svg
6460                ></span>
6461              </span>
6462            </button>
6463            <span class="bug-report-submit-wrap" id="bugReportSubmitWrap">
6464              <button
6465                type="submit"
6466                id="submitBugReport"
6467                class="orby-magic-btn orby-magic-btn--on-dark orby-magic-btn--outline-dark bug-report-action-btn"
6468              >
6469                <span class="orby-magic-btn__ring" aria-hidden="true"></span>
6470                <span class="orby-magic-btn__inner">
6471                  <span class="orby-magic-btn__label">Send</span>
6472                  <span class="orby-magic-btn__arrow" aria-hidden="true"
6473                    ><svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"
6474                      ><path
6475                        d="M3.5 8h9M9 4.5L12.5 8 9 11.5"
6476                        stroke="currentColor"
6477                        stroke-width="1.75"
6478                        stroke-linecap="round"
6479                        stroke-linejoin="round" /></svg
6480                  ></span>
6481                </span>
6482              </button>
6483            </span>
6484          </div>
6485        </form>
6486      </div>
6487    </div>
6488
6489    <!-- Same full-screen treatment as bug-report thank-you (brand headline font, blur scrim, fade-up) -->
6490    <div
6491      id="orbyFullscreenPrompt"
6492      class="bug-report-thank-you-layer"
6493      hidden
6494      aria-hidden="true"
6495      role="alertdialog"
6496      aria-modal="true"
6497      aria-labelledby="orbyFullscreenPromptMessage"
6498    >
6499      <div class="bug-report-thank-you-stack orby-fullscreen-prompt-stack" id="orbyFullscreenPromptStack">
6500        <p class="bug-report-thank-you-message" id="orbyFullscreenPromptMessage"></p>
6501        <div class="orby-fullscreen-prompt-actions" id="orbyFullscreenPromptActions">
6502          <button
6503            type="button"
6504            id="orbyFullscreenPromptNo"
6505            class="orby-magic-btn orby-magic-btn--on-dark orby-magic-btn--outline-dark"
6506          >
6507            <span class="orby-magic-btn__ring" aria-hidden="true"></span>
6508            <span class="orby-magic-btn__inner">
6509              <span class="orby-magic-btn__label">Stay</span>
6510              <span class="orby-magic-btn__arrow" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 8h9M9 4.5L12.5 8 9 11.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
6511            </span>
6512          </button>
6513          <button
6514            type="button"
6515            id="orbyFullscreenPromptYes"
6516            class="orby-magic-btn orby-magic-btn--on-dark orby-magic-btn--outline-dark"
6517          >
6518            <span class="orby-magic-btn__ring" aria-hidden="true"></span>
6519            <span class="orby-magic-btn__inner">
6520              <span class="orby-magic-btn__label">Go Home</span>
6521              <span class="orby-magic-btn__arrow" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 8h9M9 4.5L12.5 8 9 11.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
6522            </span>
6523          </button>
6524        </div>
6525      </div>
6526    </div>
6527
6528    <div id="bugReportThankYouLayer" class="bug-report-thank-you-layer" hidden aria-hidden="true" role="status">
6529      <div class="bug-report-thank-you-stack" id="bugReportThankYouStack">
6530        <p class="bug-report-thank-you-message" id="bugReportThankYouMessage"></p>
6531        <button
6532          type="button"
6533          id="bugReportThankYouOk"
6534          class="orby-magic-btn orby-magic-btn--on-dark orby-magic-btn--outline-dark"
6535        >
6536          <span class="orby-magic-btn__ring" aria-hidden="true"></span>
6537          <span class="orby-magic-btn__inner">
6538            <span class="orby-magic-btn__label">Keep Orbing</span>
6539            <span class="orby-magic-btn__arrow" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 8h9M9 4.5L12.5 8 9 11.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
6540          </span>
6541        </button>
6542      </div>
6543    </div>
6544    <div
6545      id="orby-turnstile-host"
6546      class="orby-turnstile-host"
6547      hidden
6548      aria-hidden="true"
6549      aria-label="Security check"
6550    ></div>
6551  </body>
6552</html>
6553

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.