PageSourceSearch

https://mariogagliardi.com/spaces

html mariogagliardi.com collected 2026-10-03 01:38:48 UTC 75,793 bytes, 2,076 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" class="no-js">
3<head>
4  <link rel="icon" href="favicon.ico" sizes="any">
5  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
6  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
7  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
8  <link rel="manifest" href="site.webmanifest">
9  <meta charset="UTF-8" />
10  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
11  <title>Interior Design &amp; Narrative Spaces | Mario Gagliardi</title>
12  <meta name="description" content="Explore interiors and narrative spaces by Mario Gagliardi Design, connecting material, atmosphere, culture and lived experience.">
13  <meta name="author" content="Mario Gagliardi Design">
14  <meta name="robots" content="index, follow">
15  <link rel="canonical" href="https://mariogagliardi.com/spaces">
16  <meta property="og:type" content="website">
17  <meta property="og:site_name" content="Mario Gagliardi Design">
18  <meta property="og:title" content="Interior Design &amp; Narrative Spaces | Mario Gagliardi">
19  <meta property="og:description" content="Interiors and narrative spaces by Mario Gagliardi Design.">
20  <meta property="og:url" content="https://mariogagliardi.com/spaces">
21  <meta property="og:image" content="https://mariogagliardi.com/MGlogo.png">
22  <meta name="twitter:card" content="summary">
23  
23<script>
24    if (new URLSearchParams(window.location.search).get("embed") === "hero-background") {
25      document.documentElement.classList.add("designscape-hero-embed");
26    }
27  </script>
27
28  
28<script type="application/ld+json">
29    {
30      "@context": "https://schema.org",
31      "@type": "CollectionPage",
32      "@id": "https://mariogagliardi.com/spaces#page",
33      "url": "https://mariogagliardi.com/spaces",
34      "name": "Interior Design and Narrative Spaces",
35      "description": "Interiors and narrative spaces by Mario Gagliardi Design.",
36      "isPartOf": { "@id": "https://mariogagliardi.com/#website" },
37      "about": { "@type": "Service", "name": "Interior Design" }
38    }
39  </script>
39
40  <link rel="preload" href="./Att.woff2" as="font" type="font/woff2" crossorigin>
41  <link rel="preload" href="./LavigneDisplay-Light.woff2" as="font" type="font/woff2" crossorigin>
42  <link rel="preload" href="./rotate-cursor.png?v=20260806-2" as="image" type="image/png">
43  <link href="nav.css" rel="stylesheet" type="text/css" />
44  <link href="indextest-nav.css?v=20260721-mobile-icons2" rel="stylesheet" type="text/css" />
45  <link href="sound-toggle.css" rel="stylesheet" type="text/css" />
46  <link rel="stylesheet" href="page-transitions.css">
47  <style>
48    :root {
49      font-size: 12px;
50      --page-background: #f5f2ef;
51      --text-color: #111;
52      --muted: rgba(0, 0, 0, 1);
53      --line: rgba(0, 0, 0, 0.12);
54      --ease: cubic-bezier(.22,.61,.36,1);
55      --container-idle-gradient: radial-gradient(circle at top, rgba(255, 255, 255, 0.55), transparent 45%);
56      --focus-ui-color: #111;
57      --focus-ui-muted: rgba(0, 0, 0, 0.92);
58      --focus-button-bg: rgba(255, 255, 255, 0.72);
59      --focus-button-border: rgba(255, 255, 255, 0.92);
60      --focus-link-bg: rgba(255, 255, 255, 0.24);
61      --focus-link-border: rgba(255, 255, 255, 0.92);
62    }
63
64    *,
65    *::before,
66    *::after {
67      box-sizing: border-box;
68    }
69
70    html,
71    body {
72      width: 100%;
73      height: 100%;
74      margin: 0;
75      background: var(--page-background);
76      color: var(--text-color);
77      overflow: hidden;
78      overscroll-behavior: none;
79      -webkit-font-smoothing: antialiased;
80      -moz-osx-font-smoothing: grayscale;
81      touch-action: none;
82    }
83
84    body {
85    
86      font-family: "Lav", "Nord";
87   
88      background-repeat: repeat;
89      background-attachment: fixed;
90    }
91
92    main {
93      position: relative;
94      width: 100%;
95      height: 100%;
96      isolation: isolate;
97    }
98
99    #THREE-CONTAINER,
100    #app {
101      position: absolute;
102      inset: 0;
103      overflow: hidden;
104      background-image: var(--container-idle-gradient);
105    }
106
107    canvas {
108      position: absolute;
109      inset: 0;
110      display: block;
111      width: 100%;
112      height: 100%;
113      cursor: grab;
114      touch-action: none;
115    }
116
117    canvas.is-dragging {
118      cursor: grabbing;
119    }
120
121    .page-meta {
122      position: fixed;
123      z-index: 15;
124      pointer-events: none;
125      user-select: none;
126    }
127
128    .page-meta {
129      left: 1rem;
130      bottom: 1rem;
131      padding: 0.45rem 0.7rem;
132      border-radius: 999px;
133      background: rgba(255, 255, 255, 0.62);
134      backdrop-filter: blur(12px);
135      letter-spacing: 0.08em;
136      text-transform: uppercase;
137      font-size: 0.72rem;
138      font-family: "Nord", Arial, Helvetica, sans-serif;
139    }
140
141    .slow-load-indicator {
142      position: fixed;
143      left: 1rem;
144      bottom: 1rem;
145      z-index: 18;
146      display: inline-flex;
147      align-items: center;
148      gap: 0.45rem;
149      min-height: 34px;
150      padding: 0.48rem 0.68rem;
151      border: 1px solid rgba(0, 0, 0, 0.16);
152      border-radius: 999px;
153      background: rgba(255, 255, 255, 0.76);
154      color: rgba(0, 0, 0, 0.72);
155      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
156      backdrop-filter: blur(14px);
157      font-family: "Nord", Arial, Helvetica, sans-serif;
158      font-size: 10px;
159      line-height: 1;
160      letter-spacing: 0.12em;
161      text-transform: uppercase;
162      font-variant-numeric: tabular-nums;
163      opacity: 0;
164      visibility: hidden;
165      pointer-events: none;
166      user-select: none;
167      transition: opacity 0.24s ease, visibility 0s linear 0.24s;
168    }
169
170    .slow-load-indicator.is-visible {
171      opacity: 1;
172      visibility: visible;
173      transition: opacity 0.24s ease;
174    }
175
176    .slow-load-indicator__divider {
177      color: rgba(0, 0, 0, 0.32);
178    }
179
180    .designscape-label-layer {
181      position: absolute;
182      inset: 0;
183      z-index: 12;
184      overflow: hidden;
185      pointer-events: none;
186    }
187
188    .designscape-label {
189      position: absolute;
190      left: 0;
191      top: 0;
192      min-width: 88px;
193      max-width: min(230px, 46vw);
194      padding: 0.46rem 0.62rem 0.5rem;
195      border: 1px solid rgba(255, 255, 255, 0.7);
196      border-radius: 999px;
197      background: rgba(255, 255, 255, 0.74);
198      box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
199      backdrop-filter: blur(14px);
200      color: rgba(0, 0, 0, 0.82);
201      font-family: "Nord", Arial, Helvetica, sans-serif;
202      line-height: 1;
203      text-align: center;
204      opacity: 0;
205      visibility: hidden;
206      white-space: nowrap;
207      will-change: transform, opacity;
208      pointer-events: auto;
209      cursor: pointer;
210      transition:
211        background 0.22s ease,
212        border-color 0.22s ease,
213        color 0.22s ease,
214        box-shadow 0.22s ease;
215    }
216
217    .designscape-no-label-selection .designscape-label,
218    .designscape-no-label-selection .designscape-label * {
219      user-select: none;
220      -webkit-user-select: none;
221      -ms-user-select: none;
222      -webkit-touch-callout: none;
223      -webkit-tap-highlight-color: transparent;
224    }
225
226    .designscape-label.is-hovered {
227      border-color: rgba(0, 0, 0, 0.88);
228      background: rgba(0, 0, 0, 0.88);
229      color: #fff;
230      box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
231    }
232
233    .designscape-label__kicker,
234    .designscape-label__title {
235      display: block;
236      overflow: hidden;
237      text-overflow: ellipsis;
238    }
239
240    .designscape-label__kicker {
241      margin-bottom: 0.18rem;
242      font-size: 0.58rem;
243      letter-spacing: 0.15em;
244      text-transform: uppercase;
245      color: rgba(0, 0, 0, 0.48);
246    }
247
248    .designscape-label.is-hovered .designscape-label__kicker {
249      color: rgba(255, 255, 255, 0.68);
250    }
251
252    .designscape-label__title {
253      font-size: 0.84rem;
254      letter-spacing: 0.02em;
255      text-transform: uppercase;
256    }
257    @media (max-width: 900px) {
258      .designscape-label {
259        min-width: 54px;
260        max-width: min(145px, 34vw);
261        padding: 0.24rem 0.36rem 0.28rem;
262        border-width: 1px;
263        background: rgba(255, 255, 255, 0.68);
264        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
265        backdrop-filter: blur(10px);
266      }
267
268      .designscape-label__kicker {
269        margin-bottom: 0.08rem;
270        font-size: 0.42rem;
271        letter-spacing: 0.08em;
272      }
273
274      .designscape-label__title {
275        font-size: 0.62rem;
276        letter-spacing: 0;
277      }
278    }
279
280    .designscape-startup-tip {
281      position: fixed;
282      left: 50%;
283      top: 50%;
284      z-index: 45;
285      display: block;
286      width: min(215px, calc((100vw - 48px) * 0.5));
287      padding: 0;
288      border: 0;
289      border-radius: 10px;
290      background: transparent;
291      transform: translate(-50%, -50%);
292      filter: drop-shadow(0 22px 58px rgba(0, 0, 0, 0.28));
293      pointer-events: none;
294      opacity: 0;
295      visibility: hidden;
296      overflow: hidden;
297    }
298
299    .designscape-startup-tip > img {
300      display: block;
301      width: 100%;
302      height: auto;
303      border-radius: inherit;
304    }
305	  
306
307
308    .designscape-mobile-tip {
309      --mobile-onboarding-background: rgba(234,238,237,0.9);
310      --mobile-onboarding-radius: 12px;
311      --mobile-onboarding-svg-size: 58px;
312      --mobile-onboarding-transition-duration: 420ms;
313      --mobile-onboarding-fade-in-duration: 260ms;
314      --mobile-onboarding-fade-out-duration: 620ms;
315      --mobile-onboarding-icon-motion-duration: 1500ms;
316      width: min(220px, calc(100vw - 54px));
317      min-height: 174px;
318      padding: 22px 18px 20px;
319      border-radius: var(--mobile-onboarding-radius);
320      background: var(--mobile-onboarding-background);
321      backdrop-filter: blur(6px);
322      -webkit-backdrop-filter: blur(6px);
323      display: grid;
324      place-items: center;
325      transform: translate(-50%, -50%) scale(.96);
326      transition:
327        opacity var(--mobile-onboarding-fade-out-duration) var(--ease),
328        transform var(--mobile-onboarding-transition-duration) var(--ease),
329        visibility 0s linear var(--mobile-onboarding-fade-out-duration);
330    }
331
332    .designscape-mobile-tip.is-visible {
333      opacity: 1;
334      visibility: visible;
335      transform: translate(-50%, -50%) scale(1);
336      transition:
337        opacity var(--mobile-onboarding-fade-in-duration) var(--ease),
338        transform var(--mobile-onboarding-transition-duration) var(--ease);
339    }
340
341    .mobile-onboarding-stage {
342      position: absolute;
343      inset: 20px 18px;
344      display: flex;
345      flex-direction: column;
346      align-items: center;
347      justify-content: center;
348      gap: 14px;
349      opacity: 0;
350      transform: translateY(8px) scale(.97);
351      transition:
352        opacity var(--mobile-onboarding-transition-duration) var(--ease),
353        transform var(--mobile-onboarding-transition-duration) var(--ease);
354    }
355
356    .mobile-onboarding-stage.is-active {
357      opacity: 1;
358      transform: translateY(0) scale(1);
359    }
360
361    .mobile-onboarding-text {
362      margin: 0;
363      font-family: "Nord", Arial, Helvetica, sans-serif;
364      font-size: 12px;
365      line-height: 1.18;
366      letter-spacing: .08em;
367      text-align: center;
368      color: #000;
369      text-shadow: none;
370    }
371
372    .mobile-onboarding-icon {
373      display: block;
374      width: var(--mobile-onboarding-svg-size);
375      height: var(--mobile-onboarding-svg-size);
376      object-fit: contain;
377      filter: brightness(0) drop-shadow(0 8px 18px rgba(0,0,0,.08));
378    }
379
380    .mobile-onboarding-stage.is-active .mobile-onboarding-icon--swipe {
381      animation: mobileOnboardingSwipe var(--mobile-onboarding-icon-motion-duration) var(--ease) infinite;
382    }
383
384    .mobile-onboarding-stage.is-active .mobile-onboarding-icon--tap {
385      animation: mobileOnboardingTap var(--mobile-onboarding-icon-motion-duration) var(--ease) infinite;
386    }
387
388    @keyframes mobileOnboardingSwipe {
389      0%, 100% { transform: translateX(-5px); }
390      50% { transform: translateX(5px); }
391    }
392
393    @keyframes mobileOnboardingTap {
394      0%, 100% { transform: translateY(-2px); }
395      50% { transform: translateY(6px); }
396    }
397
398    .space-cursor {
399      --space-cursor-color: rgba(120,120,120,.42);
400      --space-cursor-expanded-background: rgba(120,120,120,.34);
401      --space-cursor-collapsed-size: 18px;
402      --space-cursor-expanded-size: 130px;
403      --space-cursor-shell-collapsed-scale: 0.138462;
404      --space-cursor-shell-scale: var(--space-cursor-shell-collapsed-scale);
405      --space-cursor-shell-background: var(--space-cursor-color);
406      --space-cursor-shell-shadow: 0 0 2px 1px rgba(255,255,255,.24) inset, 0 0 10px 4px rgba(255,255,255,.13) inset, 0 8px 24px rgba(17,17,26,.16), 0 16px 56px rgba(17,17,26,.08), 0 4px 16px rgba(17,17,26,.08) inset;
407      --space-cursor-svg-size: 72px;
408      --space-cursor-transition-duration: 420ms;
409      --space-cursor-icon-motion-duration: 1500ms;
410      position: fixed;
411      left: 0;
412      top: 0;
413      z-index: 46;
414      width: var(--space-cursor-expanded-size);
415      height: var(--space-cursor-expanded-size);
416      border-radius: 999px;
417      background: transparent;
418      color: #fff;
419      display: grid;
420      place-items: center;
421      opacity: 0;
422      visibility: hidden;
423      pointer-events: none;
424      user-select: none;
425      overflow: visible;
426      contain: layout style;
427      transform: translate3d(50vw, 50vh, 0) translate(-50%, -50%);
428      will-change: transform, opacity;
429      transition:
430        opacity 260ms ease,
431        visibility 0s linear 260ms;
432    }
433
434    .space-cursor::before {
435      content: "";
436      position: absolute;
437      inset: 0;
438      border-radius: inherit;
439      border: 1px solid rgba(255,255,255,.32);
440      background: var(--space-cursor-shell-background);
441      box-shadow: var(--space-cursor-shell-shadow);
442      -webkit-backdrop-filter: blur(10px) saturate(1.12);
443      backdrop-filter: blur(10px) saturate(1.12);
444      transform: scale(var(--space-cursor-shell-scale));
445      transform-origin: center;
446      will-change: transform;
447      transition:
448        transform var(--space-cursor-transition-duration) var(--ease),
449        background var(--space-cursor-transition-duration) var(--ease);
450    }
451
452    .space-cursor.is-visible {
453      opacity: 1;
454      visibility: visible;
455      transition:
456        opacity 260ms ease;
457    }
458
459    .space-cursor.is-expanded {
460      --space-cursor-shell-scale: 1;
461      --space-cursor-shell-background: var(--space-cursor-expanded-background);
462      --space-cursor-shell-shadow: 0 0 2px 1px rgba(255,255,255,.24) inset, 0 0 10px 4px rgba(255,255,255,.13) inset, 0 8px 24px rgba(17,17,26,.16), 0 16px 56px rgba(17,17,26,.08), 0 4px 16px rgba(17,17,26,.08) inset;
463    }
464
465    .space-cursor.is-expanded::before {
466      -webkit-backdrop-filter: url(#siteCursorGlassFilter) saturate(1.12);
467      backdrop-filter: url(#siteCursorGlassFilter) saturate(1.12);
468    }
469
470    .space-cursor__stage {
471      position: absolute;
472      inset: 12px;
473      z-index: 1;
474      display: flex;
475      flex-direction: column;
476      align-items: center;
477      justify-content: center;
478      gap: 6px;
479      opacity: 0;
480      transform: translateY(7px) scale(0.94);
481      transition:
482        opacity var(--space-cursor-transition-duration) var(--ease),
483        transform var(--space-cursor-transition-duration) var(--ease);
484    }
485
486    .space-cursor.is-expanded .space-cursor__stage.is-active {
487      opacity: 1;
488      transform: translateY(0) scale(1);
489    }
490
491    .space-cursor__text {
492      display: block;
493      font-family: "Nord", Arial, Helvetica, sans-serif;
494      font-size: 13px;
495      line-height: 1.04;
496      letter-spacing: .02em;
497      text-align: center;
498      text-transform: none;
499      color: #fff;
500      max-width: 102px;
501      text-shadow: 0 8px 22px rgba(0,0,0,0.14);
502    }
503
504    .space-cursor__icon {
505      display: block;
506      width: var(--space-cursor-svg-size);
507      height: var(--space-cursor-svg-size);
508      object-fit: contain;
509      filter: drop-shadow(0 6px 14px rgba(0,0,0,0.12));
510      transform-origin: center;
511      will-change: transform;
512    }
513
514    .space-cursor__stage.is-active[data-space-cursor-stage="navigate"] .space-cursor__icon {
515      animation: spaceCursorNavigate var(--space-cursor-icon-motion-duration) var(--ease) infinite;
516    }
517
518    .space-cursor__stage.is-active[data-space-cursor-stage="keyboard"] .space-cursor__icon {
519      animation: spaceCursorKeyboard var(--space-cursor-icon-motion-duration) var(--ease) infinite;
520    }
521
522    .space-cursor__stage.is-active[data-space-cursor-stage="explore"] .space-cursor__icon {
523      animation: spaceCursorExplore var(--space-cursor-icon-motion-duration) var(--ease) infinite;
524    }
525
526    @keyframes spaceCursorNavigate {
527      0%, 100% { transform: translateX(-5px); }
528      50% { transform: translateX(5px); }
529    }
530
531    @keyframes spaceCursorKeyboard {
532      0%, 100% { transform: scale(1); }
533      50% { transform: scale(1.08); }
534    }
535
536    @keyframes spaceCursorExplore {
537      0%, 100% { transform: translateY(-2px); }
538      50% { transform: translateY(6px); }
539    }
540
541    body.is-space-cursor-active,
542    body.is-space-cursor-active * {
543      cursor: none !important;
544    }
545
546    @media (max-width: 900px) {
547      .space-cursor {
548        display: none;
549      }
550    }
551
552    .mlogo .explorer-title {
553      position: absolute;
554      left: 0;
555      top: 116px;
556      width: 100%;
557      text-align: center;
558      color: #fff;
559      font-family: "Nord", Arial, Helvetica, sans-serif;
560      font-size: 11px;
561      line-height: 1.1;
562      letter-spacing: 0.07em;
563      text-transform: uppercase;
564      pointer-events: none;
565      user-select: none;
566      filter: none;
567      mix-blend-mode: difference;
568    }
569
570   
571   
572
573
574    .focus-overlay[hidden] { display: none; }
575    .focus-overlay {
576      position: fixed;
577      inset: 0;
578      z-index: 50;
579      isolation: isolate;
580    }
581    .focus-backdrop {
582      position: absolute;
583      inset: 0;
584      background: rgba(255,255,255,0);
585      backdrop-filter: blur(0px);
586      transition: backdrop-filter 0.95s var(--ease), background 0.95s var(--ease);
587    }
588    .focus-overlay.active .focus-backdrop {
589      background: rgba(123,123,123,0.24);
590      backdrop-filter: blur(9px);
591    }
592    .focus-panel {
593      position: absolute;
594      inset: 0;
595      display: grid;
596      grid-template-columns: 1fr 1fr;
597      align-items: stretch;
598      opacity: 0;
599      transition: opacity .45s ease;
600      pointer-events: none;
601    }
602    .focus-panel.active {
603      opacity: 1;
604      pointer-events: auto;
605    }
606    .focus-stageWrap,
607    .focus-info {
608      position: relative;
609      display: flex;
610      align-items: center;
611      justify-content: center;
612    }
613    .focus-stageWrap {
614      padding: min(2vw, 20px);
615      overflow: hidden;
616      touch-action: pan-y;
617    }
618    .focus-stage {
619      width: calc(60vw - min(2vw, 20px));
620      height: calc(100vh - min(2vw, 20px));
621      max-width: 900px;
622      max-height: 88vh;
623      border-radius: 0;
624      overflow: hidden;
625      display: flex;
626      align-items: center;
627      justify-content: center;
628      pointer-events: none;
629    }
630    .focus-stage.has-related-reel {
631      overflow: hidden;
632    }
633    .focus-viewer {
634      position: relative;
635      width: 100%;
636      height: 100%;
637      overflow: hidden;
638      isolation: isolate;
639    }
640    .focus-viewer img {
641      position: absolute;
642      inset: 15%;
643      width: 70%;
644      height: 70%;
645      display: block;
646      object-fit: contain;
647      opacity: 0;
648      transition: opacity .62s cubic-bezier(.22,.61,.36,1);
649      user-select: none;
650      pointer-events: none;
651      backface-visibility: hidden;
652      transform: translateZ(0);
653      will-change: opacity;
654    }
655    .focus-viewer img.is-visible { opacity: 1; }
656
657    .focus-slideNav{
658      position: fixed;
659      top: 50%;
660      left: 8px;
661      transform: translateY(-50%);
662      z-index: 56;
663      opacity: 0;
664      visibility: hidden;
665      pointer-events: none;
666      transition: opacity .24s ease, visibility 0s linear .24s;
667      will-change: opacity;
668    }
669    .focus-slideNav.show{
670      opacity: 1;
671      visibility: visible;
672      pointer-events: auto;
673      transition: opacity .24s ease;
674    }
675    .focus-slideNav.is-reveal-locked{
676      pointer-events: none;
677    }
678    .focus-bullet{
679      display: flex;
680      align-items: center;
681      padding: 8px 0;
682      gap: 12px;
683      opacity: .92;
684      transform: translate3d(0, 0, 0);
685      will-change: transform, opacity;
686    }
687    .focus-slideNav.is-revealing .focus-bullet{
688      opacity: 0;
689      transform: translate3d(0, -10px, 0);
690      animation: focusBulletReveal .42s cubic-bezier(.22,.61,.36,1) forwards;
691      animation-delay: var(--reveal-delay, 0ms);
692    }
693    .focus-bullet__button{
694      appearance: none;
695      border: 0;
696      background: transparent;
697      padding: 0;
698      margin: 0;
699      cursor: pointer;
700      display: inline-flex;
701      align-items: center;
702      justify-content: center;
703      border-radius: 0;
704      transition: transform .32s var(--ease), opacity .32s var(--ease);
705    }
706    .focus-bullet__button:hover{
707      transform: translateX(2px);
708    }
709    .focus-bullet__thumb{
710      width: 80px;
711      height: 80px;
712      display: block;
713      object-fit: cover;
714      background: rgba(255,255,255,1);
715      opacity: 1;
716      border: 2px solid transparent;
717      box-sizing: border-box;
718      transition: opacity .42s var(--ease), transform .42s var(--ease), border-color .42s var(--ease);
719      pointer-events: none;
720    }
721    .focus-bullet__line{
722      background-color: rgba(0,0,0,.62);
723      height: 2px;
724      width: 26px;
725      transform-origin: left;
726      transform: scaleX(.28);
727      opacity: .42;
728      transition: transform .62s var(--ease), opacity .62s var(--ease);
729      pointer-events: none;
730    }
731    .focus-bullet.is-active .focus-bullet__line{
732      transform: scaleX(1);
733      opacity: 1;
734    }
735    .focus-bullet.is-anim .focus-bullet__line{
736      animation: focusLineActive .9s var(--ease) 1;
737    }
738    @keyframes focusBulletReveal{
739      from{
740        opacity: 0;
741        transform: translate3d(0, -10px, 0);
742      }
743      to{
744        opacity: .92;
745        transform: translate3d(0, 0, 0);
746      }
747    }
748    .focus-bullet.is-active .focus-bullet__thumb{
749      opacity: 1;
750      transform: scale(1.04);
751      border-color: #000;
752    }
753    @keyframes focusLineActive{
754      0%{ opacity: .55; }
755      45%{ opacity: 1; }
756      100%{ opacity: 1; }
757    }
758
759    .focus-info {
760      padding: min(2vw, 20px);
761      justify-content: flex-start;
762      align-items: center;
763    }
764    .focus-copy {
765      position: absolute;
766      left: clamp(24px, 8vw, 112px);
767      top: 24%;
768      width: 42vw;
769      max-width: 640px;
770      color: #111;
771      transform: translateY(18px);
772      opacity: 0;
773      transition: transform .55s .16s var(--ease), opacity .55s .16s ease;
774      pointer-events: auto;
775    }
776    .focus-panel.active .focus-copy {
777      transform: translateY(0);
778      opacity: 1;
779    }
780    .focus-kicker {
781      margin-bottom: 5px;
782      color: var(--focus-ui-muted);
783      letter-spacing: .14em;
784      text-transform: uppercase;
785      font-size: 11px;
786      font-family: "Nord", Arial, Helvetica, sans-serif;
787    }
788    .focus-copy h1 {
789      margin: 0;
790      font-weight: 200;
791      font-size: clamp(100px, 8.5vw, 140px);
792      line-height: .7;
793      font-family: "Att", Arial, Helvetica, sans-serif;
794      text-transform: none;
795    }
796    .focus-text {
797      margin-top: 18px;
798      color: rgba(0,0,0,.6);
799      font-size: clamp(18px, 2vw, 30px);
800      line-height: 1.5;
801      max-width: 640px;
802      font-family: "Lav";
803    }
804    .focus-options {
805      width: 100%;
806      max-width: min(40rem, 100%);
807      display: flex;
808      flex-wrap: nowrap;
809      align-items: flex-start;
810      gap: 0;
811      margin: 10px 0 18px;
812      padding: 0 0 50px;
813      overflow-x: auto;
814      overflow-y: hidden;
815      scrollbar-width: thin;
816      pointer-events: auto;scrollbar-color: #595959 rgba(255,255,255,0);
817    }
818    .focus-options:not([hidden]) {
819      display: flex !important;
820    }
821    .focus-options[hidden] {
822      display: none !important;
823    }
824    .focus-option {
825      position: relative;
826      flex: 0 0 110px;
827      width: 110px;
828      height: 90px;
829      max-width: min(40rem, 100%);
830      display: inline-flex;
831      align-items: flex-end;
832      justify-content: flex-start;
833      margin: 0 20px 0 0;
834      padding: 5px 20px 5px 0;
835      border: 2px solid rgba(0,0,0,0);
836      border-radius: 4px;
837      background-color: rgba(255,255,255,0);
838      background-position: center;
839      background-repeat: no-repeat;
840      background-size: contain;
841      box-shadow: none;
842      cursor: pointer;
843      overflow: visible;
844      transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
845    }
846    .focus-option:hover,
847    .focus-option:focus-within {
848      transform: translateY(-1px);
849    
850    }
851    .focus-option.is-active {
852   
853    }
854    .focus-option .radio {
855      position: absolute;
856      opacity: 0;
857      pointer-events: none;
858    }
859    .focus-option .ds {
860      position: absolute;
861      left: 0;
862      bottom: -36px;
863      width: 100%;
864      padding: 0;
865      background: transparent;
866      color: var(--focus-ui-color);
867      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
868      font-size: 13px;
869      line-height: 1.2;
870      text-align: center;
871      text-transform: none;
872      overflow-wrap: anywhere;
873    }
874    .focus-relatedPrompt {
875      margin: 6px 0 0;
876    
877      font-family: "Nord", Arial, Helvetica, sans-serif;
878      font-size: 14px;
879      line-height: 1.5;
880      letter-spacing: 0.12em;
881      text-transform: uppercase;
882		animation: blink 1s 4;
883    }
884    .focus-relatedPrompt[hidden] {
885      display: none;
886    }
887    .focus-palette {
888      display: grid;
889      grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
890      gap: 7px 6px;
891      margin-top: 10px;
892      max-width: min(40rem, 100%);
893    }
894    .focus-palette[hidden] {
895      display: none;
896    }
897    .focus-palette__item {
898      appearance: none;
899      display: flex;
900      flex-direction: column;
901      gap: 8px;
902      min-width: 0;
903      padding: 0;
904      border: 0;
905      background: transparent;
906      text-align: left;
907      cursor: pointer;
908    }
909    .focus-palette__swatch {
910      display: block;
911      width: 100%;
912      aspect-ratio: 2.5 / 1;
913      border-radius: 2px;
914      border: 2px solid rgba(255,255,255,0.30);
915      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
916      transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
917    }
918    .focus-palette__item:hover .focus-palette__swatch,
919    .focus-palette__item:focus-visible .focus-palette__swatch {
920      transform: translateY(-1px);
921      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
922    }
923    .focus-palette__item.is-active .focus-palette__swatch {
924      border-color: rgba(0, 0, 0, 0.8);
925      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
926    }
927    .focus-palette__name,
928    .focus-palette__code {
929      display: block;
930      min-width: 0;
931      overflow-wrap: anywhere;
932    }
933    .focus-palette__name {
934      color: var(--focus-ui-color);
935      font-family: "Noy";
936      font-size: 10px;
937      line-height: 1.3;
938      letter-spacing: 0.08em;
939      text-transform: uppercase;
940    }
941    .focus-palette__code {
942		display: none;
943      color: var(--focus-ui-muted);
944      font-family: "Nord", Arial, Helvetica, sans-serif;
945      font-size: 10px;
946      line-height: 1.2;
947      letter-spacing: 0.08em;
948      text-transform: uppercase;
949    }
950    .focus-actions {
951      margin-top: 10px;
952      display: flex;
953      flex-wrap: wrap;
954      align-items: center;
955      gap: 10px;
956    }
957    .focus-link {
958      margin-top: 0;
959      display: inline-flex;
960      align-items: center;
961      gap: 10px;
962      padding: 10px 14px;
963      border: 3px solid white;
964      border-radius: 999px;
965      background: rgba(255,255,255,.2);
966      color: #111;
967      text-decoration: none;
968      font-family: "Noy", Arial, Helvetica, sans-serif;
969      font-size: 20px;
970      transition: transform .25s ease, background .25s ease;
971    }
972    .focus-action {
973      appearance: none;
974      min-height: 47px;
975      display: inline-flex;
976      align-items: center;
977      justify-content: center;
978      gap: 10px;
979      padding: 10px 14px;
980      border: 3px solid white;
981      border-radius: 999px;
982      background: rgba(255,255,255,.2);
983      color: #111;
984      font-family: "Noy", Arial, Helvetica, sans-serif;
985      font-size: 20px;
986      line-height: 1;
987      cursor: pointer;
988      transition: transform .25s ease, background .25s ease;
989    }
990    .focus-action[hidden] { display: none; }
991    .focus-action:disabled { opacity: .55; cursor: wait; }
992    .focus-link:hover,
993    .focus-action:hover {
994      transform: translateY(-1px);
995      background: rgba(255,255,255,.92);
996    }
997    .focus-close {
998      position: fixed;
999      top: clamp(68px, 7.5vw, 104px);
1000      right: clamp(10px, 2.4vw, 24px);
1001      z-index: 75;
1002      width: auto;
1003      min-width: 0;
1004      height: 40px;
1005      display: inline-flex;
1006      align-items: center;
1007      justify-content: center;
1008      gap: 8px;
1009      padding: 0 15px 0 12px;
1010      border: 1px solid var(--line);
1011      border-radius: 999px;
1012      background: rgba(255,255,255,.72);
1013      color: #111;
1014      cursor: pointer;
1015      backdrop-filter: blur(12px);
1016      font-family: "Noy", "Nord", Arial, Helvetica, sans-serif;
1017      font-size: 11px;
1018      font-weight: 600;
1019      line-height: 1;
1020      letter-spacing: .08em;
1021      text-transform: uppercase;
1022      transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
1023    }
1024    .focus-close:hover {
1025      transform: translateY(-1px);
1026      background: rgba(255,255,255,.94);
1027      border-color: rgba(0,0,0,.3);
1028    }
1029    .focus-close svg {
1030      display: block;
1031      width: 18px;
1032      height: 18px;
1033      flex: 0 0 auto;
1034      fill: none;
1035      stroke: currentColor;
1036      stroke-width: 2.2;
1037      stroke-linecap: round;
1038      stroke-linejoin: round;
1039    }
1040    .focus-close span { display: block; white-space: nowrap; }
1041    .focus-flyer {
1042      position: fixed;
1043      z-index: 70;
1044      overflow: hidden;
1045      will-change: left, top, width, height, opacity, border-radius;
1046      pointer-events: none;
1047      background: transparent;
1048      transform: translateZ(0);
1049      contain: layout paint style;
1050      border-radius: 0;
1051    }
1052    .focus-flyer img {
1053      position: absolute;
1054      inset: 0;
1055      width: 100%;
1056      height: 100%;
1057      display: block;
1058      object-fit: contain;
1059      user-select: none;
1060      pointer-events: none;
1061    }
1062
1063    
1064    .moodboard-shell {
1065      position: fixed;
1066      inset: 0;
1067      z-index: 120;
1068      opacity: 0;
1069      visibility: hidden;
1070      pointer-events: none;
1071      transition: opacity .32s var(--ease), visibility 0s linear .32s;
1072    }
1073    .moodboard-shell[hidden] {
1074      display: block;
1075    }
1076    .moodboard-shell.is-active {
1077      opacity: 1;
1078      visibility: visible;
1079      pointer-events: auto;
1080      transition: opacity .32s var(--ease);
1081    }
1082    .moodboard-shell__backdrop {
1083      position: absolute;
1084      inset: 0;
1085      background: rgba(245, 242, 239, 0.44);
1086      backdrop-filter: blur(10px);
1087    }
1088    .moodboard-shell__panel {
1089      position: absolute;
1090      inset: 124px 24px 24px;
1091      border-radius: 18px;
1092      overflow: hidden;
1093      background: rgba(255,255,255,0.92);
1094      box-shadow: 0 24px 80px rgba(0,0,0,0.18);
1095      transform: translateY(18px) scale(0.985);
1096      opacity: 0;
1097      transition: transform .32s var(--ease), opacity .32s var(--ease);
1098    }
1099    .moodboard-shell.is-active .moodboard-shell__panel {
1100      transform: translateY(0) scale(1);
1101      opacity: 1;
1102    }
1103    .moodboard-shell__frame {
1104      display: block;
1105      width: 100%;
1106      height: 100%;
1107      border: 0;
1108      background: #f5f5f5;
1109    }
1110
1111    body.focus-overlay-open,
1112    body.digital-room-open { overflow: hidden; }
1113
1114    .digital-room-overlay[hidden] { display: none; }
1115    .digital-room-overlay {
1116      position: fixed;
1117      inset: 0;
1118      z-index: 100;
1119      opacity: 0;
1120      visibility: hidden;
1121      pointer-events: none;
1122      isolation: isolate;
1123      transition: opacity .34s var(--ease), visibility 0s linear .34s;
1124    }
1125    .digital-room-overlay.is-active {
1126      opacity: 1;
1127      visibility: visible;
1128      pointer-events: auto;
1129      transition: opacity .34s var(--ease);
1130    }
1131    .digital-room-overlay.is-restoring {
1132      opacity: 0 !important;
1133      visibility: hidden !important;
1134      pointer-events: none !important;
1135    }
1136    .digital-room__backdrop {
1137      position: absolute;
1138      inset: 0;
1139      background: rgba(238,235,231,.2);
1140      backdrop-filter: blur(12px) saturate(.9);
1141    }
1142    .digital-room__shell {
1143      position: absolute;
1144      inset: clamp(74px, 9vh, 116px) clamp(10px, 2.2vw, 34px) clamp(10px, 2.2vw, 34px);
1145      overflow: hidden;
1146      border: 1px solid rgba(255,255,255,.62);
1147      border-radius: 22px;
1148      background: rgba(232,228,222,.18);
1149      box-shadow: 0 28px 90px rgba(25,22,18,.2);
1150      transform: translateY(18px) scale(.99);
1151      transition: transform .34s var(--ease);
1152    }
1153    .digital-room-overlay.is-active .digital-room__shell { transform: translateY(0) scale(1); }
1154    .digital-room__stage,
1155    .digital-room__canvas,
1156    .digital-room__labels { position: absolute; inset: 0; }
1157    .digital-room__stage {
1158      overflow: hidden;
1159      background: radial-gradient(circle at 56% 34%, rgba(255,255,255,.2), rgba(255,255,255,.035) 62%, rgba(94,84,72,.025));
1160    }
1161    .digital-room__canvas canvas {
1162      display: block;
1163      width: 100%;
1164      height: 100%;
1165      cursor: url("./rotate-cursor.png?v=20260806-2") 16 16, grab;
1166      touch-action: none;
1167    }
1168    body.is-space-cursor-active .digital-room__canvas canvas {
1169      cursor: url("./rotate-cursor.png?v=20260806-2") 16 16, grab !important;
1170    }
1171    .digital-room__snapshot {
1172      position: absolute;
1173      inset: 0;
1174      z-index: 2;
1175      width: 100%;
1176      height: 100%;
1177      display: none;
1178      object-fit: cover;
1179      pointer-events: none;
1180    }
1181    .digital-room__canvas canvas.is-over-item { cursor: grab; }
1182    .digital-room__canvas canvas.is-over-item.is-dragging { cursor: grabbing; }
1183    body.is-space-cursor-active .digital-room__canvas canvas.is-over-item { cursor: grab !important; }
1184    body.is-space-cursor-active .digital-room__canvas canvas.is-over-item.is-dragging { cursor: grabbing !important; }
1185    .digital-room__labels { overflow: hidden; pointer-events: none; }
1186    .digital-room-label {
1187      position: absolute;
1188      left: 0;
1189      top: 0;
1190      max-width: min(260px, 48vw);
1191      padding: 8px 13px;
1192      overflow: hidden;
1193      border: 1px solid rgba(255,255,255,.78);
1194      border-radius: 999px;
1195      background: rgba(255,255,255,.72);
1196      box-shadow: 0 10px 30px rgba(0,0,0,.1);
1197      color: #111;
1198      font-family: "Nord", Arial, Helvetica, sans-serif;
1199      font-size: 11px;
1200      line-height: 1.2;
1201      letter-spacing: .04em;
1202      text-decoration: none;
1203      text-overflow: ellipsis;
1204      white-space: nowrap;
1205      pointer-events: auto;
1206      backdrop-filter: blur(10px);
1207    }
1208    .digital-room-label:hover,
1209    .digital-room-label:focus-visible { background: rgba(255,255,255,.96); outline: none; }
1210    .digital-room__topbar {
1211      position: absolute;
1212      z-index: 4;
1213      top: 16px;
1214      left: 16px;
1215      right: 16px;
1216      display: flex;
1217      align-items: center;
1218      justify-content: flex-end;
1219      gap: 14px;
1220      pointer-events: none;
1221    }
1222    .digital-room__window-button {
1223      appearance: none;
1224      width: 52px;
1225      height: 52px;
1226      display: grid;
1227      place-items: center;
1228      padding: 0;
1229      border: 1px solid rgba(255,255,255,.8);
1230      border-radius: 50%;
1231      background: rgba(255,255,255,.68);
1232      box-shadow: 0 12px 34px rgba(0,0,0,.1);
1233      color: #111;
1234      font-size: 30px;
1235      line-height: 1;
1236      cursor: pointer;
1237      pointer-events: auto;
1238      backdrop-filter: blur(14px);
1239    }
1240    .digital-room__minimize::before {
1241      content: "";
1242      width: 17px;
1243      height: 1.5px;
1244      border-radius: 999px;
1245      background: currentColor;
1246    }
1247    .digital-room__clear-trigger {
1248      width: auto;
1249      min-width: 78px;
1250      padding: 0 18px;
1251      border-radius: 999px;
1252      font-family: "Nord", Arial, Helvetica, sans-serif;
1253      font-size: 10px;
1254      letter-spacing: .08em;
1255      text-transform: uppercase;
1256    }
1257    .digital-room-clear-confirmation {
1258      position: absolute;
1259      z-index: 7;
1260      top: 82px;
1261      right: 16px;
1262      width: min(330px, calc(100% - 32px));
1263      padding: 18px;
1264      border: 1px solid rgba(255,255,255,.82);
1265      border-radius: 18px;
1266      background: rgba(248,247,245,.9);
1267      box-shadow: 0 20px 58px rgba(0,0,0,.18);
1268      color: #111;
1269      font-family: "Nord", Arial, Helvetica, sans-serif;
1270      backdrop-filter: blur(18px);
1271    }
1272    .digital-room-clear-confirmation[hidden] { display: none; }
1273    .digital-room-clear-confirmation p {
1274      margin: 0 0 14px;
1275      font-size: 13px;
1276      line-height: 1.35;
1277    }
1278    .digital-room-clear-confirmation__actions {
1279      display: flex;
1280      justify-content: flex-end;
1281      gap: 8px;
1282    }
1283    .digital-room-clear-confirmation button {
1284      appearance: none;
1285      min-height: 38px;
1286      padding: 0 15px;
1287      border: 1px solid rgba(17,17,17,.2);
1288      border-radius: 999px;
1289      background: rgba(255,255,255,.82);
1290      color: #111;
1291      font: 500 10px/1 "Nord", Arial, Helvetica, sans-serif;
1292      letter-spacing: .08em;
1293      text-transform: uppercase;
1294      cursor: pointer;
1295    }
1296    .digital-room-clear-confirmation__confirm {
1297      border-color: #111 !important;
1298      background: #111 !important;
1299      color: #fff !important;
1300    }
1301    .digital-room-overlay.is-minimized {
1302      inset: auto auto 18px 18px;
1303      width: clamp(210px, 24vw, 340px);
1304      aspect-ratio: 16 / 10;
1305      opacity: 1;
1306      visibility: visible;
1307      pointer-events: auto;
1308      cursor: pointer;
1309      transition: none;
1310    }
1311    .digital-room-overlay.is-minimized .digital-room__backdrop,
1312    .digital-room-overlay.is-minimized .digital-room__topbar,
1313    .digital-room-overlay.is-minimized .digital-room__status,
1314    .digital-room-overlay.is-minimized .digital-room__toolbar,
1315    .digital-room-overlay.is-minimized .digital-room__labels { display: none; }
1316    .digital-room-overlay.is-minimized .digital-room__shell {
1317      inset: 0;
1318      border-radius: 15px;
1319      box-shadow: 0 18px 52px rgba(25,22,18,.24);
1320      transform: none;
1321      transition: box-shadow .2s ease, border-color .2s ease;
1322    }
1323    .digital-room-overlay.is-minimized:hover .digital-room__shell {
1324      border-color: rgba(255,255,255,.92);
1325      box-shadow: 0 22px 60px rgba(25,22,18,.3);
1326    }
1327    .digital-room-overlay.is-minimized:focus-visible { outline: none; }
1328    .digital-room-overlay.is-minimized:focus-visible .digital-room__shell {
1329      outline: 2px solid rgba(17,17,17,.72);
1330      outline-offset: 3px;
1331    }
1332    .digital-room-overlay.is-minimized .digital-room__stage,
1333    .digital-room-overlay.is-minimized .digital-room__canvas canvas { pointer-events: none; }
1334    .digital-room-overlay.is-minimized .digital-room__canvas canvas { object-fit: cover; }
1335    .digital-room-overlay.is-minimized.has-minimized-snapshot .digital-room__canvas { display: none; }
1336    .digital-room-overlay.is-minimized.has-minimized-snapshot .digital-room__snapshot { display: block; }
1337    .digital-room__toolbar {
1338      position: absolute;
1339      z-index: 5;
1340      left: 50%;
1341      bottom: 16px;
1342      display: flex;
1343      align-items: center;
1344      justify-content: center;
1345      gap: 8px;
1346      width: max-content;
1347      max-width: calc(100% - 32px);
1348      transform: translateX(-50%);
1349    }
1350    .digital-room-texture-menu { position: relative; }
1351    .digital-room-texture-menu[hidden] { display: none; }
1352    .digital-room-texture-trigger,
1353    .digital-room__export {
1354      appearance: none;
1355      min-height: 48px;
1356      display: inline-flex;
1357      align-items: center;
1358      justify-content: center;
1359      gap: 9px;
1360      padding: 7px 14px;
1361      border: 1px solid rgba(255,255,255,.75);
1362      border-radius: 999px;
1363      background: rgba(255,255,255,.7);
1364      box-shadow: 0 12px 34px rgba(0,0,0,.1);
1365      color: #111;
1366      font-family: "Nord", Arial, Helvetica, sans-serif;
1367      font-size: 10px;
1368      line-height: 1;
1369      letter-spacing: .07em;
1370      text-transform: uppercase;
1371      white-space: nowrap;
1372      cursor: pointer;
1373      backdrop-filter: blur(14px);
1374    }
1375    .digital-room-texture-arrow {
1376      width: 12px;
1377      height: 7px;
1378      margin-left: 2px;
1379      fill: none;
1380      stroke: currentColor;
1381      stroke-width: 1.25;
1382      stroke-linecap: round;
1383      stroke-linejoin: round;
1384      flex: 0 0 auto;
1385    }
1386    .digital-room__export {
1387      border-color: #111;
1388      background: #111;
1389      color: #fff;
1390    }
1391    .digital-room__download-icon {
1392      width: 15px;
1393      height: 15px;
1394      fill: none;
1395      stroke: currentColor;
1396      stroke-width: 1.35;
1397      stroke-linecap: round;
1398      stroke-linejoin: round;
1399      flex: 0 0 auto;
1400    }
1401    .digital-room-texture-trigger img {
1402      width: 34px;
1403      height: 34px;
1404      display: block;
1405      border-radius: 50%;
1406      object-fit: cover;
1407      background: #ddd;
1408    }
1409    .digital-room-texture-options {
1410      position: absolute;
1411      left: 50%;
1412      bottom: calc(100% + 9px);
1413      width: min(330px, 82vw);
1414      max-height: min(52vh, 370px);
1415      display: grid;
1416      grid-template-columns: repeat(3, minmax(0, 1fr));
1417      gap: 6px;
1418      padding: 8px;
1419      overflow: auto;
1420      border: 1px solid rgba(255,255,255,.74);
1421      border-radius: 16px;
1422      background: rgba(248,247,245,.88);
1423      box-shadow: 0 22px 58px rgba(0,0,0,.18);
1424      opacity: 0;
1425      visibility: hidden;
1426      transform: translate(-50%, 7px);
1427      pointer-events: none;
1428      transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
1429      backdrop-filter: blur(18px);
1430    }
1431    .digital-room-texture-menu[data-open] .digital-room-texture-options {
1432      opacity: 1;
1433      visibility: visible;
1434      transform: translate(-50%, 0);
1435      pointer-events: auto;
1436      transition: opacity .22s ease, transform .22s ease;
1437    }
1438    .digital-room-texture-option {
1439      appearance: none;
1440      min-width: 0;
1441      display: grid;
1442      gap: 5px;
1443      padding: 5px;
1444      border: 1px solid transparent;
1445      border-radius: 10px;
1446      background: transparent;
1447      color: #111;
1448      cursor: pointer;
1449    }
1450    .digital-room-texture-option.is-active { border-color: rgba(0,0,0,.62); background: rgba(255,255,255,.62); }
1451    .digital-room-texture-option img {
1452      width: 100%;
1453      aspect-ratio: 1.35;
1454      display: block;
1455      border-radius: 7px;
1456      object-fit: cover;
1457    }
1458    .digital-room-texture-option span {
1459      overflow: hidden;
1460      font-family: "Nord", Arial, Helvetica, sans-serif;
1461      font-size: 9px;
1462      line-height: 1.2;
1463      text-overflow: ellipsis;
1464      white-space: nowrap;
1465    }
1466    .digital-room__export:disabled { opacity: .58; cursor: wait; }
1467    .digital-room__status {
1468      position: absolute;
1469      z-index: 4;
1470      left: 50%;
1471      bottom: 76px;
1472      max-width: min(620px, calc(100% - 36px));
1473      margin: 0;
1474      padding: 8px 13px;
1475      border-radius: 999px;
1476    
1476  background: rgba(255,255,255,.62);
1477      color: rgba(0,0,0,.7);
1478      font-family: "Nord", Arial, Helvetica, sans-serif;
1479      font-size: 10px;
1480      line-height: 1.3;
1481      text-align: center;
1482      transform: translateX(-50%);
1483      pointer-events: none;
1484      backdrop-filter: blur(12px);
1485    }
1486    .digital-room__status.is-error { color: #8c2525; background: rgba(255,239,239,.82); }
1487
1488@media (max-width: 900px) {
1489      .focus-panel {
1490        grid-template-columns: 1fr;
1491        grid-template-rows: 56vh auto;
1492        overflow: auto;
1493      }
1494      .focus-stageWrap {
1495        padding: 120px 20px 20px;
1496        align-items: flex-start;
1497      }
1498      .focus-stage {
1499        width: calc(100vw - 40px);
1500        height: calc(56vh - 140px);
1501        max-width: none;
1502        max-height: none;
1503      }
1504      .focus-info {
1505        padding: 20px 20px 40px;
1506        justify-content: center;
1507        align-items: flex-start;
1508      }
1509      .focus-copy {
1510        position: static;
1511        right: auto;
1512        top: auto;
1513        width: min(100%, 640px);
1514        margin: 24px auto 0;
1515        text-align: center;
1516      }
1517      .focus-actions {
1518        justify-content: center;
1519      }
1520      .focus-options {
1521        justify-content: flex-start;
1522        max-width: 100%;
1523      }
1524      .focus-option {
1525        flex-basis: 96px;
1526        width: 96px;
1527        height: 78px;
1528      }
1529      .focus-link,
1530      .focus-action {
1531        margin-left: 0;
1532        margin-right: 0;
1533      }
1534      .focus-palette {
1535        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
1536      }
1537      .focus-close {
1538        top: 80px;
1539        height: 38px;
1540        padding: 0 13px 0 11px;
1541        font-size: 10px;
1542      }
1543      .focus-slideNav {
1544        z-index: 56;
1545        pointer-events: auto;
1546      }
1547      .focus-bullet__thumb {
1548        width: 50px;
1549        height: 50px;
1550        opacity: .95;
1551      }
1552      .digital-room__shell { inset: 72px 8px 8px; border-radius: 16px; }
1553      .digital-room__topbar { top: 9px; left: 9px; right: 9px; }
1554      .digital-room__window-button { width: 44px; height: 44px; font-size: 26px; }
1555      .digital-room__clear-trigger { width: auto; min-width: 68px; padding: 0 14px; font-size: 9px; }
1556      .digital-room-clear-confirmation { top: 62px; right: 9px; width: min(300px, calc(100% - 18px)); }
1557      .digital-room-overlay.is-minimized {
1558        left: 12px;
1559        bottom: 12px;
1560        width: min(105px, 26.6vw);
1561      }
1562      .digital-room__toolbar {
1563        left: 9px;
1564        right: 9px;
1565        bottom: 9px;
1566        width: auto;
1567        max-width: none;
1568        justify-content: flex-start;
1569        overflow-x: auto;
1570        transform: none;
1571        scrollbar-width: none;
1572      }
1573      .digital-room__toolbar::-webkit-scrollbar { display: none; }
1574      .digital-room-texture-trigger,
1575      .digital-room__export { min-height: 44px; padding: 6px 11px; font-size: 9px; }
1576      .digital-room-texture-trigger img { width: 30px; height: 30px; }
1577      .digital-room__status { bottom: 64px; }
1578    }
1579
1580    @media (max-width: 900px) {
1581      .moodboard-shell__panel {
1582        inset: 108px 10px 10px;
1583      }
1584    }
1585
1586    @media (max-width: 400px) {
1587      .page-meta {
1588        left: 0.75rem;
1589        bottom: 0.75rem;
1590      }
1591      .logo-container {
1592        min-width: 60px;
1593        max-width: 72px;
1594      }
1595      .mlogo .explorer-title {
1596        top: 92px;
1597        font-size: 9px;
1598      }
1599      .loading-overlay__bar {
1600        width: min(72vw, 300px);
1601      }
1602      .loading-overlay__value {
1603        font-size: 28px;
1604      }
1605      .loading-overlay__caption {
1606        font-size: 10px;
1607        letter-spacing: 0.28em;
1608      }
1609    }
1610
1611    @media (min-width: 1400px) {
1612      .focus-bullet__thumb {
1613        width: 120px;
1614        height: 120px;
1615      }
1616    }
1617
1618    @media (min-width: 641px) and (max-width: 1000px) {
1619      .mlogo .explorer-title {
1620        top: 102px;
1621      }
1622    }
1623
1624
1625    .loading-overlay {
1626      position: fixed;
1627      inset: 0;
1628      z-index: 130;
1629      display: flex;
1630      align-items: center;
1631      justify-content: center;
1632      background: rgba(242, 194, 204, 0.5);
1633      opacity: 0;
1634      visibility: hidden;
1635      pointer-events: none;
1636      transition: opacity .45s var(--ease), visibility 0s linear .45s;
1637    }
1638    .loading-overlay.is-visible {
1639      opacity: 1;
1640      visibility: visible;
1641      transition: opacity .45s var(--ease);
1642    }
1643    .loading-overlay.is-hidden {
1644      opacity: 0;
1645      visibility: hidden;
1646    }
1647    .loading-overlay__content {
1648      display: flex;
1649      flex-direction: column;
1650      align-items: center;
1651      justify-content: center;
1652      gap: 10px;
1653      width: min(72vw, 280px);
1654      transform: translateY(-6px);
1655    }
1656    .loading-overlay__value {
1657      margin: 0;
1658      font-family: "Lav", Arial, Helvetica, sans-serif;
1659      font-size: clamp(20px, 3.2vw, 28px);
1660      line-height: 1;
1661      letter-spacing: 0.06em;
1662      color: rgba(17,17,17,0.94);
1663      text-shadow: 0 12px 24px rgba(0,0,0,0.05);
1664      user-select: none;
1665      font-variant-numeric: tabular-nums;
1666    }
1667    .loading-overlay__bar {
1668      position: relative;
1669      width: min(54vw, 220px);
1670      height: 7px;
1671      border-radius: 999px;
1672      overflow: hidden;
1673      background: rgba(17,17,17,0.10);
1674      box-shadow: inset 0 1px 1px rgba(255,255,255,0.55), 0 8px 20px rgba(0,0,0,0.07);
1675    }
1676    .loading-overlay__barFill {
1677      position: absolute;
1678      inset: 0 auto 0 0;
1679      width: 0%;
1680      border-radius: inherit;
1681      background: linear-gradient(90deg, rgba(17,17,17,0.84), rgba(17,17,17,0.58));
1682      transition: width .26s var(--ease);
1683    }
1684    .loading-overlay__barFill::after {
1685      content: "";
1686      position: absolute;
1687      inset: 0;
1688      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.34) 50%, transparent 100%);
1689      transform: translateX(-100%);
1690      animation: loadingShimmer 1.2s linear infinite;
1691    }
1692    .loading-overlay__caption {
1693      margin: 0;
1694      font-family: "Nord", Arial, Helvetica, sans-serif;
1695      font-size: 9px;
1696      line-height: 1;
1697      letter-spacing: 0.28em;
1698      text-transform: uppercase;
1699      color: rgba(17,17,17,0.68);
1700      user-select: none;
1701    }
1702    @keyframes loadingShimmer {
1703      from { transform: translateX(-100%); }
1704      to { transform: translateX(220%); }
1705    }
1706
1707    .intro-overlay {
1708      position: fixed;
1709      inset: 0;
1710      z-index: 120;
1711      display: flex;
1712      align-items: center;
1713      justify-content: center;
1714      padding: 4vw;
1715      opacity: 0;
1716      background: rgba(245,242,239,0.10);
1717      pointer-events: none;
1718      transition: opacity .7s var(--ease), background .7s var(--ease);
1719    }
1720    .intro-overlay.is-visible {
1721      opacity: 1;
1722    }
1723    .intro-overlay.is-fading {
1724      opacity: 0;
1725      background: rgba(245,242,239,0.02);
1726    }
1727    .intro-overlay__content {
1728      display: flex;
1729      flex-direction: column;
1730      align-items: center;
1731      justify-content: center;
1732      gap: clamp(8px, 1.8vh, 18px);
1733      transform: translateY(-1vh);
1734    }
1735    .intro-overlay__text {
1736      margin: 0;
1737      max-width: 16ch;
1738      font-family: "Lav", Arial, Helvetica, sans-serif;
1739      font-weight: 100;
1740      line-height: .96;
1741      letter-spacing: .16em;
1742      text-transform: lowercase;
1743      text-align: center;
1744      color: #FFFFFF;
1745      text-shadow: 0 10px 30px rgba(0,0,0,0.10);
1746      user-select: none;
1747      font-size: clamp(22px, 3.4vw, 42px);
1748    }
1749    .intro-overlay__arrow {
1750      font-family: "Lav", Arial, Helvetica, sans-serif;
1751      font-size: clamp(22px, 3vw, 34px);
1752      line-height: 1;
1753      color: #FFFFFF;
1754      opacity: 0;
1755      transform: translateY(-4px);
1756      transition: opacity .45s var(--ease), transform .45s var(--ease);
1757      animation: introBounce 1.4s cubic-bezier(.22,.61,.36,1) infinite;
1758    }
1759    .intro-overlay__arrow.is-visible {
1760      opacity: 1;
1761      transform: translateY(0);
1762    }
1763    @keyframes introBounce {
1764      0%,100% { transform: translateY(0); }
1765      50% { transform: translateY(8px); }
1766    }
1767	  
1768	     @keyframes blink {
1769            0% {
1770                opacity: 1;
1771            }
1772
1773            50% {
1774                opacity: 0;
1775            }
1776
1777            100% {
1778                opacity: 1;
1779            }
1780        } 
1781	  
1782
1783    .header {
1784      color: #000;
1785    }
1786
1787    html.designscape-hero-embed,
1788    html.designscape-hero-embed body {
1789      background: #000;
1790    }
1791
1792    html.designscape-hero-embed #movieHeaderMount,
1793    html.designscape-hero-embed .loading-overlay,
1794    html.designscape-hero-embed .slow-load-indicator,
1795    html.designscape-hero-embed .designscape-startup-tip,
1796    html.designscape-hero-embed .space-cursor,
1797    html.designscape-hero-embed .designscape-label-layer,
1798    html.designscape-hero-embed .intro-overlay,
1799    html.designscape-hero-embed .focus-overlay,
1800    html.designscape-hero-embed .moodboard-shell,
1801    html.designscape-hero-embed .audio-toggle,
1802    html.designscape-hero-embed .mg-mobile-nav-toggle,
1803    html.designscape-hero-embed .mg-mobile-nav-overlay {
1804      display: none !important;
1805    }
1806
1807    html.designscape-hero-embed #app,
1808    html.designscape-hero-embed #THREE-CONTAINER,
1809    html.designscape-hero-embed canvas {
1810      pointer-events: none !important;
1811    }
1812
1813    .mg-lockup,
1814    .mg-lockup img,
1815    .mg-lockup svg {
1816      display: block;
1817      width: 100%;
1818      height: auto;
1819    }
1820  </style>
1821
1822</head>
1823<body class="start-page designscape-page">
1824  <svg width="0" height="0" class="site-cursor-glass-filter" aria-hidden="true" focusable="false" style="position:absolute;
1824left:-9999px;top:-9999px;overflow:hidden;">
1825    <defs>
1826      <filter id="siteCursorGlassFilter" x="-15%" y="-15%" width="130%" height="130%" color-interpolation-filters="sRGB">
1827        <feImage x="0" y="0" width="100%" height="100%" result="map" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20336%2096%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22red%22%20x1%3D%22100%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%220%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23000%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22red%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22blue%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23000%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22blue%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22336%22%20height%3D%2296%22%20fill%3D%22black%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22336%22%20height%3D%2296%22%20rx%3D%2216%22%20fill%3D%22url(%23red)%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22336%22%20height%3D%2296%22%20rx%3D%2216%22%20fill%3D%22url(%23blue)%22%20style%3D%22mix-blend-mode%3Adifference%22%2F%3E%3Crect%20x%3D%223.36%22%20y%3D%223.36%22%20width%3D%22329.28%22%20height%3D%2289.28%22%20rx%3D%2216%22%20fill%3D%22hsl(0%200%25%2050%25%20%2F%200.93)%22%20style%3D%22filter%3Ablur(11px)%22%2F%3E%3C%2Fsvg%3E"></feImage>
1828        <feDisplacementMap in="SourceGraphic" in2="map" xChannelSelector="R" yChannelSelector="G" result="dispRed" scale="-34"></feDisplacementMap>
1829        <feColorMatrix in="dispRed" type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" result="red"></feColorMatrix>
1830        <feDisplacementMap in="SourceGraphic" in2="map" xChannelSelector="R" yChannelSelector="G" result="dispGreen" scale="-38"></feDisplacementMap>
1831        <feColorMatrix in="dispGreen" type="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0" result="green"></feColorMatrix>
1832        <feDisplacementMap in="SourceGraphic" in2="map" xChannelSelector="R" yChannelSelector="G" result="dispBlue" scale="-42"></feDisplacementMap>
1833        <feColorMatrix in="dispBlue" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0" result="blue"></feColorMatrix>
1834        <feBlend in="red" in2="green" mode="screen" result="rg"></feBlend>
1835        <feBlend in="rg" in2="blue" mode="screen" result="output"></feBlend>
1836        <feGaussianBlur in="output" stdDeviation="0.7"></feGaussianBlur>
1837      </filter>
1838    </defs>
1839  </svg>
1840<div id="movieHeaderMount" class="header">
1841    <div class="gg-section">
1842      <a href="https://mariogagliardi.com/" class="mg-logo-link">
1843        <div class="logo-container">
1844          <div class="mg-lockup" aria-label="Mario Gagliardi logo">
1845            
1846<svg width="100%" height="100%" viewBox="0 0 851 701" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
1847    <g transform="matrix(1,0,0,1,-2539.87,-809.903)">
1848        <g transform="matrix(4.07952,0,0,4.24502,-1542.6,-2605.71)">
1849            <g>
1850                <path d="M1044,896.239L1054.74,896.239L1059.45,916.82L1064.75,896.239L1075.17,896.239L1075.17,929.564L1068.31,929.564L1068.31,901.659L1061.5,929.564L1056.18,929.564L1049.95,901.659L1049.95,929.564L1044,929.564L1044,896.239Z"/>
1851                <path d="M1087.36,896.239L1094.73,896.239L1104.25,929.564L1096.76,929.564L1095.1,922.68L1085.72,922.68L1084.09,929.564L1077.35,929.564L1087.36,896.239ZM1093.7,916.967L1090.36,903.361L1087.11,916.967L1093.7,916.967Z"/>
1852                <path d="M1107.03,896.239L1117.51,896.239C1119.54,896.239 1121.1,896.333 1122.18,896.52C1123.27,896.707 1124.36,897.212 1125.47,898.034C1126.57,898.856 1127.44,899.979 1128.07,901.403C1128.69,902.827 1129.01,904.426 1129.01,906.2C1129.01,910.367 1127.44,913.297 1124.32,914.989L1130.45,929.564L1122.46,929.564L1118.02,916.381L1114.36,916.381L1114.36,929.564L1107.03,929.564L1107.03,896.239ZM1114.36,901.635L1114.36,910.985L1117.58,910.985C1120.44,910.985 1121.88,909.382 1121.88,906.176C1121.88,905.069 1121.67,904.162 1121.24,903.454C1120.82,902.746 1120.33,902.265 1119.77,902.013C1119.2,901.761 1118.38,901.635 1117.29,901.635L1114.36,901.635Z"/>
1853                <rect x="1134.28" y="896.239" width="7.324" height="33.325"/>
1854                <path d="M1168.65,912.499C1168.65,918.521 1167.79,922.956 1166.06,925.805C1164.32,928.653 1161.48,930.077 1157.52,930.077C1153.44,930.077 1150.56,928.6 1148.89,925.646C1147.22,922.692 1146.39,918.586 1146.39,913.329C1146.39,907.274 1147.26,902.827 1148.99,899.987C1150.72,897.147 1153.57,895.727 1157.52,895.727C1161.61,895.727 1164.48,897.204 1166.15,900.158C1167.82,903.112 1168.65,907.226 1168.65,912.499ZM1160.92,912.902C1160.92,907.851 1160.69,904.613 1160.23,903.187C1159.78,901.762 1158.87,901.049 1157.52,901.049C1156.3,901.049 1155.43,901.652 1154.9,902.857C1154.37,904.063 1154.1,907.411 1154.1,912.902C1154.1,918.327 1154.36,921.659 1154.87,922.898C1155.39,924.136 1156.27,924.755 1157.52,924.755C1158.73,924.755 1159.59,924.173 1160.12,923.008C1160.65,921.843 1160.92,918.474 1160.92,912.902Z"/>
1855                <g transform="matrix(1,0,0,1,0,-10.5054)">
1856                    <path d="M1013.61,961.791L1025.19,961.791L1025.19,979.564L1022.09,979.564L1021.13,975.756C1019.34,978.637 1016.66,980.077 1013.08,980.077C1009.28,980.077 1006.28,978.584 1004.06,975.597C1001.83,972.611 1000.72,968.594 1000.72,963.549C1000.72,958.064 1001.82,953.722 
18561004.01,950.524C1006.2,947.326 1009.43,945.727 1013.71,945.727C1020.53,945.727 1024.36,949.535 1025.19,957.152L1018.59,958.227C1018.14,953.865 1016.56,951.684 1013.86,951.684C1012.21,951.684 1010.9,952.489 1009.92,954.101C1008.93,955.712 1008.44,958.764 1008.44,963.256C1008.44,967.244 1008.92,970.051 1009.88,971.679C1010.84,973.306 1012.25,974.12 1014.1,974.12C1017.08,974.12 1018.58,971.915 1018.59,967.504L1013.61,967.504L1013.61,961.791Z"/>
1857                </g>
1858                <g transform="matrix(1,0,0,1,0,-10.5054)">
1859                    <path d="M1037.93,946.239L1045.3,946.239L1054.82,979.564L1047.33,979.564L1045.67,972.68L1036.29,972.68L1034.66,979.564L1027.92,979.564L1037.93,946.239ZM1044.28,966.967L1040.93,953.361L1037.69,966.967L1044.28,966.967Z"/>
1860                </g>
1861                <g transform="matrix(1,0,0,1,0,-10.5054)">
1862                    <path d="M1068.81,961.791L1080.39,961.791L1080.39,979.564L1077.29,979.564L1076.33,975.756C1074.54,978.637 1071.86,980.077 1068.28,980.077C1064.48,980.077 1061.48,978.584 1059.26,975.597C1057.03,972.611 1055.92,968.594 1055.92,963.549C1055.92,958.064 1057.02,953.722 1059.21,950.524C1061.4,947.326 1064.63,945.727 1068.91,945.727C1075.73,945.727 1079.56,949.535 1080.39,957.152L1073.79,958.227C1073.34,953.865 1071.76,951.684 1069.06,951.684C1067.41,951.684 1066.1,952.489 1065.12,954.101C1064.13,955.712 1063.64,958.764 1063.64,963.256C1063.64,967.244 1064.12,970.051 1065.08,971.679C1066.04,973.306 1067.45,974.12 1069.3,974.12C1072.28,974.12 1073.78,971.915 1073.79,967.504L1068.81,967.504L1068.81,961.791Z"/>
1863                </g>
1864                <g transform="matrix(1,0,0,1,0,-10.5054)">
1865                    <path d="M1086.1,946.239L1093.42,946.239L1093.42,973.314L1104.16,973.314L1104.16,979.564L1086.1,979.564L1086.1,946.239Z"/>
1866                </g>
1867                <g transform="matrix(1,0,0,1,0,-10.5054)">
1868                    <rect x="1107.39" y="946.239" width="7.324" height="33.325"/>
1869                </g>
1870                <g transform="matrix(1,0,0,1,0,-10.5054)">
1871                    <path d="M1126.89,946.239L1134.27,946.239L1143.79,979.564L1136.29,979.564L1134.63,972.68L1125.26,972.68L1123.62,979.564L1116.88,979.564L1126.89,946.239ZM1133.24,966.967L1129.9,953.361L1126.65,966.967L1133.24,966.967Z"/>
1872                </g>
1873                <g transform="matrix(1,0,0,1,0,-10.5054)">
1874                    <path d="M1146.57,946.239L1157.05,946.239C1159.08,946.239 1160.64,946.333 1161.72,946.52C1162.8,946.707 1163.9,947.212 1165.01,948.034C1166.11,948.856 1166.98,949.979 1167.61,951.403C1168.23,952.827 1168.55,954.426 1168.55,956.2C1168.55,960.367 1166.98,963.297 1163.86,964.989L1169.99,979.564L1162,979.564L1157.56,966.381L1153.9,966.381L1153.9,979.564L1146.57,979.564L1146.57,946.239ZM1153.9,951.635L1153.9,960.985L1157.12,960.985C1159.98,960.985 1161.42,959.382 1161.42,956.176C1161.42,955.069 1161.2,954.162 1160.78,953.454C1160.36,952.746 1159.87,952.265 1159.3,952.013C1158.74,951.761 1157.92,951.635 1156.83,951.635L1153.9,951.635Z"/>
1875                </g>
1876                <g transform="matrix(1,0,0,1,0,-10.5054)">
1877                    <path d="M1173.82,946.239L1181.7,946.239C1185.12,946.239 1187.9,946.699 1190.04,947.619C1192.18,948.538 1193.89,950.235 1195.18,952.709C1196.47,955.183 1197.11,958.528 1197.11,962.743C1197.11,965.738 1196.72,968.395 1195.94,970.714C1195.16,973.034 1194.13,974.861 1192.86,976.195C1191.59,977.53 1190.16,978.425 1188.57,978.881C1186.97,979.337 1184.98,979.564 1182.58,979.564L1173.82,979.564L1173.82,946.239ZM1181.14,951.952L1181.14,973.852L1182.39,973.852C1184.08,973.852 1185.39,973.526 1186.32,972.874C1187.25,972.222 1187.99,971.086 1188.54,969.464C1189.09,967.843 1189.37,965.501 1189.37,962.438C1189.37,959.602 1189.07,957.419 1188.45,955.887C1187.84,954.356 1187.08,953.317 1186.16,952.771C1185.24,952.225 1183.98,951.952 1182.39,951.952L1181.14,951.952Z"/>
1878                </g>
1879                <g transform="matrix(1,0,0,1,0,-10.5054)">
1880                    <rect x="1201.92" y="946.239" width="7.324" height="33.325"/>
1881                </g>
1882            </g>
1883        </g>
1884        <g transform="matrix(2.58869,-0.00194918,-0.00180325,-2.73735,119.904,2478.15)">
1885            <path d="M1195.04,572.101L1194.98,479.372L1177.62,479.384L1177.66,544.443L1136.76,479.336L1116.13,479.322L1195.1,608.586L1195.12,572.232L1195.04,572.101Z"/>
1886        </g>
1887        <g transform="matrix(-1.60956,0.00121193,-0.00110175,-1.67246,4717.82,1791.39)">
1888            <path d="M965.392,584.864L1090.21,381.954L1215.15,585.045L1180.7,585.02L1091.18,438.471L1001.74,584.89L965.392,584.864Z"/>
1889        </g>
1890        <g transform="matrix(-2.46304,0.00185457,-0.00180325,-2.73735,5661.03,2473.9)">
1891            <path d="M1194.99,572.027L1195.12,572.232L1195.1,608.586L1116.13,479.322L1136.76,479.336L1176.77,543.024L1176.82,479.313L1195.06,479.325L1194.99,572.027Z"/>
1892        </g>
1893        <g transform="matrix(-0.938495,0.00070665,-0.000635684,-0.964976,3985.55,1337.81)">
1894            <path d="M991.072,543.12L1090.21,381.954L1189.45,543.266L1127.3,543.22L1088.01,479.343L1048.75,543.162L991.072,543.12Z"/>
1895        </g>
1896    </g>
1897</svg>
1898</div>
1899        </div>
1900      </a>
1901    </div>
1902    <nav class="nav-pills" aria-label="Primary">
1903      <div class="gg-section"><a href="https://mariogagliardi.com/stories" class="mg-nav-link"><svg class="nav-reference-icon nav-stories-icon" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9.5"/><path class="nav-icon-solid" d="m9.15 6.95 8.1 5.05-8.1 5.05V6.95Z"/></svg><h3>Stories</h3></a></div>
1904      <div class="gg-section"><a href="https://mariogagliardi.com/spaces" class="mg-nav-link"><svg class="nav-reference-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="m8 4 4-2.3L16 4M4.5 6 2 7.45v4.2M2 15.3v3l3.2 1.85M8.4 21.35 12 23.4l3.6-2.05M18.8 20.15 22 18.3v-3M22 11.65v-4.2L19.5 6M5.35 8.2 12 12l6.65-3.8M12 12v7.4"/></svg><h3>Spaces</h3></a></div>
1905      <div class="gg-section"><a href="https://mariogagliardi.com/designs" class="mg-nav-link"><svg class="nav-reference-icon nav-designs-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 3v18M12 3v18M18 3v18M2.5 6.7c2.25 0 3.35 1.55 5.55 1.55S11.4 6.7 13.65 6.7s3.35 1.55 5.55 1.55c.95 0 1.65-.3 2.3-.7M2.5 12c2.25 0 3.35 1.55 5.55 1.55S11.4 12 13.65 12s3.35 1.55 5.55 1.55c.95 0 1.65-.3 2.3-.7M2.5 17.3c2.25 0 3.35 1.55 5.55 1.55s3.35-1.55 5.6-1.55 3.35 1.55 5.55 1.55c.95 0 1.65-.3 2.3-.7"/></svg><h3>Designs</h3></a></div>
1906      <div class="gg-section"><a href="https://mariogagliardi.com/philosophy" class="mg-nav-link"><svg class="nav-reference-icon" aria-hidden="true" viewBox="0 0 24 24"><g transform="translate(1.1 .1) scale(.91)"><path d="M9.9 1.5h4.2l.45 2.75c.72.2 1.4.48 2.03.84l2.26-1.63 2.97 2.97-1.63 2.26c.36.63.64 1.31.84 2.03l2.75.45v4.2l-2.75.45a9.5 9.5 0 0 1-.84 2.03l1.63 2.26-2.97 2.97-2.26-1.63c-.63.36-1.31.64-2.03.84l-.45 2.75H9.9l-.45-2.75a9.5 9.5 0 0 1-2.03-.84l-2.26 1.63-2.97-2.97 1.63-2.26a9.5 9.5 0 0 1-.84-2.03l-2.75-.45v-4.2l2.75-.45c.2-.72.48-1.4.84-2.03L2.19 6.43l2.97-2.97 2.26 1.63c.63-.36 1.31-.64 2.03-.84L9.9 1.5Z"/><circle cx="12" cy="13.27" r="4.55"/></g></svg><h3>Philosophy</h3></a></div>
1907      <div class="gg-section"><a href="https://mariogagliardi.com/mario" class="mg-nav-link"><svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="8" r="3.5"/><path d="M5 20c.7-4 3-6 7-6s6.3 2 7 6"/></svg><h3>About</h3></a></div>
1908      <div class="gg-section mg-nav-parent">
1909        <button class="mg-nav-link mg-nav-trigger" type="button" aria-haspopup="true"><svg aria-hidden="true" viewBox="0 0 24 24"><rect x="4" y="4" width="6" height="6" rx="1"/><rect x="14" y="4" width="6" height="6" rx="1"/><rect x="4" y="14" width="6" height="6" rx="1"/><rect x="14" y="14" width="6" height="6" rx="1"/></svg><h3>Lab</h3></button>
1910        <div class="mg-subnav" role="menu" aria-label="Lab">
1911          <a href="https://mariogagliardi.com/projects" class="mg-nav-link mg-subnav-link" role="menuitem"><h3>Projects</h3></a>
1912          <a href="https://mariogagliardi.com/papers" class="mg-nav-link mg-subnav-link" role="menuitem"><h3>Papers</h3></a>
1913        </div>
1914      </div>
1915    </nav>
1916    <div class="gg-section"><a href="https://mariogagliardi.com/contact" class="mg-nav-link"><h3>Contact</h3><svg aria-hidden="true" viewBox="0 0 24 24"><path d="m7 17 10-10M8 7h9v9"/></svg></a></div>
1917  </div>
1918  <main>
1919    <div id="app">
1920      <div id="THREE-CONTAINER"></div>
1921    </div>
1922  </main>
1923
1924  
1925  <div class="loading-overlay is-visible" id="loadingOverlay" aria-hidden="false">
1926    <div class="loading-overlay__content">
1927      <p class="loading-overlay__value" id="loadingValue">0%</p>
1928      <div class="loading-overlay__bar" aria-hidden="true">
1929        <div class="loading-overlay__barFill" id="loadingBarFill"></div>
1930      </div>
1931      <p class="loading-overlay__caption">Loading Spaces</p>
1932    </div>
1933  </div>
1934
1935  <div class="slow-load-indicator" id="designscapeSlowLoadIndicator" aria-hidden="true">
1936    <span id="designscapeSlowLoadLoaded">0 loaded</span>
1937    <span class="slow-load-indicator__divider" aria-hidden="true">/</span>
1938    <span id="designscapeSlowLoadPending">0 loading</span>
1939  </div>
1940  <div class="designscape-startup-tip designscape-mobile-tip" id="designscapeMobileTip" aria-hidden="true">
1941    <div class="mobile-onboarding-stage" data-mobile-onboarding-stage="swipe">
1942      <p class="mobile-onboarding-text">Drag and hold to navigate</p>
1943      <img class="mobile-onboarding-icon mobile-onboarding-icon--swipe" src="./handswipe.svg" alt="">
1944    </div>
1945    <div class="mobile-onboarding-stage" data-mobile-onboarding-stage="tap">
1946      <p class="mobile-onboarding-text">tap to explore</p>
1947      <img class="mobile-onboarding-icon mobile-onboarding-icon--tap" src="./handtap.svg" alt="">
1948    </div>
1949  </div>
1950  <div class="space-cursor" id="designscapeSpaceCursor" aria-hidden="true">
1951    <div class="space-cursor__stage" data-space-cursor-stage="navigate">
1952      <span class="space-cursor__text">move / scroll</span>
1953      <img class="space-cursor__icon" src="./navigate.svg" alt="">
1954    </div>
1955    <div class="space-cursor__stage" data-space-cursor-stage="keyboard">
1956      <span class="space-cursor__text">move</span>
1957      <img class="space-cursor__icon" src="./keyboard.svg" alt="">
1958    </div>
1959    <div class="space-cursor__stage" data-space-cursor-stage="explore">
1960      <span class="space-cursor__text">explore</span>
1961      <img class="space-cursor__icon" src="./click.svg" alt="">
1962    </div>
1963  </div>
1964  <div class="intro-overlay" id="introOverlay" aria-hidden="true">
1965    <div class="intro-overlay__content">
1966      <p class="intro-overlay__text">scroll/drag to explore</p>
1967      <div class="intro-overlay__arrow" id="introArrow">&darr;</div>
1968    </div>
1969  </div>
1970
1971  <div class="focus-overlay" id="focusOverlay" hidden>
1972    <div class="focus-backdrop" id="focusBackdrop"></div>
1973    <div class="focus-panel" id="focusPanel">
1974      <div class="focus-stageWrap" id="focusStageWrap">
1975        <div class="focus-slideNav" id="focusSlideNav" aria-hidden="true"></div>
1976        <div class="focus-stage" id="focusStage">
1977          <div class="focus-viewer" id="focusViewer"></div>
1978        </div>
1979      </div>
1980      <div class="focus-info" id="focusInfo">
1981        <button class="focus-close" id="focusClose" aria-label="Back to Spaces">
1982          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18l-6-6 6-6"></path></svg>
1983          <span>Back to Spaces</span>
1984        </button>
1985        <div class="focus-copy">
1986          <div class="focus-kicker" id="focusKicker">De Caldes Rugs</div>
1987          <h1 id="focusTitle">Untitled</h1>
1988          <div class="focus-options opt" id="focusOptions" hidden></div>
1989          <p class="focus-text" id="focusText"></p>
1990          <p class="focus-relatedPrompt" id="focusRelatedPrompt" hidden>click a color to show matching rugs</p>
1991          <div class="focus-palette" id="focusPalette" hidden></div>
1992          <div class="focus-actions">
1993            <button class="focus-action" id="addToDigitalRoom" type="button">Add to your digital room</button>
1994            <a class="focus-link" id="focusLink" href="#" target="_blank" rel="noopener noreferrer">EXPLORE &amp; BUY</a>
1995			</div>
1996        </div>
1997      </div>
1998    </div>
1999  </div>
2000
2001  <section class="digital-room-overlay" id="digitalRoomOverlay" hidden aria-label="Your digital room">
2002    <div class="digital-room__backdrop" aria-hidden="true"></div>
2003    <div class="digital-room__shell" role="dialog" aria-modal="true" aria-label="Your digital room">
2004      <div class="digital-room__stage" id="digitalRoomStage">
2005        <div class="digital-room__canvas" id="digitalRoomCanvas"></div>
2006        <img class="digital-room__snapshot" id="digitalRoomSnapshot" alt="Frozen preview of your digital room">
2007        <div class="digital-room__labels" id="digitalRoomLabels"></div>
2008      </div>
2009      <div class="digital-room__topbar">
2010        <button class="digital-room__window-button digital-room__minimize" id="digitalRoomMinimize" type="button" aria-label="Minimize digital room"></button>
2011        <button class="digital-room__window-button digital-room__clear-trigger" id="digitalRoomClear" type="button" aria-haspopup="dialog" aria-controls="digitalRoomClearConfirmation" aria-expanded="false">Clear</button>
2012      </div>
2013      <div class="digital-room-clear-confirmation" id="digitalRoomClearConfirmation" role="dialog" aria-modal="false" aria-label="Clear your digital room" hidden>
2014        <p>This will clear your digital room</p>
2015        <div class="digital-room-clear-confirmation__actions">
2016          <button class="digital-room-clear-confirmation__confirm" id="digitalRoomClearConfirm" type="button">clear</button>
2017          <button id="digitalRoomClearCancel" type="button">cancel</button>
2018        </div>
2019      </div>
2020      <p class="digital-room__status" id="digitalRoomStatus" role="status" aria-l
2020ive="polite">Drag a product to move it. Drag the room to look around.</p>
2021      <div class="digital-room__toolbar" aria-label="Digital room controls">
2022        <div class="digital-room-texture-menu" id="digitalRoomFloorMenu">
2023          <button class="digital-room-texture-trigger" id="digitalRoomFloorTrigger" type="button" aria-haspopup="true">
2024            <img id="digitalRoomFloorPreview" alt="Current floor texture"><span>Floor</span>
2025            <svg class="digital-room-texture-arrow" viewBox="0 0 12 7" aria-hidden="true"><path d="M1 1l5 5 5-5"/></svg>
2026          </button>
2027          <div class="digital-room-texture-options" id="digitalRoomFloorOptions" role="menu"></div>
2028        </div>
2029        <div class="digital-room-texture-menu" id="digitalRoomWallMenu">
2030          <button class="digital-room-texture-trigger" id="digitalRoomWallTrigger" type="button" aria-haspopup="true">
2031            <img id="digitalRoomWallPreview" alt="Current wall texture"><span>Wall</span>
2032            <svg class="digital-room-texture-arrow" viewBox="0 0 12 7" aria-hidden="true"><path d="M1 1l5 5 5-5"/></svg>
2033          </button>
2034          <div class="digital-room-texture-options" id="digitalRoomWallOptions" role="menu"></div>
2035        </div>
2036        <button class="digital-room__export" id="digitalRoomPdf" type="button">
2037          <svg class="digital-room__download-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5v9m0 0 3.4-3.4M8 10.5 4.6 7.1M2.5 14.5h11"/></svg>
2038          <span>Download PDF</span>
2039        </button>
2040      </div>
2041    </div>
2042  </section>
2043
2044  <div class="moodboard-shell" id="moodboardShell" hidden>
2045    <div class="moodboard-shell__backdrop" id="moodboardBackdrop" aria-hidden="true"></div>
2046    <div class="moodboard-shell__panel">
2047      <iframe
2048        class="moodboard-shell__frame"
2049        id="moodboardFrame"
2050        data-src="./moodboard.html?v=20260509-move-delete1"
2051        title="Moodboard"
2052        loading="eager"
2053      ></iframe>
2054    </div>
2055  </div>
2056  <button class="audio-toggle sound-toggle" id="soundToggle" type="button" aria-label="Play ambient soundtrack" aria-pressed="false"><span class="audio-toggle__bars" aria-hidden="true"><span class="audio-toggle__bar"></span><span class="audio-toggle__bar"></span><span class="audio-toggle__bar"></span></span><span class="audio-toggle__label">Sound off</span></button>
2057  
2057<script src="./sound-toggle.js?v=20260601-bars1"></script>
2057
2058  
2058<script src="./page-transitions.js?v=20260801-framehome1" defer></script>
2058
2059  
2059<script src="./mobile-nav.js?v=20260721-mobile-icons2" defer></script>
2059
2060  
2060<script type="importmap">
2061    {
2062      "imports": {
2063        "three": "./three.module.js",
2064        "postprocessing": "https://cdn.jsdelivr.net/npm/[email protected]/build/index.js"
2065      }
2066    }
2067  </script>
2067
2068  
2068<script src="./rug-data.js?v=20260506-rug-size4"></script>
2068
2069  
2069<script src="./furniture-data.js?v=20260521-furniture-refresh1"></script>
2069
2070  
2070<script src="./clip-data.js?v=20260806-missing-clip1"></script>
2070
2071  
2071<script src="./space-data.js?v=20260806043617"></script>
2071
2072  
2072<script src="https://unpkg.com/[email protected]/dist/jspdf.umd.min.js"></script>
2072
2073  
2073<script type="module" src="./designscape.js?v=20260806-missing-clip1"></script>
2073
2074</body>
2075</html>
2076

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.