<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  
  <!-- Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-FZESH6CHXY"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-FZESH6CHXY');
  </script>
  
  <!-- Metricool tracking -->
  <script>function loadScript(a){var b=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.src="https://tracker.metricool.com/resources/be.js",c.onreadystatechange=a,c.onload=a,b.appendChild(c)}loadScript(function(){beTracker.t({hash:"10dbbf24f5753c177becee31def37b9b"})});</script>
  
  <title>Winston Chmielinski — Systems & Interfaces</title>
  
  <meta name="description" content="Winston Chmielinski (weseeclearly) builds interfaces that surface the invisible forces shaping us, where everything holds everything else up.">
  <meta name="author" content="Winston Chmielinski">
  <meta name="keywords" content="systems art, protocol art, systems aesthetics, generative art, computational art, interactive installation, data sonification, sonification art, creative coding, algorithmic art, new media art, media art, cybernetic art, process-based art, rules-based art, instruction-based art, conceptual art, software art, data art, digital art, sound art, projective geometry, counterspace, generative weaving, weaving draft, entropy art, time-based media, field conditions, Winston Chmielinski, weseeclearly">
  <meta name="robots" content="index, follow">
  <meta name="theme-color" content="#fbfbf9">
  <link rel="canonical" href="https://wsc.fyi/">

  <!-- Icons -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=2">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="weseeclearly">
  <meta property="og:url" content="https://wsc.fyi/">
  <meta property="og:title" content="Winston Chmielinski — Systems & Interfaces">
  <meta property="og:description" content="Winston Chmielinski (weseeclearly) builds interfaces that surface the invisible forces shaping us, where everything holds everything else up.">
  <meta property="og:image" content="https://wsc.fyi/og-image.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Winston Chmielinski — Systems & Interfaces">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@interfaciing">
  <meta name="twitter:creator" content="@interfaciing">
  <meta name="twitter:title" content="Winston Chmielinski — Systems & Interfaces">
  <meta name="twitter:description" content="Winston Chmielinski (weseeclearly) builds interfaces that surface the invisible forces shaping us, where everything holds everything else up.">
  <meta name="twitter:image" content="https://wsc.fyi/og-image.jpg">

  <!-- Structured data -->
  <script type="application/ld+json">
  {"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://wsc.fyi/#website","url":"https://wsc.fyi/","name":"Winston Chmielinski — Systems & Interfaces","inLanguage":"en","about":["Systems art","Protocol art","Generative art","Interactive installation"],"publisher":{"@id":"https://wsc.fyi/#person"}},{"@type":"Person","@id":"https://wsc.fyi/#person","name":"Winston Chmielinski","alternateName":"weseeclearly","url":"https://wsc.fyi/","image":"https://wsc.fyi/og-image.jpg","jobTitle":"Artist","description":"Winston Chmielinski (weseeclearly) is an artist working in systems art and protocol art: interactive installations, generative and computational art, and data sonification that make hidden, formative forces legible and playable. His practice spans rules-based and instruction-based art, creative coding, projective geometry and counterspace, and generative weaving.","knowsAbout":["Systems art","Protocol art","Systems aesthetics","Generative art","Computational art","Interactive installation art","Data sonification","Creative coding","Algorithmic art","New media art","Cybernetic art","Process-based art","Rules-based art","Instruction-based art","Conceptual art","Software art","Projective geometry","Counterspace","Generative weaving","Weaving draft notation","Entropy and decay in art","Time-based media","Sound art"],"sameAs":["https://www.instagram.com/weseeclearly","https://x.com/interfaciing","https://www.youtube.com/@SelfOhYes","https://www.linkedin.com/in/weseeclearly","https://paragraph.com/@interfacing/","https://weseeclearly.com"]}]}
  </script>

  <!-- Resource hints -->
  <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
  <link rel="preconnect" href="https://d3js.org" crossorigin>
  <link rel="dns-prefetch" href="https://www.googletagmanager.com">

  <link rel="stylesheet" href="styles.css?v=67.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>

  <!-- Fullscreen Hologram Wave Interference Canvas -->
  <canvas id="moire-canvas"></canvas>

  <div class="layout-wrapper">
    
    <!-- Calibration Bounding Crop Marks (Felt Sanctuary Frame) -->
    <div class="crop-mark-container crop-top-left"></div>
    <div class="crop-mark-container crop-top-right"></div>
    <div class="crop-mark-container crop-bottom-left"></div>
    <div class="crop-mark-container crop-bottom-right"></div>

    <!-- ==================== HEADER FOYER ==================== -->
    <header class="catalog-header">
      <div class="branding-bar">
        <div class="brand-title">WINSTON CHMIELINSKI // SYSTEMS &amp; INTERFACES</div>

      </div>
      
      <!-- High-Contrast Physics Graph Logo - Dynamic & Expanded Constellation -->
      <div class="logo-rig-3d-foyer" style="height: 380px; width: 100%;">
        <!-- Constellation Dynamic Shape Controller HUD Panel -->
        <div class="constellation-controller font-tech" id="constellation-hud" style="display: none !important;">
          <button class="controller-btn-tech active" id="constellation-morph-status" onclick="triggerAutoMorphToggle()" style="margin-right: 4px; font-weight: 700; color: var(--color-ui-blue); cursor: pointer;">Auto: Active</button>
          <span style="opacity: 0.25; margin: 0 2px;">|</span>
          <span style="font-size: 10.5px; opacity: 0.5; font-weight: 700; letter-spacing: 0.05em; color: var(--color-ui-blue);">Creatures</span>
          <button class="controller-btn-tech active" data-shape="ORION" onclick="triggerConstellationShape('ORION')">ORION</button>
          <button class="controller-btn-tech" data-shape="CYGNUS" onclick="triggerConstellationShape('CYGNUS')">CYGNUS</button>
          <button class="controller-btn-tech" data-shape="SERPENS" onclick="triggerConstellationShape('SERPENS')">SERPENS</button>
          <button class="controller-btn-tech" data-shape="MORPHO" onclick="triggerConstellationShape('MORPHO')">MORPHO</button>
          <button class="controller-btn-tech" data-shape="PHOENIX" onclick="triggerConstellationShape('PHOENIX')">PHOENIX</button>
          <span style="opacity: 0.25; margin: 0 2px;">|</span>
          <span style="font-size: 10.5px; opacity: 0.5; font-weight: 700; letter-spacing: 0.05em; color: var(--color-ui-ochre);">Geometries</span>
          <button class="controller-btn-tech" data-shape="GRID" onclick="triggerConstellationShape('GRID')">GRID</button>
          <button class="controller-btn-tech" data-shape="LISSAJOUS" onclick="triggerConstellationShape('LISSAJOUS')">LISSAJOUS</button>
          <button class="controller-btn-tech" data-shape="INFINITY" onclick="triggerConstellationShape('INFINITY')">INFINITY</button>
          <button class="controller-btn-tech" data-shape="STAR" onclick="triggerConstellationShape('STAR')">STAR</button>
          <button class="controller-btn-tech" data-shape="SPIRAL" onclick="triggerConstellationShape('SPIRAL')">SPIRAL</button>
        </div>
        <div id="force-graph" style="width: 100%; height: 100%;"></div>
      </div>
    </header>

    <!-- ==================== MAIN SANDBOX GRID ==================== -->
    <main class="sandbox-grid">
      
      <!-- Artist Statement Foyer Banner -->
      <div class="artist-statement-banner">
        <div class="crop-mark-container crop-top-left" style="transform: scale(0.5); top: 8px; left: 8px;"></div>
        <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.5); bottom: 8px; right: 8px;"></div>
        <p class="artist-statement-text">
          I build interfaces that turn attention from the center toward the periphery, the interior, and the invisible forces that shape us. Each one takes one of those forces — the timing inside a voice, the logic under a painting, the slow coming-apart of an object held as value — and makes it something you can see, play, and move through. This is the digital as a way back to ourselves, and to rhythms we've lost touch with.
        </p>
      </div>

      <!-- Sticky Active-Filters HUD (Filtered Viewport State) -->
      <div class="active-filters-hud font-tech" id="active-filters-hud">
        <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 6px; left: 6px;"></div>
        <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 6px; right: 6px;"></div>
        <div class="hud-left">
          <span style="color: var(--color-ui-blue); font-weight: 700;">FILTERED VIEWPORT //</span>
          <span class="active-tag-pill" id="active-tag-display">--</span>
        </div>
        <button class="btn-clear-filter" onclick="clearExhibitionFilter()">[ × CLEAR FILTER ]</button>
      </div>
      
      <!-- Left Column: Sequential Exhibition Rooms -->
      <div class="spec-container" style="z-index: 10;">

        <nav class="floating-wayfinder" id="floating-wayfinder-deck">
      <div class="wayfinder-line"></div>
      <ul class="wayfinder-nodes">
        <li class="wayfinder-item active" data-target="sec-paint-decay" onclick="scrollToSection('sec-paint-decay')">
          <span class="wayfinder-num">01</span>
          <span class="wayfinder-label">DECAY</span>
        </li>
        <li class="wayfinder-item" data-target="sec-painting-machine" onclick="scrollToSection('sec-painting-machine')">
          <span class="wayfinder-num">02</span>
          <span class="wayfinder-label">WEAVING</span>
        </li>
        <li class="wayfinder-item" data-target="sec-field-conditions" onclick="scrollToSection('sec-field-conditions')">
          <span class="wayfinder-num">03</span>
          <span class="wayfinder-label">FIELD</span>
        </li>
        <li class="wayfinder-item" data-target="sec-selfos" onclick="scrollToSection('sec-selfos')">
          <span class="wayfinder-num">04</span>
          <span class="wayfinder-label">SELFOS</span>
        </li>
        <li class="wayfinder-item" data-target="sec-projective-geometry" onclick="scrollToSection('sec-projective-geometry')">
          <span class="wayfinder-num">05</span>
          <span class="wayfinder-label">GEOMETRY</span>
        </li>
        <li class="wayfinder-item" data-target="sec-interfacers" onclick="scrollToSection('sec-interfacers')">
          <span class="wayfinder-num">06</span>
          <span class="wayfinder-label">FACES</span>
        </li>
        <li class="wayfinder-item" data-target="sec-weseeclearly" onclick="scrollToSection('sec-weseeclearly')">
          <span class="wayfinder-num">07</span>
          <span class="wayfinder-label">CLEARLY</span>
        </li>
        <li class="wayfinder-item" data-target="sec-interfacing" onclick="scrollToSection('sec-interfacing')">
          <span class="wayfinder-num">08</span>
          <span class="wayfinder-label">INTERFACING</span>
        </li>
        <li class="wayfinder-item" data-target="sec-sonifold" onclick="scrollToSection('sec-sonifold')">
          <span class="wayfinder-num">09</span>
          <span class="wayfinder-label">SONIFOLD</span>
        </li>
        <li class="wayfinder-item" data-target="exhibition-catalogue" onclick="scrollToSection('exhibition-catalogue')">
          <span class="wayfinder-num">10</span>
          <span class="wayfinder-label">CV</span>
        </li>
      </ul>
    </nav>

    <!-- Collapsible Drawer Control Sandbox Panel -->
    <aside class="control-panel" id="system-control-drawer">
      <!-- Clickable Drawer Tab (vertical) -->
      <button class="drawer-toggle-tab font-tech" onclick="toggleControlDrawer()" aria-label="Toggle Control Sandbox">
        <span>Control Sandbox</span> <span class="drawer-arrow-indicator">◀</span>
      </button>

      <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%;">
        <div>
          <h3 style="margin-top: 0;">
            <span>CONTROL SANDBOX</span>
            <span style="opacity: 0.5;">v1.2</span>
          </h3>

          <!-- Theme Toggler -->
          <div class="control-group">
            <label class="control-label">Theme Polarity</label>
            <button class="control-btn" onclick="toggleTheme()">
              <span id="theme-btn-text">Midnight Contrast</span>
              <span>◑</span>
            </button>
          </div>

          <!-- Moiré Canvas Toggler -->
          <div class="control-group">
            <label class="control-label">Interference Moiré</label>
            <button class="control-btn" onclick="toggleMoiré()">
              <span id="moire-btn-text">Prism Dot Grid</span>
              <span>▤</span>
            </button>
          </div>

          <!-- Grid density toggler -->
          <div class="control-group">
            <label class="control-label">Grid Density</label>
            <button class="control-btn" onclick="cycleGridDensity()">
              <span id="grid-btn-text">Grid Scale: 50px</span>
              <span>✛</span>
            </button>
          </div>
        </div>

        <!-- System live logs -->
        <div class="control-group" style="margin-top: 2rem; border-top: 1px dashed var(--color-cad-line); padding-top: 1.5rem; opacity: 0.95;">
          <label class="control-label" style="margin-bottom: 0.25rem;">System Telemetry</label>
          <div style="font-family: var(--font-technical); font-size: 12px; line-height: 1.8; font-weight: 600;">
            Polarity: <span id="telemetry-polarity" style="color: var(--color-ui-red);">Light</span><br>
            Calibration: ACTIVE<br>
            Interference Moiré: ON<br>
            Ratio Lock: Golden 1.618
          </div>
        </div>
      </div>
    </aside>

    <section class="section-box" id="sec-paint-decay" data-keywords="impermanence disintegration value vanitas conservation">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>

          <div class="room-tags-wrapper font-tech">
            <span class="room-tags-label">touches //</span>
            <button class="room-tag-pill" onclick="filterExhibition('disintegration')">disintegration</button>
            <button class="room-tag-pill" onclick="filterExhibition('value')">stored value</button>
            <button class="room-tag-pill" onclick="filterExhibition('vanitas')">vanitas</button>
            <button class="room-tag-pill" onclick="filterExhibition('conservation')">conservation</button>
            <button class="room-tag-pill" onclick="filterExhibition('markets')">markets</button>
          </div>

          <span class="section-num">Impermanence</span>
          <h2 class="section-header">Permanent Collection</h2>
          <div class="project-meta-strip font-tech">
            <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-development"><span class="status-dot"></span><span>In Development</span></span></span>
            <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2026 (Ongoing)</span></span>
          </div>


          <div class="blueprint-viewport-split" id="decay-sandbox" style="height: 580px;">

            <!-- Left Viewport: sped-up decay timelapse (video).
                 Drop the recording at assets/paint-decay-timelapse.mp4 — until then
                 the still (paint-decay-poster.png) stands in via the poster attribute. -->
            <div class="blueprint-left-stack" style="flex-direction: column; padding: 0; justify-content: center; align-items: center; overflow: hidden; background-color: var(--nested-card-bg);">
              <div style="position: relative; height: 100%; aspect-ratio: 500 / 692; max-width: 100%; margin: 0 auto; border: 1px solid var(--color-cad-line); background: #0a0a0e; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                <div class="crop-mark-container crop-top-left" style="transform: scale(0.35); top: 6px; left: 6px;"></div>
                <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.35); bottom: 6px; right: 6px;"></div>
                <video id="decay-timelapse-player" src="assets/paint-decay-timelapse.mp4" poster="assets/paint-decay-poster.png" loop muted autoplay playsinline preload="none" onclick="expandVideo(this)" style="width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in;"></video>
                <span class="font-tech" style="position: absolute; bottom: 6px; left: 6px; font-size: 9.5px; background: rgba(0,0,0,0.6); color: #fff; padding: 1px 4px; border-radius: 1px;">Decades of decay, in seconds</span>
              </div>
            </div>

            <!-- Right Viewport: 4-slide deck -->
            <div class="blueprint-right-details decay-slide-card" id="decay-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid var(--color-cad-line); background-color: var(--nested-card-bg); border-radius: 4px; overflow: hidden; position: relative;">
              <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
              <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>

              <div class="decay-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
                <div class="decay-slides-viewport" id="decay-slides-viewport" style="display: flex; width: 400%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">

                  <!-- SLIDE 01: Overview -->
                  <div class="decay-slide-pane active" id="pane-decay-overview" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div class="overview-glance">
                      <p class="overview-question">What remains?</p>
                      <p class="overview-what">A $200 million painting is as susceptible to decay as anything else — and over time, conservation can turn it into an effigy of itself.</p>
                    </div>
                  </div>

                  <!-- SLIDE 02: Statement -->
                  <div class="decay-slide-pane" id="pane-decay-statement" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div class="sonifold-essay-scroll-area" style="flex: 1; overflow-y: auto; padding-right: 0.5rem; margin: 0;">
                      <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin: 0 0 0.75rem 0;">
                        What does it mean that a painting can sell for two hundred million, and that owning it makes you want to stop it from changing at all? A lot of these works end up in freeports, climate-sealed vaults where the art is held as an asset and never shown, kept alive by being kept from life.
                      </p>
                      <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin: 0 0 0.75rem 0;">
                        This digital display runs the opposite way. It shows the painting at the scale of the original and models how it actually comes apart — craquelure from the stretcher corners, lead-soap eruption, bleaching, creeping mold — grounded in conservation science (Marion Mecklenburg's studies of how paint films fail). You set the conditions: leave it to the forces, or hit Restore and watch the repair freeze the damage into permanent scars and drop the value to a third.
                      </p>
                      <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin: 0; border-left: 2px solid var(--color-ui-red); padding-left: 0.5rem; font-style: italic;">
                        The questions underneath drive both the market and the way we hold onto things: what does it cost a work to be preserved, and what, in the end, are we really keeping?
                      </p>
                    </div>
                  </div>

                  <!-- SLIDE 03: Decay Vectors -->
                  <div class="decay-slide-pane" id="pane-decay-vectors" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">Bibliography &amp; Research</h4>
                    </div>
                    <div class="sonifold-essay-scroll-area" style="flex: 1; overflow-y: auto; padding-right: 0.5rem; margin: 0.5rem 0;">
                      <div class="research-list">
                        <details class="research-entry"><summary><span class="research-author">01 / MECKLENBURG, MARION</span><span class="research-title">The Meaning of Mechanical Properties of Paintings (1991)</span></summary><div class="research-note">Paint films fail first at the corners, locked to the stretcher, as the support swells and shrinks with humidity. <strong>In the work:</strong> craquelure begins in the corners and spreads as cellular stress fracture.</div></details>
                        <details class="research-entry"><summary><span class="research-author">02 / GOETHE, J. W. VON</span><span class="research-title">Theory of Colours (1810)</span></summary><div class="research-note">Colour arises at the boundary where light meets darkness; the two are poles of one phenomenon. <strong>In the work:</strong> the abstracted decay palette is a polar form of the original, colours drawn from darkness set against colours drawn from light.</div></details>
                        <details class="research-entry"><summary><span class="research-author">03 / BRANDI, CESARE</span><span class="research-title">Theory of Restoration (1963)</span></summary><div class="research-note">Restoration is the moment a work is recognised; the urge to complete the lacuna can quietly replace the thing itself. <strong>In the work:</strong> Restore freezes the cracks and mold as permanent scars and relabels the piece a Synthetic Clone.</div></details>
                        <details class="research-entry"><summary><span class="research-author">04 / KEUNE, K. &amp; BOON, J.</span><span class="research-title">Analytical Imaging of Lead Soaps in Paint (2007)</span></summary><div class="research-note">Metal carboxylates migrate, aggregate, and erupt through the paint film across decades. <strong>In the work:</strong> lead-soap saponification spreads by aggregation over the surface.</div></details>
                      </div>
                    </div>
                  </div>

                  <!-- SLIDE 04: Gallery -->
                  <div class="decay-slide-pane" id="pane-decay-gallery" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">States Of Disintegration</h4>
                    </div>
                    <div class="painting-gallery-grid" style="flex: 1; display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 0.5rem; min-height: 250px;">
                      <!-- Interactive before/after: drag to pull the original Klimt into its decayed self -->
                      <div class="gallery-item-frame" style="border: 1px solid var(--color-cad-line); padding: 0; overflow: hidden; min-height: 320px;">
                        <div class="decay-compare" id="klimt-compare">
                          <img class="dc-original" src="assets/klimt-original.webp" alt="Gustav Klimt, Portrait of Elisabeth Lederer — intact" />
                          <img class="dc-decayed" src="assets/klimt-decayed.webp" alt="The same portrait, fully decayed by the simulation" />
                          <div class="dc-handle"></div>
                          <span class="dc-label dc-label-l font-tech">ORIGINAL</span>
                          <span class="dc-label dc-label-r font-tech">FORCES OF DECAY</span>
                          <span class="dc-hint font-tech">⇆ drag</span>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

              <!-- Slide Controller Footer -->
              <div class="decay-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
                <button class="controller-btn-tech active" id="btn-decay-slide-overview" onclick="switchDecaySlide(0)" style="flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0.4rem 0.15rem;">Overview</button>
                <button class="controller-btn-tech" id="btn-decay-slide-statement" onclick="switchDecaySlide(1)" style="flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0.4rem 0.15rem;">Text</button>
                <button class="controller-btn-tech" id="btn-decay-slide-vectors" onclick="switchDecaySlide(2)" style="flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0.4rem 0.15rem;">Research</button>
                <button class="controller-btn-tech" id="btn-decay-slide-gallery" onclick="switchDecaySlide(3)" style="flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0.4rem 0.15rem;">Gallery</button>
              </div>
            </div>
          </div>
        </section>

        <section class="section-box" id="sec-painting-machine" data-keywords="painting topology weaving steganography">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>
          
          <div class="room-tags-wrapper font-tech">
            <span class="room-tags-label">touches //</span>
            <button class="room-tag-pill" onclick="filterExhibition('painting')">painting</button>
            <button class="room-tag-pill" onclick="filterExhibition('topology')">topology</button>
            <button class="room-tag-pill" onclick="filterExhibition('weaving')">weaving</button>
            <button class="room-tag-pill" onclick="filterExhibition('steganography')">steganography</button>
          </div>

          <span class="section-num">Translation</span>
          <h2 class="section-header">Systems of Intuition</h2>
          <div class="project-meta-strip font-tech">
            <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-complete"><span class="status-dot"></span><span>Complete</span></span></span>
            <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2026</span></span>
          </div>
          

          <!-- Split Viewport Sandbox -->
          <div class="blueprint-viewport-split" id="painting-machine-sandbox" style="height: 580px;">
            
            <!-- Left Viewport: The Interactive Swipe Viewport -->
            <div class="blueprint-left-stack" style="flex-direction: column; padding: 1.5rem; justify-content: space-between; overflow: hidden; background-color: var(--nested-card-bg);">
              
              <!-- Presets at the top of the canvas -->
              <div class="painting-presets-controls" style="display: flex; gap: 0.5rem; width: 100%; margin-bottom: 0.8rem; z-index: 10;">
                <button class="control-btn active" id="btn-preset-soft" onclick="changePaintingPreset('soft')" style="padding: 0.4rem 0.75rem; font-size: 11.5px; margin-bottom: 0 !important; flex: 1; text-align: center; justify-content: center;">
                  Painting A
                </button>
                <button class="control-btn" id="btn-preset-sharp" onclick="changePaintingPreset('sharp')" style="padding: 0.4rem 0.75rem; font-size: 11.5px; margin-bottom: 0 !important; flex: 1; text-align: center; justify-content: center;">
                  Painting B
                </button>
              </div>

              <!-- Swipe Container Wrapper -->
              <div class="swipe-compare-container" id="swipe-container" style="width: 100%; height: calc(100% - 95px); position: relative; border: 1px solid var(--color-cad-line); background: var(--bg-color); overflow: hidden; user-select: none;">
                <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
                <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
                
                <!-- Underlaid Background Image (Oil Painting) -->
                <img loading="lazy" decoding="async" id="swipe-bg-img" src="assets/SOFT-PAINTING.png" alt="Original Painting" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;" />
                
                <!-- Foreground Overlay Wrapper (Clipped Weave) -->
                <div class="swipe-fg-wrapper" id="swipe-fg-wrapper" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: inset(0 0 0 50%); pointer-events: none;">
                  <img loading="lazy" decoding="async" id="swipe-fg-img" src="assets/stage1_bold_grid_soft.webp" alt="Woven Stenography" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;" />
                </div>
                
                <!-- Draggable Handle Separator -->
                <div class="swipe-handle" id="swipe-handle" style="position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background-color: var(--color-ui-blue); cursor: ew-resize; z-index: 50; transform: translateX(-50%); box-shadow: 0 0 10px rgba(0, 71, 171, 0.4);">
                  <div class="swipe-handle-badge font-tech" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); background: var(--card-bg); border: 1px solid var(--color-cad-line-strong); padding: 2px 8px; border-radius: 2px; font-size: 10.5px; color: var(--text-color); font-weight: 700; white-space: nowrap; pointer-events: none;">
                    ◀ WIPE ▶
                  </div>
                </div>
              </div>

              <!-- Draggable percentage indicator -->
              <div style="width: 100%; display: flex; justify-content: space-between; padding-top: 0.6rem; border-top: 1px dashed var(--color-cad-line); margin-top: 0.6rem;">
                <span class="font-tech" style="font-size: 11px; opacity: 0.5;">WIPE COORDINATE</span>
                <span class="font-tech" id="swipe-percent-display" style="font-size: 11px; color: var(--color-ui-blue); font-weight: 700;">50% [THREAD]</span>
              </div>
            </div>

            <!-- Right Viewport: Curatorial Details & Technical Telemetry HUD (Multi-Slide Deck Viewport) -->
            <div class="blueprint-right-details painting-slide-card" id="painting-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid var(--color-cad-line); background-color: var(--nested-card-bg); border-radius: 4px; overflow: hidden; position: relative;">
              <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
              <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
              
              <!-- Active Slides Viewport Wrapper -->
              <div class="painting-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
                <div class="painting-slides-viewport" id="painting-slides-viewport" style="display: flex; width: 400%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
                  
                  <!-- SLIDE 01: Technical Telemetry HUD -->
                  <div class="painting-slide-pane active" id="pane-painting-hud" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div class="overview-glance">
                      <p class="overview-question">What are the binary functions of style?</p>
                      <p class="overview-what">I became curious about the implicit systems I paint by, so I set out to understand my own paintings through the language of weaving. The tool reads a painting across many dimensions and scales and translates it into a complex weaving draft. The system is fully axiomatic, so anyone with the key can read it. It comes out of a longer interest in coordinate systems, language, and translation.</p>
                    </div>

                    <!-- Live Technical Telemetry HUD — kept for JS bindings, hidden from view -->
                    <div class="telemetry-terminal-box" style="min-height: 250px; margin-bottom: 0.5rem; display: none;">
                      <div class="terminal-bar">
                        <span class="terminal-dot" style="background-color: var(--color-ui-blue);"></span>
                        <span class="terminal-title font-tech">Weave Telemetry</span>
                        <span class="terminal-status font-tech" id="telemetry-painting-status">Stable</span>
                      </div>
                      <div class="terminal-body" style="gap: 0.3rem;">
                        <div class="terminal-row">
                          <span class="term-label">Source Pigment:</span>
                          <span class="term-value" id="telemetry-painting-source" style="color: var(--color-ui-blue);">SOFT-PAINTING.png</span>
                        </div>
                        
                        <!-- Cluster Swatch Container -->
                        <div class="terminal-row" style="flex-direction: column; gap: 0.2rem;">
                          <span class="term-label">Extracted Palette:</span>
                          <div id="telemetry-painting-palette" style="display: flex; gap: 4px; margin-top: 0.1rem;">
                            <!-- Populated via Javascript -->
                          </div>
                        </div>

                        <div class="terminal-row">
                          <span class="term-label">Spatial Energy:</span>
                          <span class="term-value" id="telemetry-painting-energy">0.7777 FFT</span>
                        </div>
                        <div class="terminal-row">
                          <span class="term-label">Glaze Index:</span>
                          <span class="term-value" id="telemetry-painting-glaze">2.052 ACCUM</span>
                        </div>
                        <div class="terminal-row">
                          <span class="term-label">Structural Density:</span>
                          <span class="term-value" id="telemetry-painting-density">3% Veil // 65% Mass // 32% Event</span>
                        </div>
                        <div class="terminal-row" style="margin-top: 0.4rem; border-top: 1px dashed var(--color-cad-line); padding-top: 0.4rem;">
                          <span class="term-label" style="color: var(--color-ui-ochre);">Decision Logic:</span>
                          <span class="term-value" id="telemetry-painting-logic" style="font-size: 11.5px; color: var(--color-ui-ochre); line-height: 1.35; white-space: normal; display: block; max-width: 100%;">64-Shaft Echo Pattern Generation</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- SLIDE 02: Scrollable Essay Content -->
                  <div class="painting-slide-pane" id="pane-painting-essay" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <!-- Scrollable Essay Text Area -->
                    <div class="sonifold-essay-scroll-area" id="painting-essay-scroll" style="flex: 1; overflow-y: auto; padding-right: 0.5rem; margin: 0.5rem 0 0.5rem 0;">
                      <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin-top: 0; margin-bottom: 0.75rem;">
                        People picture weaving as a binary craft — threads up or threads down, an image flattened to a grid. Up close it is the opposite. Parallel threads cross in so many combinations that the dimension you can pull out of that binary grid is effectively endless: seams, depth, whole figures, all from over and under.
                      </p>
                      <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin-bottom: 0.75rem;">
                        That is the part I keep circling. Binary systems are fruitful, and I am glad to dismantle the romantic idea that there is a genius in the artist's hand no computer could ever reach. I paint intuitively; this tool reads the painting back to me across many scales, and finds a real structure in it.
                      </p>
                      <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin-bottom: 0.75rem;">
                        The drafts have a quality of <strong>polyvalence</strong>: one threading can produce wildly different patterns depending on how the shafts are raised. A single coordinate, many readings. The woven version is a decoding of the logic under a painting, the decisions I make without ever naming them.
                      </p>
                    </div>
                  </div>

                  <!-- SLIDE 03: Process & Installation Gallery -->
                  <div class="painting-slide-pane" id="pane-painting-gallery" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                        States of Translation
                      </h4>
                      <p class="font-ui" style="font-size: 13.5px; opacity: 0.85; line-height: 1.5; margin-bottom: 1rem;">
                        Detailed views demonstrating how the coordinate mappings and structural weaves manifest in physical spaces, along with digital spatial renders of the system.
                      </p>
                    </div>
                    
                    <!-- 2x2 Gallery CAD Grid -->
                    <div class="painting-gallery-grid" style="flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px; margin-bottom: 0.5rem; min-height: 250px;">
                      <!-- Cell 1: Original Painting Frame -->
                      <div class="gallery-item-frame" style="border: 1px solid var(--color-cad-line); background: var(--bg-color); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer;" onclick="openLightbox(this.querySelector('img').src)">
                        <div class="crop-mark-container crop-top-left" style="transform: scale(0.2); top: 4px; left: 4px;"></div>
                        <img loading="lazy" decoding="async" src="assets/SOFT-PAINTING.png" id="gallery-img-1" alt="Installation 1" style="width: 100%; height: 100%; object-fit: cover;" />
                        <span class="font-tech" style="position: absolute; bottom: 4px; left: 4px; font-size: 9.5px; background: rgba(0,0,0,0.6); color: #fff; padding: 1px 3px; border-radius: 1px;">01_PIGMENT</span>
                      </div>
                      
                      <!-- Cell 2: Decoupled Weave Threading -->
                      <div class="gallery-item-frame" style="border: 1px solid var(--color-cad-line); background: var(--bg-color); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer;" onclick="openLightbox(this.querySelector('img').src)">
                        <div class="crop-mark-container crop-top-left" style="transform: scale(0.2); top: 4px; left: 4px;"></div>
                        <img loading="lazy" decoding="async" src="assets/stage1_bold_grid_soft.webp" id="gallery-img-2" alt="Installation 2" style="width: 100%; height: 100%; object-fit: cover;" />
                        <span class="font-tech" style="position: absolute; bottom: 4px; left: 4px; font-size: 9.5px; background: rgba(0,0,0,0.6); color: #fff; padding: 1px 3px; border-radius: 1px;">02_MATRIX_WEAVE</span>
                      </div>
                      
                      <!-- Cell 3: Secondary Weft Thread Structure -->
                      <div class="gallery-item-frame" style="border: 1px solid var(--color-cad-line); background: var(--bg-color); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer;" onclick="openLightbox(this.querySelector('img').src)">
                        <div class="crop-mark-container crop-top-left" style="transform: scale(0.2); top: 4px; left: 4px;"></div>
                        <img loading="lazy" decoding="async" src="assets/layer_3_composite_pre_weave_soft.webp" id="gallery-img-3" alt="Installation 3" style="width: 100%; height: 100%; object-fit: cover;" />
                        <span class="font-tech" style="position: absolute; bottom: 4px; left: 4px; font-size: 9.5px; background: rgba(0,0,0,0.6); color: #fff; padding: 1px 3px; border-radius: 1px;">03_LAYER_COMPOSITE</span>
                      </div>
                    </div>
                  </div>

                  <!-- SLIDE 04: Research -->
                  <div class="painting-slide-pane" id="pane-painting-research" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">Bibliography &amp; Research</h4>
                    </div>
                    <div class="sonifold-essay-scroll-area" style="flex: 1; overflow-y: auto; padding-right: 0.5rem; margin: 0.5rem 0;">
                      <div class="research-list">
                        <details class="research-entry"><summary><span class="research-author">01 / ALBERS, ANNI</span><span class="research-title">On Weaving (1965)</span></summary><div class="research-note">Thread is a constructive language; the weave is a grid of decisions, not decoration. <strong>In the work:</strong> the painting is decoded into threading, tie-up, and treadling.</div></details>
                        <details class="research-entry"><summary><span class="research-author">02 / PLANT, SADIE</span><span class="research-title">Zeros and Ones (1997)</span></summary><div class="research-note">The Jacquard loom was the first programmable machine; weaving and computation share an origin. <strong>In the work:</strong> painting, programming, and weaving come from one place.</div></details>
                        <details class="research-entry"><summary><span class="research-author">03 / WHICHER, OLIVE &amp; GEORGE</span><span class="research-title">Projective Geometry (1971)</span></summary><div class="research-note">Form is shaped by forces working inward from the periphery toward a centre. <strong>In the work:</strong> a painting's design line is projected into the shafts of the weave.</div></details>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

              <!-- Slide Controller Footer (Sleek Blueprint Navigation Tabs) -->
              <div class="painting-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
                <button class="controller-btn-tech active" id="btn-painting-slide-hud" onclick="switchPaintingSlide(0)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Overview
                </button>
                <button class="controller-btn-tech" id="btn-painting-slide-essay" onclick="switchPaintingSlide(1)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Text
                </button>
                <button class="controller-btn-tech" id="btn-painting-slide-gallery" onclick="switchPaintingSlide(2)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Gallery
                </button>
                <button class="controller-btn-tech" id="btn-painting-slide-research" onclick="switchPaintingSlide(3)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Research
                </button>
              </div>

            </div>

          </div>
        </section>


        
        <section class="section-box" id="sec-field-conditions" data-keywords="generative systems grid presence interaction">
      <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
      <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>

      <div class="room-tags-wrapper font-tech">
        <span class="room-tags-label">touches //</span>
        <button class="room-tag-pill" onclick="filterExhibition('generative')">generative</button>
        <button class="room-tag-pill" onclick="filterExhibition('systems')">systems</button>
        <button class="room-tag-pill" onclick="filterExhibition('grid')">grid</button>
        <button class="room-tag-pill" onclick="filterExhibition('presence')">presence</button>
        <button class="room-tag-pill" onclick="filterExhibition('interaction')">interaction</button>
      </div>

      <span class="section-num">Room 10 / Poster Design System</span>
      <h2 class="section-header">Field Conditions</h2>
      <div class="project-meta-strip font-tech">
        <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-deployed"><span class="status-dot"></span><span>Deployed</span></span></span>
        <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2026</span></span>
      </div>


      <div class="blueprint-viewport-split" id="field-sandbox" style="height: 580px;">

        <!-- Left Viewport: full poster-design interface walkthrough (video).
             Drop the recording at assets/field-conditions-walkthrough.mp4 — until
             then the poster still (field-conditions-poster.webp) stands in. -->
        <div class="blueprint-left-stack" style="flex-direction: column; padding: 0; justify-content: center; align-items: center; overflow: hidden; background-color: var(--nested-card-bg);">
          <div style="position: relative; width: 100%; height: 100%; background: #0d0e12; display: flex; align-items: center; justify-content: center; overflow: hidden;">
            <div class="crop-mark-container crop-top-left" style="transform: scale(0.35); top: 6px; left: 6px;"></div>
            <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.35); bottom: 6px; right: 6px;"></div>
            <video id="field-walkthrough-player" src="assets/connected_v3.mp4" loop muted autoplay playsinline preload="none" onclick="expandVideo(this)" style="width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in;"></video>
          </div>
        </div>

        <!-- Right Viewport: Multi-slide deck -->
        <div class="blueprint-right-details field-slide-card" id="field-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid var(--color-cad-line); background-color: var(--nested-card-bg); border-radius: 4px; overflow: hidden; position: relative;">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>

          <div class="field-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
            <div class="field-slides-viewport" id="field-slides-viewport" style="display: flex; width: 400%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">

              <!-- SLIDE 01: Overview -->
              <div class="field-slide-pane active" id="pane-field-overview" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                <div class="overview-glance">
                  <p class="overview-question">What if there were no designer, only conditions?</p>
                  <p class="overview-what">A procedural design toolkit. You set the field conditions — the forces at play across the page — and the elements read them and arrange themselves, pulled into place by that field as it shifts. Around it runs a quieter layer that stays tuned to your own rhythms while you work: your breath, your heartbeat, where your eyes move, the slower cosmic cycles underneath. It keeps the making grounded in your body, so the design comes from real conditions instead of arrangement for its own sake.</p>
                </div>
              </div>

              <!-- SLIDE 02: Statement -->
              <div class="field-slide-pane" id="pane-field-statement" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                <div class="sonifold-essay-scroll-area" style="flex: 1; overflow-y: auto; padding-right: 0.5rem; margin: 0;">
                  <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin: 0 0 0.75rem 0;">
                    Most design is the work of arranging elements in aesthetic relation, nudging one against another until it looks right. This tool moves that work earlier. You set the conditions, the forces at play across the page, and the arrangement emerges from that array on its own.
                  </p>
                  <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin: 0 0 0.75rem 0; border-left: 2px solid var(--color-ui-blue); padding-left: 0.5rem; font-style: italic;">
                    I also built a frame around the tool that keeps me tied to my own rhythms while I work: my breathing, my heartbeat, the haptic rhythm of my hands as they move, where my eyes go, and the slower cosmic cycles underneath all of it. I hate getting lost in the arbitrariness of pushing things around, and the frame keeps me from drifting there.
                  </p>
                </div>
              </div>

              <!-- SLIDE 03: Gallery -->
              <div class="field-slide-pane" id="pane-field-gallery" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                <div>
                  <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                    The Tool & Its Output
                  </h4>
                </div>
                <div class="painting-gallery-grid" style="flex: 1; display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 0.5rem;">
                  <div class="gallery-item-frame" style="border: 1px solid var(--color-cad-line); background: var(--bg-color); position: relative; overflow: hidden; cursor: pointer;" onclick="openLightbox(this.querySelector('img').src)">
                    <div class="crop-mark-container crop-top-left" style="transform: scale(0.2); top: 4px; left: 4px;"></div>
                    <img src="assets/field-poster-1.webp" alt="Field Conditions exhibition poster" loading="lazy" style="width: 100%; height: auto; display: block;" />
                    <span class="font-tech" style="position: absolute; bottom: 4px; left: 4px; font-size: 9.5px; background: rgba(0,0,0,0.6); color: #fff; padding: 1px 3px; border-radius: 1px;">POSTER 01</span>
                  </div>
                  <div class="gallery-item-frame" style="border: 1px solid var(--color-cad-line); background: var(--bg-color); position: relative; overflow: hidden; cursor: pointer;" onclick="openLightbox(this.querySelector('img').src)">
                    <div class="crop-mark-container crop-top-left" style="transform: scale(0.2); top: 4px; left: 4px;"></div>
                    <img src="assets/field-poster-2.webp" alt="Field Conditions exhibition poster" loading="lazy" style="width: 100%; height: auto; display: block;" />
                    <span class="font-tech" style="position: absolute; bottom: 4px; left: 4px; font-size: 9.5px; background: rgba(0,0,0,0.6); color: #fff; padding: 1px 3px; border-radius: 1px;">POSTER 02</span>
                  </div>
                </div>
              </div>

              <!-- SLIDE 04: Research -->
              <div class="field-slide-pane" id="pane-field-research" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                <div>
                  <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">Bibliography &amp; Research</h4>
                </div>
                <div class="sonifold-essay-scroll-area" style="flex: 1; overflow-y: auto; padding-right: 0.5rem; margin: 0.5rem 0;">
                  <div class="research-list">
                    <details class="research-entry"><summary><span class="research-author">01 / ALLEN, STAN</span><span class="research-title">Field Conditions (1997)</span></summary><div class="research-note">Form can emerge from local rules and relationships rather than an imposed plan — the whole arises from the parts and their field. <strong>In the work:</strong> elements arrange themselves by attraction, not by hand.</div></details>
                    <details class="research-entry"><summary><span class="research-author">02 / SHELDRAKE, RUPERT</span><span class="research-title">A New Science of Life (1981)</span></summary><div class="research-note">Morphogenetic fields guide how form takes shape. <strong>In the work:</strong> a morphogenetic grid that does the placing, an energetic blueprint beneath the surface.</div></details>
                    <details class="research-entry"><summary><span class="research-author">03 / GERSTNER, KARL</span><span class="research-title">Designing Programmes (1964)</span></summary><div class="research-note">Design the system that generates the design, not the single outcome. <strong>In the work:</strong> aesthetic arrangement arising from a tuned field instead of manual placement.</div></details>
                  </div>
                </div>
              </div>

            </div>
          </div>

          <!-- Slide Controller Footer -->
          <div class="field-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
            <button class="controller-btn-tech active" id="btn-field-slide-overview" onclick="switchFieldSlide(0)" style="flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0.4rem 0.15rem;">Overview</button>
            <button class="controller-btn-tech" id="btn-field-slide-statement" onclick="switchFieldSlide(1)" style="flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0.4rem 0.15rem;">Text</button>
            <button class="controller-btn-tech" id="btn-field-slide-gallery" onclick="switchFieldSlide(2)" style="flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0.4rem 0.15rem;">Gallery</button>
            <button class="controller-btn-tech" id="btn-field-slide-research" onclick="switchFieldSlide(3)" style="flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0.4rem 0.15rem;">Research</button>
          </div>
        </div>
      </div>

      <!-- Expand trigger for the nested components -->
      <div style="margin-top: 2rem; border-top: 1px dashed var(--color-cad-line); padding-top: 1.5rem; display: flex; justify-content: center; z-index: 10; position: relative;">
        <button class="folder-toggle-btn font-tech" id="btn-toggle-field" onclick="toggleFieldFolder()" style="width: 100%; max-width: 500px; padding: 12px; font-size: 12px; font-weight: bold; border: 1px solid var(--color-ui-blue); color: var(--color-ui-blue); background: rgba(20,52,240,0.03); border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.3s; box-shadow: 0 4px 12px rgba(20,52,240,0.05);">
          [ + EXPAND COMPONENTS ]
        </button>
      </div>
    </section>

    <!-- Field Conditions Children Folder Container -->
    <div id="field-folder-children" class="folder-children-container">

      <!-- SUB-ROOM 10.1: THE SEATED CREATOR (PORTABLE PRESENCE COMPONENT) -->
      <section class="section-box nested-component field-child" id="sec-seated-creator" data-parent="sec-field-conditions" data-keywords="presence somatic interaction component">
        <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
        <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>

        <div class="room-tags-wrapper font-tech">
          <span class="room-tags-label">touches //</span>
          <button class="room-tag-pill" onclick="filterExhibition('presence')">presence</button>
          <button class="room-tag-pill" onclick="filterExhibition('somatic')">somatic</button>
          <button class="room-tag-pill" onclick="filterExhibition('interaction')">interaction</button>
          <button class="room-tag-pill" onclick="filterExhibition('component')">component</button>
        </div>

        <span class="section-num">├── Sub-Room 10.1 / Orienting Presence</span>
        <h2 class="section-header">The Seated Creator</h2>
        <div class="project-meta-strip font-tech">
          <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-development"><span class="status-dot"></span><span>In Development</span></span></span>
          <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2026 (Ongoing)</span></span>
        </div>

        <p class="lead-text" style="font-size: 14.5px; margin-bottom: 3rem;">
          An orienting device that sits outside the canvas while I work. The seated creator breathes on a five-second coherent cycle and carries a sixty-beat heartbeat, a reminder that there is a presence here connected to breath and to the stars. It is the first prototype of a recurring character: a reflection of the self that I want to thread through every project as a circadian, inner-rhythmic line.
        </p>

        <div class="blueprint-viewport-split" id="seated-sandbox" style="height: 560px;">

          <!-- Left Viewport: the LIVE portable seated-creator component -->
          <div class="blueprint-left-stack" style="padding: 1.5rem; background-color: var(--nested-card-bg); align-items: center; justify-content: center;">
            <!-- ============================================================
                 SEATED CREATOR — portable presence component.
                 Self-contained: this SVG group + the `.seated-creator-stage`
                 CSS block in styles.css are all it needs. 60 BPM heart,
                 5.5s coherent breath, driven purely by CSS keyframes.
                 ============================================================ -->
            <div class="seated-creator-stage">
              <svg viewBox="-50 -66 100 122" preserveAspectRatio="xMidYMid meet" role="img" aria-label="A seated figure breathing with a visible heartbeat">
                <g id="diag-seated-creator">
                  <!-- Platform Base standing on CAD concentric support grids -->
                  <rect x="-40" y="30" width="80" height="15" fill="rgba(28, 29, 26, 0.85)" stroke="rgba(249, 249, 246, 0.9)" stroke-width="1.25" />
                  <line x1="-50" y1="45" x2="50" y2="45" stroke="rgba(249, 249, 246, 0.9)" stroke-width="1.25" />

                  <!-- Core Grounding Vortex -->
                  <g id="core-spiral-g" transform="translate(0, 37.5)">
                    <path class="core-spiral" d="M 0,-15 C 5,-15 8,-11 8,-7 C 8,-3 4,0 -1,0 C -5,0 -7,-3 -7,-6 C -7,-9 -4,-11 -1,-11 C 1.5,-11 3,-9.5 3,-7.5 C 3,-5.5 1.5,-4 0,-4 C -1,-4 -1.5,-4.5 -1.5,-5.5 C -1.5,-6.5 -1,-7 0,-7 C 0.6,-7 1,-6.6 1,-6 C 1,-5.4 0.6,-5 0,-5 C -0.4,-5 -0.5,-5.2 -0.5,-5.5 C -0.5,-5.8 -0.3,-6 0,-6 C 0.5,-6 0.8,-6.4 0.8,-7 C 0.8,-7.6 0.4,-8 0,-8 C -0.8,-8 -1.5,-7.2 -1.5,-6 C -1.5,-4.2 0,-3 1.5,-3 C 3.2,-3 4.5,-4.8 4.5,-7 C 4.5,-9.5 2.5,-11.5 0,-11.5 C -3,-11.5 -5.5,-9 -5.5,-6 C -5.5,-2.5 -2.5,0.5 1,0.5 C 5,0.5 8,-2.5 8,-7 C 8,-12 4.5,-15.5 0,-15.5 C -5,-15.5 -9,-11.5 -9,-6 C -9,0 -4,4 1.5,4 C 6,4 10,0.5 10,-5 C 10,-5.5 9.5,-6 9,-6 C 8.5,-6 8,-5.5 8,-5 C 8,-0.5 5,2.5 1.5,2.5 C -3,2.5 -7.5,-1 -7.5,-6 C -7.5,-10.5 -4,-14 0,-14 Z" fill="rgba(249, 249, 246, 0.95)" stroke="none" />
                  </g>

                  <!-- Organic Deity Torso -->
                  <path d="M -6,-25 C -8,-15 -8,0 -6,15 L 6,15 C 8,0 8,-15 6,-25 Z" fill="rgba(28, 29, 26, 0.85)" stroke="rgba(249, 249, 246, 0.9)" stroke-width="1.25" />
                  <line x1="-3" y1="-28" x2="-3" y2="-25" stroke="rgba(249, 249, 246, 0.9)" stroke-width="0.75" />
                  <line x1="3" y1="-28" x2="3" y2="-25" stroke="rgba(249, 249, 246, 0.9)" stroke-width="0.75" />
                  <!-- Spine Axis (Sushumna) -->
                  <line x1="0" y1="-25" x2="0" y2="15" stroke="var(--color-moss-green)" stroke-width="0.75" />

                  <!-- 7-Chakra system -->
                  <g transform="translate(0, -42)">
                    <path d="M 0,-4 L 1,-1 L 4,0 L 1,1 L 0,4 L -1,1 L -4,0 L -1,-1 Z" fill="rgba(249, 249, 246, 0.95)" />
                    <circle r="1.5" fill="none" stroke="rgba(249, 249, 246, 0.95)" stroke-width="0.5" />
                  </g>
                  <g transform="translate(0, -37.5)" style="filter: drop-shadow(0 0 1.5px #9b59b6);">
                    <path d="M 0,-2.5 L 2.5,0 L 0,2.5 L -2.5,0 Z" fill="none" stroke="#9b59b6" stroke-width="0.5" />
                    <circle r="0.75" fill="#f9f9f6" />
                  </g>
                  <g transform="translate(0, -27)" style="filter: drop-shadow(0 0 2px var(--color-moss-green));">
                    <circle r="2.5" fill="none" stroke="var(--color-moss-green)" stroke-width="0.75" />
                    <circle r="1.2" fill="var(--color-moss-green)" />
                    <path d="M -5,-1 C -4,1 -4,-1 -3,1" fill="none" stroke="rgba(249, 249, 246, 0.6)" stroke-width="0.5" />
                    <path d="M 3,1 C 4,-1 4,1 5,-1" fill="none" stroke="rgba(249, 249, 246, 0.6)" stroke-width="0.5" />
                  </g>

                  <!-- Heart Chakra (Anahata) — the heartbeat -->
                  <g transform="translate(0, -12)">
                    <g class="heart-pulse">
                      <circle r="5" fill="none" stroke="rgba(249, 249, 246, 0.8)" stroke-width="0.75" />
                      <circle r="2.7" fill="none" stroke="var(--active-visual-color, var(--color-cobalt-blue))" stroke-width="0.75" />
                      <circle r="1.0" fill="var(--color-cadmium-red)" />
                      <line x1="0" y1="-5" x2="0" y2="-6.5" stroke="rgba(249, 249, 246, 0.6)" stroke-width="0.5" />
                      <line x1="0" y1="5" x2="0" y2="6.5" stroke="rgba(249, 249, 246, 0.6)" stroke-width="0.5" />
                      <line x1="-5" y1="0" x2="-6.5" y2="0" stroke="rgba(249, 249, 246, 0.6)" stroke-width="0.5" />
                      <line x1="5" y1="0" x2="6.5" y2="0" stroke="rgba(249, 249, 246, 0.6)" stroke-width="0.5" />
                    </g>
                  </g>
                  <text x="-12" y="-11.5" font-size="3.5" font-family="monospace" text-anchor="end" fill="rgba(249, 249, 246, 0.45)">HEART_PACE</text>
                  <text x="12" y="-11.5" font-size="3.5" font-family="monospace" text-anchor="start" fill="rgba(249, 249, 246, 0.45)">60_BPM</text>

                  <g transform="translate(0, 5)" style="filter: drop-shadow(0 0 2px var(--color-warm-ochre));">
                    <circle r="3" fill="none" stroke="var(--color-warm-ochre)" stroke-width="0.75" />
                    <circle r="1.2" fill="var(--color-warm-ochre)" />
                  </g>
                  <g transform="translate(0, 18)" style="filter: drop-shadow(0 0 2px var(--color-warm-ochre));">
                    <circle r="3" fill="var(--color-warm-ochre)" opacity="0.3" />
                    <circle r="2.2" fill="none" stroke="var(--color-warm-ochre)" stroke-width="0.5" />
                    <path d="M -1.2,-1 A 1.2,1.2 0 0,0 1.2,1" fill="none" stroke="rgba(249, 249, 246, 0.85)" stroke-width="0.5" stroke-linecap="round" />
                  </g>
                  <g transform="translate(0, 28)" style="filter: drop-shadow(0 0 2px var(--color-cadmium-red));">
                    <rect x="-2.5" y="-2.5" width="5" height="5" fill="none" stroke="var(--color-cadmium-red)" stroke-width="0.75" />
                    <circle r="0.8" fill="var(--color-warm-ochre)" />
                  </g>

                  <!-- Shamanic Face & Crown -->
                  <circle cx="0" cy="-35" r="7" fill="rgba(28, 29, 26, 0.9)" stroke="rgba(249, 249, 246, 0.9)" stroke-width="1.25" />
                  <path d="M -2.5,-35 C -1,-33.5 1,-33.5 2.5,-35 M -3,-37.5 A 1,1 0 0,1 -1,-37.5 M 1,-37.5 A 1,1 0 0,1 3,-37.5 M 0,-37 L 0,-34" stroke="rgba(249, 249, 246, 0.95)" stroke-width="0.5" fill="none" />
                  <path d="M -9,-35 L -13,-40 M -6,-39 L -9,-45 M -2,-41 L -3,-48 M 2,-41 L 3,-48 M 6,-39 L 9,-45 M 9,-35 L 13,-40" stroke="rgba(249, 249, 246, 0.9)" stroke-width="0.75" stroke-linecap="round" />
                  <circle cx="-13" cy="-40" r="0.8" fill="var(--color-cadmium-red)" />
                  <circle cx="-9" cy="-45" r="0.8" fill="var(--color-cadmium-red)" />
                  <circle cx="-3" cy="-48" r="0.8" fill="var(--color-cadmium-red)" />
                  <circle cx="3" cy="-48" r="0.8" fill="var(--color-warm-ochre)" />
                  <circle cx="9" cy="-45" r="0.8" fill="var(--color-cadmium-red)" />
                  <circle cx="13" cy="-40" r="0.8" fill="var(--color-cadmium-red)" />

                  <!-- Crescent Halo — the breath -->
                  <g class="breathing-halo">
                    <circle cx="0" cy="-35" r="11" fill="none" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" />
                    <path d="M -15,-30 A 15,15 0 0,1 15,-30" fill="none" stroke="var(--active-visual-color, var(--color-cobalt-blue))" stroke-width="1.25" stroke-linecap="round" />
                  </g>
                  <text x="-22" y="-34" font-size="3.5" font-family="monospace" text-anchor="end" fill="rgba(249, 249, 246, 0.45)">BREATH_PACE</text>
                  <text x="22" y="-34" font-size="3.5" font-family="monospace" text-anchor="start" fill="rgba(249, 249, 246, 0.45)">5.5s_COHERENT</text>

                  <!-- Left Arm + Design Tree-of-Life Staff -->
                  <path d="M -6,-20 L -18,-10 M -18,-10 L -22,-14" fill="none" stroke="rgba(249, 249, 246, 0.9)" stroke-width="1.25" stroke-linecap="round" />
                  <line x1="-22" y1="-28" x2="-22" y2="12" stroke="rgba(249, 249, 246, 0.9)" stroke-width="1" />
                  <line x1="-26" y1="-26" x2="-18" y2="-26" stroke="rgba(249, 249, 246, 0.9)" stroke-width="0.75" />
                  <line x1="-24" y1="-24" x2="-20" y2="-24" stroke="rgba(249, 249, 246, 0.9)" stroke-width="0.75" />
                  <line x1="-26" y1="-18" x2="-18" y2="-18" stroke="rgba(249, 249, 246, 0.6)" stroke-width="0.75" />
                  <circle cx="-26" cy="-18" r="1.2" fill="var(--color-moss-green)" />
                  <circle cx="-18" cy="-18" r="1.2" fill="var(--color-moss-green)" />
                  <text x="-28" y="-17.5" font-size="3" font-family="monospace" text-anchor="end" fill="rgba(249, 249, 246, 0.45)">05_EVOLVE</text>
                  <line x1="-27" y1="-12" x2="-17" y2="-12" stroke="rgba(249, 249, 246, 0.6)" stroke-width="0.75" />
                  <circle cx="-27" cy="-12" r="1.2" fill="var(--color-moss-green)" />
                  <circle cx="-17" cy="-12" r="1.2" fill="var(--color-moss-green)" />
                  <text x="-29" y="-11.5" font-size="3" font-family="monospace" text-anchor="end" fill="rgba(249, 249, 246, 0.45)">04_EVALUATE</text>
                  <line x1="-28" y1="-6" x2="-16" y2="-6" stroke="rgba(249, 249, 246, 0.6)" stroke-width="0.75" />
                  <circle cx="-28" cy="-6" r="1.2" fill="var(--color-moss-green)" />
                  <circle cx="-16" cy="-6" r="1.2" fill="var(--color-moss-green)" />
                  <text x="-30" y="-5.5" font-size="3" font-family="monospace" text-anchor="end" fill="rgba(249, 249, 246, 0.45)">03_PROTOTYPE</text>
                  <line x1="-27" y1="0" x2="-17" y2="0" stroke="rgba(249, 249, 246, 0.6)" stroke-width="0.75" />
                  <circle cx="-27" cy="0" r="1.2" fill="var(--color-moss-green)" />
                  <circle cx="-17" cy="0" r="1.2" fill="var(--color-moss-green)" />
                  <text x="-29" y="0.5" font-size="3" font-family="monospace" text-anchor="end" fill="rgba(249, 249, 246, 0.45)">02_SCHEMATIC</text>
                  <line x1="-26" y1="6" x2="-18" y2="6" stroke="rgba(249, 249, 246, 0.6)" stroke-width="0.75" />
                  <circle cx="-26" cy="6" r="1.2" fill="var(--color-moss-green)" />
                  <circle cx="-18" cy="6" r="1.2" fill="var(--color-moss-green)" />
                  <text x="-28" y="6.5" font-size="3" font-family="monospace" text-anchor="end" fill="rgba(249, 249, 246, 0.45)">01_RESEARCH</text>

                  <!-- Right Arm + Cybernetic Feedback Sun-Wheel -->
                  <path d="M 6,-20 L 18,-10 M 18,-10 L 22,-14" fill="none" stroke="rgba(249, 249, 246, 0.9)" stroke-width="1.25" stroke-linecap="round" />
                  <g transform="translate(22, -18)">
                    <circle cx="0" cy="0" r="8" fill="none" stroke="var(--active-visual-color, var(--color-cobalt-blue))" stroke-width="1" />
                    <circle cx="0" cy="0" r="2.2" fill="var(--active-visual-color, var(--color-cobalt-blue))" />
                    <line x1="0" y1="-8" x2="0" y2="-10" stroke="rgba(249, 249, 246, 0.7)" stroke-width="0.5" /><circle cx="0" cy="-10" r="0.8" fill="var(--color-warm-ochre)" />
                    <line x1="0" y1="8" x2="0" y2="10" stroke="rgba(249, 249, 246, 0.7)" stroke-width="0.5" /><circle cx="0" cy="10" r="0.8" fill="var(--color-warm-ochre)" />
                    <line x1="-8" y1="0" x2="-10" y2="0" stroke="rgba(249, 249, 246, 0.7)" stroke-width="0.5" /><circle cx="-10" cy="0" r="0.8" fill="var(--color-warm-ochre)" />
                    <line x1="8" y1="0" x2="10" y2="0" stroke="rgba(249, 249, 246, 0.7)" stroke-width="0.5" /><circle cx="10" cy="0" r="0.8" fill="var(--color-warm-ochre)" />
                    <line x1="-5.6" y1="-5.6" x2="-7" y2="-7" stroke="rgba(249, 249, 246, 0.7)" stroke-width="0.5" /><circle cx="-7" cy="-7" r="0.8" fill="var(--color-warm-ochre)" />
                    <line x1="5.6" y1="-5.6" x2="7" y2="-7" stroke="rgba(249, 249, 246, 0.7)" stroke-width="0.5" /><circle cx="7" cy="-7" r="0.8" fill="var(--color-warm-ochre)" />
                    <line x1="-5.6" y1="5.6" x2="-7" y2="7" stroke="rgba(249, 249, 246, 0.7)" stroke-width="0.5" /><circle cx="-7" cy="7" r="0.8" fill="var(--color-warm-ochre)" />
                    <line x1="5.6" y1="5.6" x2="7" y2="7" stroke="rgba(249, 249, 246, 0.7)" stroke-width="0.5" /><circle cx="7" cy="7" r="0.8" fill="var(--color-warm-ochre)" />
                  </g>

                  <!-- Side meridian loops -->
                  <path d="M -6,-25 C -17,-20 -17,-5 -6,0 C -17,5 -17,20 -6,25" fill="none" stroke="var(--color-cadmium-red)" stroke-width="1.25" style="opacity: 0.85;" />
                  <path d="M 6,-25 C 17,-20 17,-5 6,0 C 17,5 17,20 6,25" fill="none" stroke="var(--color-cadmium-red)" stroke-width="1.25" style="opacity: 0.85;" />

                  <!-- Legs -->
                  <path d="M -4,15 C -8,20 -12,24 -15,30 M 4,15 C 8,20 12,24 15,30" fill="none" stroke="rgba(249, 249, 246, 0.9)" stroke-width="1.5" stroke-linecap="round" />

                  <!-- Cybernetic loop flow currents (animated dashes) -->
                  <path class="cybernetic-flow" d="M -22,-14 C -22,-14 -18,-10 -6,-20 C -12,-20 -15,-5 -6,0 C -15,5 -15,20 -6,25 L -15,30" fill="none" stroke="var(--active-visual-color, var(--color-cobalt-blue))" stroke-width="0.85" stroke-dasharray="3, 3" style="opacity: 0.85;" />
                  <path class="cybernetic-flow" d="M 15,30 L 6,25 C 15,20 15,5 6,0 C 15,-5 12,-20 6,-20 C 18,-10 22,-14 22,-14" fill="none" stroke="var(--active-visual-color, var(--color-cobalt-blue))" stroke-width="0.85" stroke-dasharray="3, 3" style="opacity: 0.85;" />

                  <!-- Energy flames (flicker) -->
                  <g class="energy-flame" transform="translate(-16, -22) rotate(-15)"><path d="M 0,4 C -2,2 -3,0 0,-4 C 3,0 2,2 0,4 Z" fill="none" stroke="var(--active-visual-color, var(--color-cadmium-red))" stroke-width="0.75" /><circle cx="0" cy="0" r="0.75" fill="var(--color-warm-ochre)" /></g>
                  <g class="energy-flame" transform="translate(-15, 2) rotate(-5)"><path d="M 0,4 C -2,2 -3,0 0,-4 C 3,0 2,2 0,4 Z" fill="none" stroke="var(--active-visual-color, var(--color-cadmium-red))" stroke-width="0.75" /><circle cx="0" cy="0" r="0.75" fill="var(--color-warm-ochre)" /></g>
                  <g class="energy-flame" transform="translate(-12, 20) rotate(-20)"><path d="M 0,4 C -2,2 -3,0 0,-4 C 3,0 2,2 0,4 Z" fill="none" stroke="var(--active-visual-color, var(--color-cadmium-red))" stroke-width="0.75" /><circle cx="0" cy="0" r="0.75" fill="var(--color-warm-ochre)" /></g>
                  <g class="energy-flame" transform="translate(16, -22) rotate(15)"><path d="M 0,4 C -2,2 -3,0 0,-4 C 3,0 2,2 0,4 Z" fill="none" stroke="var(--active-visual-color, var(--color-cadmium-red))" stroke-width="0.75" /><circle cx="0" cy="0" r="0.75" fill="var(--color-warm-ochre)" /></g>
                  <g class="energy-flame" transform="translate(15, 2) rotate(5)"><path d="M 0,4 C -2,2 -3,0 0,-4 C 3,0 2,2 0,4 Z" fill="none" stroke="var(--active-visual-color, var(--color-cadmium-red))" stroke-width="0.75" /><circle cx="0" cy="0" r="0.75" fill="var(--color-warm-ochre)" /></g>
                  <g class="energy-flame" transform="translate(12, 20) rotate(20)"><path d="M 0,4 C -2,2 -3,0 0,-4 C 3,0 2,2 0,4 Z" fill="none" stroke="var(--active-visual-color, var(--color-cadmium-red))" stroke-width="0.75" /><circle cx="0" cy="0" r="0.75" fill="var(--color-warm-ochre)" /></g>
                  <g class="energy-flame" transform="translate(0, -52) rotate(0)"><path d="M 0,4 C -2,2 -3,0 0,-4 C 3,0 2,2 0,4 Z" fill="none" stroke="var(--active-visual-color, var(--color-cadmium-red))" stroke-width="0.75" /><circle cx="0" cy="0" r="0.75" fill="var(--color-warm-ochre)" /></g>
                </g>
              </svg>
            </div>
          </div>

          <!-- Right Viewport: narrative on the orienting devices -->
          <div class="blueprint-right-details" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid var(--color-cad-line); background-color: var(--nested-card-bg); border-radius: 4px; overflow: hidden; position: relative;">
            <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
            <div>
              <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">A Presence Outside The Machine</h4>
            </div>
            <div class="sonifold-essay-scroll-area" style="flex: 1; overflow-y: auto; padding-right: 0.5rem; margin: 0.5rem 0;">
              <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin: 0 0 0.75rem 0;">
                The figure is the first prototype of a recurring character I am developing, one that will live across all my work and become a kind of digital double. Not the double that pulls you into the screen, but one that reminds you of your own aliveness while you work.
              </p>
              <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin: 0;">
                The heart beats sixty times a minute. The halo breathes at a slow, parasympathetic rate, the kind that settles the nervous system. It is built as a self-contained component, ready to reuse in other projects and, in time, to open-source so others can carry their own presence with them.
              </p>
            </div>
          </div>
        </div>
      </section>

      <!-- SUB-ROOM 10.2: THE EYES & THE HANDS (portable orienting-devices component) -->
      <section class="section-box nested-component field-child" id="sec-orienting-devices" data-parent="sec-field-conditions" data-keywords="presence somatic interaction component">
        <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
        <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>

        <div class="room-tags-wrapper font-tech">
          <span class="room-tags-label">touches //</span>
          <button class="room-tag-pill" onclick="filterExhibition('presence')">presence</button>
          <button class="room-tag-pill" onclick="filterExhibition('somatic')">somatic</button>
          <button class="room-tag-pill" onclick="filterExhibition('interaction')">interaction</button>
          <button class="room-tag-pill" onclick="filterExhibition('component')">component</button>
        </div>

        <span class="section-num">├── Sub-Room 10.2 / Watching &amp; Touching</span>
        <h2 class="section-header">The Eyes &amp; The Hands</h2>
        <div class="project-meta-strip font-tech">
          <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-development"><span class="status-dot"></span><span>In Development</span></span></span>
          <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2026 (Ongoing)</span></span>
        </div>

        <p class="lead-text" style="font-size: 14.5px; margin-bottom: 3rem;">
          The other two orienting devices that frame the canvas. A pair of Kathmandu wisdom eyes that watch and blink, and a pair of bagua hands that carry the haptic feedback of the work, their knuckles laid out as a Lo Shu magic square. Like the seated creator, they are built to travel: self-contained components that keep the act of making attended-to and embodied.
        </p>

        <div class="blueprint-viewport-split" id="orienting-sandbox" style="height: 560px;">

          <!-- Left Viewport: the LIVE portable eyes + hands component -->
          <div class="blueprint-left-stack" style="padding: 1.5rem; background-color: var(--nested-card-bg); align-items: center; justify-content: center;">
            <!-- ============================================================
                 EYES & HANDS — portable orienting-devices component.
                 Self-contained: this SVG (with its own clip-path defs) plus the
                 `.orienting-devices-stage` CSS block. Eyes blink on a 5.5s cadence.
                 ============================================================ -->
            <div class="orienting-devices-stage">
              <svg viewBox="-110 -100 220 190" preserveAspectRatio="xMidYMid meet" role="img" aria-label="A pair of wisdom eyes that blink and a pair of bagua hands" font-family="var(--font-technical)">
                <defs>
                  <clipPath id="od-left-eye-clip"><path d="M -40,4 C -22,-16 0,-15 18,-6 C 26,-2 32,2 40,4 C 20,18 -20,18 -40,4 Z" /></clipPath>
                  <clipPath id="od-right-eye-clip"><path d="M -40,4 C -32,2 -26,-2 -18,-6 C 0,-15 22,-16 40,4 C 20,18 -20,18 -40,4 Z" /></clipPath>
                </defs>

                <text x="0" y="-90" font-size="6" letter-spacing="2" text-anchor="middle" fill="rgba(249,249,246,0.4)">OPTIC // WATCHING</text>

                <!-- LEFT EYE -->
                <g transform="translate(-60,-52) scale(0.58)">
                  <path d="M -40,4 C -22,-16 0,-15 18,-6 C 26,-2 32,2 40,4 C 20,18 -20,18 -40,4 Z" fill="rgba(28, 29, 26, 0.85)" stroke="none" />
                  <g clip-path="url(#od-left-eye-clip)">
                    <circle r="15" fill="none" stroke="rgba(249, 249, 246, 0.85)" stroke-width="0.85" />
                    <g class="thangka-eye-blink-group">
                      <circle r="6" fill="#f9f9f6" stroke="var(--active-visual-color, var(--color-cobalt-blue))" stroke-width="1" />
                      <circle r="2" fill="var(--color-pitch-carbon, #121311)" />
                    </g>
                  </g>
                  <path d="M -40,4 C -22,-16 0,-15 18,-6 C 26,-2 32,2 40,4 C 20,18 -20,18 -40,4 Z" fill="none" stroke="rgba(249, 249, 246, 0.9)" stroke-width="1.25" />
                  <path d="M -42,-8 C -22,-24 10,-20 35,-8" fill="none" stroke="rgba(249, 249, 246, 0.85)" stroke-width="2" stroke-linecap="round" />
                  <circle r="52" fill="none" stroke="rgba(249, 249, 246, 0.12)" stroke-width="0.75" />
                  <circle r="44" fill="none" stroke="rgba(249, 249, 246, 0.18)" stroke-width="0.5" stroke-dasharray="2, 6" />
                  <circle r="36" fill="none" stroke="rgba(249, 249, 246, 0.1)" stroke-width="0.5" />
                  <circle cx="31.1" cy="-18" r="1.5" fill="var(--active-visual-color, var(--color-cobalt-blue))" />
                  <circle cx="-36" cy="0" r="1.0" fill="var(--color-cadmium-red)" />
                  <circle cx="0" cy="36" r="1.2" fill="var(--color-warm-ochre)" />
                </g>

                <!-- RIGHT EYE -->
                <g transform="translate(60,-52) scale(0.58)">
                  <path d="M -40,4 C -32,2 -26,-2 -18,-6 C 0,-15 22,-16 40,4 C 20,18 -20,18 -40,4 Z" fill="rgba(28, 29, 26, 0.85)" stroke="none" />
                  <g clip-path="url(#od-right-eye-clip)">
                    <circle r="15" fill="none" stroke="rgba(249, 249, 246, 0.85)" stroke-width="0.85" />
                    <g class="thangka-eye-blink-group">
                      <circle r="6" fill="#f9f9f6" stroke="var(--active-visual-color, var(--color-cobalt-blue))" stroke-width="1" />
                      <circle r="2" fill="var(--color-pitch-carbon, #121311)" />
                    </g>
                  </g>
                  <path d="M -40,4 C -32,2 -26,-2 -18,-6 C 0,-15 22,-16 40,4 C 20,18 -20,18 -40,4 Z" fill="none" stroke="rgba(249, 249, 246, 0.9)" stroke-width="1.25" />
                  <path d="M -35,-8 C -10,-20 22,-24 42,-8" fill="none" stroke="rgba(249, 249, 246, 0.85)" stroke-width="2" stroke-linecap="round" />
                  <circle r="52" fill="none" stroke="rgba(249, 249, 246, 0.12)" stroke-width="0.75" />
                  <circle r="44" fill="none" stroke="rgba(249, 249, 246, 0.18)" stroke-width="0.5" stroke-dasharray="2, 6" />
                  <circle r="36" fill="none" stroke="rgba(249, 249, 246, 0.1)" stroke-width="0.5" />
                  <circle cx="-31.1" cy="-18" r="1.5" fill="var(--active-visual-color, var(--color-cobalt-blue))" />
                  <circle cx="36" cy="0" r="1.0" fill="var(--color-cadmium-red)" />
                  <circle cx="0" cy="-36" r="1.2" fill="var(--color-warm-ochre)" />
                </g>

                <text x="0" y="2" font-size="6" letter-spacing="2" text-anchor="middle" fill="rgba(249,249,246,0.4)">HAPTIC // TOUCHING</text>

                <!-- LEFT HAND (bagua input, flipped so the thumb points inward) -->
                <g transform="translate(-48,48) scale(-0.58,0.58)">
                  <path d="M 8,40 L -8,40 L -8,25 C -11,22 -14,18 -16,14 C -19,10 -19,6 -17,4 C -14,2 -11,5 -9,10 C -10,6 -9,-2 -9,-5 L -9,-34 C -9,-37 -5,-37 -5,-34 L -5,-5 L -4,-5 L -4,-42 C -4,-45 0,-45 0,-42 L 0,-5 L 1,-5 L 1,-38 C 1,-41 5,-41 5,-38 L 5,-5 L 6,-5 L 6,-30 C 6,-33 10,-33 10,-30 L 10,15 C 11,20 10,25 8,40 Z" fill="rgba(28, 29, 26, 0.9)" stroke="rgba(249, 249, 246, 0.85)" stroke-width="1.25" stroke-linejoin="round" />
                  <g transform="translate(-23, 2)"><g class="finger-flame"><path d="M 0,5 C -2.5,2.5 -3.5,0 0,-6 C 3.5,0 2.5,2.5 0,5 Z" fill="none" stroke="var(--color-cadmium-red)" stroke-width="0.75" /><circle cx="0" cy="0" r="0.75" fill="var(--color-warm-ochre)" /></g></g>
                  <g transform="translate(-7, -44)"><g class="finger-flame"><path d="M 0,5 C -2.5,2.5 -3.5,0 0,-6 C 3.5,0 2.5,2.5 0,5 Z" fill="none" stroke="var(--active-visual-color, var(--color-cobalt-blue))" stroke-width="0.75" /><circle cx="0" cy="0" r="0.75" fill="var(--color-warm-ochre)" /></g></g>
                  <g transform="translate(-2, -52)"><g class="finger-flame"><path d="M 0,5 C -2.5,2.5 -3.5,0 0,-6 C 3.5,0 2.5,2.5 0,5 Z" fill="none" stroke="var(--active-visual-color, var(--color-cobalt-blue))" stroke-width="0.75" /><circle cx="0" cy="0" r="0.75" fill="var(--color-warm-ochre)" /></g></g>
                  <g transform="translate(3, -48)"><g class="finger-flame"><path d="M 0,5 C -2.5,2.5 -3.5,0 0,-6 C 3.5,0 2.5,2.5 0,5 Z" fill="none" stroke="var(--active-visual-color, var(--color-cobalt-blue))" stroke-width="0.75" /><circle cx="0" cy="0" r="0.75" fill="var(--color-warm-ochre)" /></g></g>
                  <g transform="translate(8, -40)"><g class="finger-flame"><path d="M 0,5 C -2.5,2.5 -3.5,0 0,-6 C 3.5,0 2.5,2.5 0,5 Z" fill="none" stroke="var(--color-cadmium-red)" stroke-width="0.75" /><circle cx="0" cy="0" r="0.75" fill="var(--color-warm-ochre)" /></g></g>
                  <line x1="-9" y1="-14" x2="-5" y2="-14" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" /><line x1="-9" y1="-24" x2="-5" y2="-24" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" />
                  <line x1="-4" y1="-16" x2="0" y2="-16" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" /><line x1="-4" y1="-28" x2="0" y2="-28" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" />
                  <line x1="1" y1="-15" x2="5" y2="-15" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" /><line x1="1" y1="-26" x2="5" y2="-26" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" />
                  <line x1="6" y1="-12" x2="10" y2="-12" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" /><line x1="6" y1="-21" x2="10" y2="-21" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" />
                  <path d="M -8,-24 L 2,-15 L -3,-28 L 7,-21 L -8,-14 L 2,-26" fill="none" stroke="var(--active-visual-color, var(--color-cobalt-blue))" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.85;" />
                  <text x="-8" y="-27" font-size="5" fill="rgba(249, 249, 246, 0.6)">4</text><text x="-3" y="-31" font-size="5" fill="rgba(249, 249, 246, 0.6)">9</text><text x="2" y="-29" font-size="5" fill="rgba(249, 249, 246, 0.6)">2</text>
                  <text x="-8" y="-17" font-size="5" fill="rgba(249, 249, 246, 0.6)">3</text><text x="-3" y="-19" font-size="5" fill="var(--active-visual-color, var(--color-cobalt-blue))">5</text><text x="2" y="-18" font-size="5" fill="rgba(249, 249, 246, 0.6)">7</text>
                  <text x="-8" y="-7" font-size="5" fill="rgba(249, 249, 246, 0.6)">8</text><text x="-3" y="-7" font-size="5" fill="rgba(249, 249, 246, 0.6)">1</text><text x="2" y="-7" font-size="5" fill="rgba(249, 249, 246, 0.6)">6</text>
                  <g transform="translate(0, 10)"><circle r="8" fill="none" stroke="var(--active-visual-color, var(--color-cobalt-blue))" stroke-width="1" /><circle r="3" fill="var(--active-visual-color, var(--color-cobalt-blue))" /></g>
                </g>

                <!-- RIGHT HAND (motor output, radar + velocity vector) -->
                <g transform="translate(48,48) scale(0.58)">
                  <path d="M -8,40 L 8,40 L 8,25 C 11,22 14,18 16,14 C 19,10 19,6 17,4 C 14,2 11,5 9,10 C 10,6 9,-2 9,-5 L 9,-34 C 9,-37 5,-37 5,-34 L 5,-5 L 4,-5 L 4,-42 C 4,-45 0,-45 0,-42 L 0,-5 L -1,-5 L -1,-38 C -1,-41 -5,-41 -5,-38 L -5,-5 L -6,-5 L -6,-30 C -6,-33 -10,-33 -10,-30 L -10,15 C -11,20 -10,25 -8,40 Z" fill="rgba(28, 29, 26, 0.9)" stroke="rgba(249, 249, 246, 0.85)" stroke-width="1.25" stroke-linejoin="round" />
                  <line x1="5" y1="-14" x2="9" y2="-14" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" /><line x1="5" y1="-24" x2="9" y2="-24" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" />
                  <line x1="0" y1="-16" x2="4" y2="-16" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" /><line x1="0" y1="-28" x2="4" y2="-28" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" />
                  <line x1="-5" y1="-15" x2="-1" y2="-15" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" /><line x1="-5" y1="-26" x2="-1" y2="-26" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" />
                  <line x1="-10" y1="-12" x2="-6" y2="-12" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" /><line x1="-10" y1="-21" x2="-6" y2="-21" stroke="rgba(249, 249, 246, 0.4)" stroke-width="0.75" />
                  <path d="M 8,-24 L -2,-15 L 3,-28 L -7,-21 L 8,-14 L -2,-26" fill="none" stroke="var(--active-visual-color, var(--color-cobalt-blue))" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.85;" />
                  <text x="6" y="-27" font-size="5" fill="rgba(249, 249, 246, 0.6)">4</text><text x="1" y="-31" font-size="5" fill="rgba(249, 249, 246, 0.6)">9</text><text x="-4" y="-29" font-size="5" fill="rgba(249, 249, 246, 0.6)">2</text>
                  <text x="6" y="-17" font-size="5" fill="rgba(249, 249, 246, 0.6)">3</text><text x="1" y="-19" font-size="5" fill="var(--active-visual-color, var(--color-cobalt-blue))">5</text><text x="-4" y="-18" font-size="5" fill="rgba(249, 249, 246, 0.6)">7</text>
                  <text x="6" y="-7" font-size="5" fill="rgba(249, 249, 246, 0.6)">8</text><text x="1" y="-7" font-size="5" fill="rgba(249, 249, 246, 0.6)">1</text><text x="-4" y="-7" font-size="5" fill="rgba(249, 249, 246, 0.6)">6</text>
                  <g transform="translate(0, 10)">
                    <circle r="8" fill="none" stroke="var(--active-visual-color, var(--color-cobalt-blue))" stroke-width="1" />
                    <circle r="2.5" fill="var(--active-visual-color, var(--color-cobalt-blue))" />
                    <path d="M 0,0 L -5,-2.5 L -5,2.5 Z" fill="var(--active-visual-color, var(--color-cobalt-blue))" transform="translate(4,0)" />
                  </g>
                </g>
              </svg>
            </div>
          </div>

          <!-- Right Viewport: narrative + telemetry -->
          <div class="blueprint-right-details" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid var(--color-cad-line); background-color: var(--nested-card-bg); border-radius: 4px; overflow: hidden; position: relative;">
            <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
            <div>
              <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">Watching, And Holding</h4>
            </div>
            <div class="sonifold-essay-scroll-area" style="flex: 1; overflow-y: auto; padding-right: 0.5rem; margin: 0.5rem 0;">
              <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin: 0 0 0.75rem 0;">
                The eyes follow the cursor and blink on the same slow cadence as the creator's breath.
              </p>
              <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin: 0 0 0.75rem 0;">
                The hands show when mouse interactions happen. One reads your gesture coming in, the other tracks motion going out. The squares on the knuckles hold a grid of numbers that balances in every direction.
              </p>
              <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin: 0;">
                Each is built as its own portable component.
              </p>
            </div>
          </div>
        </div>
      </section>

      <!-- SUB-ROOM 10.3: THE FIELD ENGINE (MORPHOGENETIC GRID) -->
      <section class="section-box nested-component field-child last-child" id="sec-field-engine" data-parent="sec-field-conditions" data-keywords="generative grid systems methodology">
        <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
        <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>

        <div class="room-tags-wrapper font-tech">
          <span class="room-tags-label">touches //</span>
          <button class="room-tag-pill" onclick="filterExhibition('generative')">generative</button>
          <button class="room-tag-pill" onclick="filterExhibition('grid')">grid</button>
          <button class="room-tag-pill" onclick="filterExhibition('systems')">systems</button>
          <button class="room-tag-pill" onclick="filterExhibition('methodology')">methodology</button>
        </div>

        <span class="section-num">└── Sub-Room 10.3 / Morphogenetic Grid</span>
        <h2 class="section-header">The Field Engine</h2>
        <div class="project-meta-strip font-tech">
          <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-development"><span class="status-dot"></span><span>In Development</span></span></span>
          <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2026 (Ongoing)</span></span>
        </div>

        <p class="lead-text" style="font-size: 14.5px; margin-bottom: 3rem;">
          The engine underneath Field Conditions. Two grid families, Cartesian or isometric, act as fields of attraction. Every point is drawn toward the nearest lane with a nonlinear force, stretched along the corridor it joins and squeezed across it, so elements gather at the nodes and intersections where the fields cross.
        </p>

        <div class="blueprint-viewport-split" id="field-engine-sandbox" style="height: 560px;">

          <!-- Left Viewport: annotated mechanics diagram of the morphogenetic grid -->
          <div class="blueprint-left-stack" style="padding: 1.5rem; background-color: var(--nested-card-bg); align-items: center; justify-content: center;">
            <div class="field-diagram-stage">
              <svg viewBox="0 0 420 400" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Diagram of the morphogenetic grid: a distortion field with lane suction, nodes at intersections, and a machine-learning blob-tracking feed" font-family="var(--font-technical)">
                <defs>
                  <marker id="fd-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                    <path d="M 0,1 L 9,5 L 0,9 Z" fill="var(--color-ui-red)" />
                  </marker>
                  <marker id="fd-arrow-ml" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                    <path d="M 0,1 L 9,5 L 0,9 Z" fill="var(--color-ui-ochre)" />
                  </marker>
                </defs>

                <text x="22" y="28" font-size="11" letter-spacing="1.4" fill="var(--color-ui-blue)" font-weight="700">MORPHOGENETIC GRID</text>
                <text x="22" y="42" font-size="8.5" letter-spacing="1.2" fill="var(--text-color)" opacity="0.5">DISTORTION FIELD // PLACEMENT BY FORCE</text>

                <!-- Faint base grid (the undistorted lattice) -->
                <g stroke="var(--color-cad-line)" stroke-width="1">
                  <line x1="40" y1="60" x2="40" y2="262" /><line x1="93" y1="60" x2="93" y2="262" /><line x1="146" y1="60" x2="146" y2="262" /><line x1="252" y1="60" x2="252" y2="262" /><line x1="305" y1="60" x2="305" y2="262" /><line x1="358" y1="60" x2="358" y2="262" />
                  <line x1="40" y1="60" x2="358" y2="60" /><line x1="40" y1="262" x2="358" y2="262" />
                </g>

                <!-- Distorted field lines bowing toward the attractor (199,160) -->
                <g stroke="var(--color-ui-blue)" stroke-width="1.2" fill="none" opacity="0.55">
                  <path d="M 199,60 C 199,100 199,220 199,262" />
                  <path d="M 170,60 C 196,108 196,212 170,262" />
                  <path d="M 228,60 C 202,108 202,212 228,262" />
                  <path d="M 40,118 C 120,150 280,150 358,118" />
                  <path d="M 40,205 C 120,172 280,172 358,205" />
                </g>

                <!-- Animated suction flow down the central lane into the node -->
                <line class="fd-flow" x1="199" y1="64" x2="199" y2="150" stroke="var(--color-ui-blue)" stroke-width="1.4" />

                <!-- Lane-suction arrows pulling toward the node -->
                <g stroke="var(--color-ui-red)" stroke-width="1.3">
                  <line x1="150" y1="160" x2="184" y2="160" marker-end="url(#fd-arrow)" />
                  <line x1="248" y1="160" x2="214" y2="160" marker-end="url(#fd-arrow)" />
                  <line x1="199" y1="120" x2="199" y2="144" marker-end="url(#fd-arrow)" />
                </g>
                <text x="120" y="150" font-size="8" fill="var(--color-ui-red)" text-anchor="middle">LANE</text>
                <text x="120" y="159" font-size="8" fill="var(--color-ui-red)" text-anchor="middle">SUCTION</text>

                <!-- Secondary nodes at other intersections -->
                <circle cx="146" cy="118" r="3.2" fill="var(--color-ui-blue)" opacity="0.6" />
                <circle cx="252" cy="205" r="3.2" fill="var(--color-ui-blue)" opacity="0.6" />

                <!-- Primary attractor node at the intersection -->
                <g>
                  <circle cx="199" cy="160" r="11" fill="none" stroke="var(--color-ui-blue)" stroke-width="1" opacity="0.6" />
                  <circle class="fd-node-pulse" cx="199" cy="160" r="5.5" fill="var(--color-ui-blue)" />
                </g>
                <text x="214" y="150" font-size="8.5" fill="var(--text-color)" opacity="0.75">NODE @</text>
                <text x="214" y="160" font-size="8.5" fill="var(--text-color)" opacity="0.75">INTERSECTION</text>

                <!-- Divider -->
                <line x1="22" y1="296" x2="398" y2="296" stroke="var(--color-cad-line)" stroke-width="1" stroke-dasharray="2,4" />
                <text x="22" y="290" font-size="8.5" letter-spacing="1.2" fill="var(--color-ui-ochre)">ML BLOB TRACKING → SEEDS PLACEMENT</text>

                <!-- ML pipeline: IMAGE -> COCO-SSD -> BLOB BOX -> grid -->
                <g font-size="8.5" fill="var(--text-color)">
                  <rect x="24" y="320" width="74" height="42" fill="none" stroke="var(--color-cad-line)" stroke-width="1" rx="2" />
                  <text x="61" y="345" text-anchor="middle" opacity="0.8">IMAGE</text>

                  <rect x="138" y="320" width="104" height="42" fill="none" stroke="var(--color-ui-ochre)" stroke-width="1.1" rx="2" />
                  <text x="190" y="340" text-anchor="middle" fill="var(--color-ui-ochre)">COCO-SSD</text>
                  <text x="190" y="352" text-anchor="middle" opacity="0.55" font-size="7.5">TensorFlow.js</text>

                  <rect x="282" y="320" width="96" height="42" fill="none" stroke="var(--color-cad-line)" stroke-width="1" rx="2" />
                  <rect x="300" y="330" width="40" height="22" fill="none" stroke="var(--color-ui-red)" stroke-width="1" stroke-dasharray="3,2" />
                  <line x1="320" y1="330" x2="320" y2="352" stroke="var(--color-ui-red)" stroke-width="0.5" /><line x1="300" y1="341" x2="340" y2="341" stroke="var(--color-ui-red)" stroke-width="0.5" />
                  <text x="330" y="345" text-anchor="start" opacity="0.7" font-size="7">BLOB</text>
                </g>
                <g stroke="var(--color-ui-ochre)" stroke-width="1.2">
                  <line x1="100" y1="341" x2="134" y2="341" marker-end="url(#fd-arrow-ml)" />
                  <line x1="244" y1="341" x2="278" y2="341" marker-end="url(#fd-arrow-ml)" />
                  <path d="M 330,320 C 330,300 280,280 220,200" fill="none" marker-end="url(#fd-arrow-ml)" stroke-dasharray="4,3" />
                </g>
              </svg>
            </div>
          </div>

          <!-- Right Viewport: how placement arises + parameters -->
          <div class="blueprint-right-details" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid var(--color-cad-line); background-color: var(--nested-card-bg); border-radius: 4px; overflow: hidden; position: relative;">
            <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
            <div>
              <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">A Living Grid</h4>
            </div>
            <div class="sonifold-essay-scroll-area" style="flex: 1; overflow-y: auto; padding-right: 0.5rem; margin: 0.5rem 0;">
              <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin: 0 0 0.75rem 0;">
                This takes the ordinary design grid and gives it physical force. Elements snap toward the lines, and they also get pulled, drawn in by a field rather than locked to a fixed position. You can turn the strength of that force up or down, from a firm hold to a loose, drifting attraction.
              </p>
              <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin: 0 0 0.75rem 0;">
                At full strength it behaves like a real environment. Elements pull toward each other and push apart, reacting to the gradients and the text around them, settling at the crossings where forces meet. It feels like moving through a world rather than filling in a prison of cells.
              </p>
              <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin: 0;">
                Images you bring in are read for what they contain, so the field can place them by their content. The finished page exports as clean vector and as a print-resolution poster.
              </p>
            </div>
          </div>
        </div>
      </section>

    </div>

    <!-- ==================== INTERFACERS (GEOMETRIC PORTRAIT GENERATOR) ==================== -->
    <section class="section-box" id="sec-selfos" data-keywords="systems extension companion somatic">
      <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
      <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>
      
      <div class="room-tags-wrapper font-tech">
        <span class="room-tags-label">touches //</span>
        <button class="room-tag-pill" onclick="filterExhibition('systems')">systems</button>
        <button class="room-tag-pill" onclick="filterExhibition('extension')">extension</button>
        <button class="room-tag-pill" onclick="filterExhibition('companion')">companion</button>
        <button class="room-tag-pill" onclick="filterExhibition('somatic')">somatic</button>
      </div>

      <span class="section-num">Redirect</span>
      <h2 class="section-header">Self OS</h2>
      <div class="project-meta-strip font-tech">
        <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-development"><span class="status-dot"></span><span>In Development</span></span></span>
        <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2025 (Ongoing)</span></span>
      </div>

      <div class="blueprint-viewport-split" id="selfos-parent-sandbox" style="height: 580px;">
            <!-- Left Viewport: Self OS presence field — CSS aurora matching the extension, populated so it feels full of presence -->
            <div class="blueprint-left-stack" style="padding: 0; background-color: #08080f; flex-direction: column; overflow: hidden; position: relative; border-right: 1px solid var(--color-cad-line); height: 100%;">
              <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px; z-index: 30;"></div>
              <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px; z-index: 30;"></div>
              <div class="selfos-presence-field">
                <div class="selfos-light-group">
                  <div class="selfos-aperture"></div>
                  <div class="selfos-atmosphere"></div>
                  <div class="selfos-horizon"></div>
                  <div class="selfos-vignette"></div>
                </div>
                <div class="selfos-richness"></div>
                <div class="selfos-inversion"></div>
                <div class="selfos-presence-dots">
                  <i class="selfos-presence-dot" style="left:89.9%; top:87.5%; --s:4.3px; --d:0.75s; --dur:8.6s; --th:0.0;"></i>
                  <i class="selfos-presence-dot" style="left:42.8%; top:51.1%; --s:2.2px; --d:1.73s; --dur:7.7s; --th:0.8;"></i>
                  <i class="selfos-presence-dot" style="left:23.8%; top:44.6%; --s:1.9px; --d:0.77s; --dur:9.3s; --th:1.6;"></i>
                  <i class="selfos-presence-dot" style="left:42.6%; top:49.6%; --s:3.9px; --d:3.23s; --dur:5.3s; --th:2.3;"></i>
                  <i class="selfos-presence-dot" style="left:76.6%; top:56.3%; --s:3.6px; --d:5.59s; --dur:10.8s; --th:3.1;"></i>
                  <i class="selfos-presence-dot" style="left:37.1%; top:71.1%; --s:2.8px; --d:5.15s; --dur:9.0s; --th:3.9;"></i>
                  <i class="selfos-presence-dot" style="left:32.6%; top:12.5%; --s:3.1px; --d:6.46s; --dur:8.5s; --th:4.7;"></i>
                  <i class="selfos-presence-dot" style="left:45.1%; top:60.9%; --s:2.3px; --d:1.61s; --dur:6.9s; --th:5.4;"></i>
                  <i class="selfos-presence-dot" style="left:79.7%; top:22.0%; --s:2.1px; --d:0.89s; --dur:5.2s; --th:6.2;"></i>
                  <i class="selfos-presence-dot" style="left:28.9%; top:54.8%; --s:4.1px; --d:2.98s; --dur:7.2s; --th:7.0;"></i>
                  <i class="selfos-presence-dot" style="left:30.1%; top:31.5%; --s:4.0px; --d:4.94s; --dur:6.6s; --th:7.8;"></i>
                  <i class="selfos-presence-dot" style="left:13.1%; top:73.2%; --s:3.8px; --d:7.46s; --dur:6.4s; --th:8.5;"></i>
                  <i class="selfos-presence-dot" style="left:54.3%; top:84.9%; --s:3.5px; --d:8.51s; --dur:6.0s; --th:9.3;"></i>
                  <i class="selfos-presence-dot" style="left:94.7%; top:9.9%; --s:3.0px; --d:0.21s; --dur:9.9s; --th:10.1;"></i>
                  <i class="selfos-presence-dot" style="left:67.6%; top:89.7%; --s:4.1px; --d:8.54s; --dur:8.2s; --th:10.9;"></i>
                  <i class="selfos-presence-dot" style="left:95.9%; top:70.2%; --s:2.8px; --d:8.77s; --dur:7.3s; --th:11.6;"></i>
                  <i class="selfos-presence-dot" style="left:21.2%; top:11.6%; --s:3.1px; --d:1.77s; --dur:10.6s; --th:12.4;"></i>
                  <i class="selfos-presence-dot" style="left:92.3%; top:23.8%; --s:2.1px; --d:4.76s; --dur:6.0s; --th:13.2;"></i>
                  <i class="selfos-presence-dot" style="left:54.1%; top:75.7%; --s:2.5px; --d:3.8s; --dur:10.4s; --th:14.0;"></i>
                  <i class="selfos-presence-dot" style="left:44.8%; top:34.8%; --s:4.3px; --d:7.32s; --dur:10.4s; --th:14.7;"></i>
                  <i class="selfos-presence-dot" style="left:67.6%; top:40.9%; --s:3.7px; --d:7.47s; --dur:8.8s; --th:15.5;"></i>
                  <i class="selfos-presence-dot" style="left:25.4%; top:30.7%; --s:2.9px; --d:6.94s; --dur:8.3s; --th:16.3;"></i>
                  <i class="selfos-presence-dot" style="left:54.7%; top:76.9%; --s:2.1px; --d:5.68s; --dur:7.0s; --th:17.1;"></i>
                  <i class="selfos-presence-dot" style="left:55.6%; top:77.7%; --s:2.5px; --d:8.56s; --dur:5.5s; --th:17.8;"></i>
                  <i class="selfos-presence-dot" style="left:55.8%; top:52.1%; --s:2.5px; --d:5.05s; --dur:7.8s; --th:18.6;"></i>
                  <i class="selfos-presence-dot" style="left:45.3%; top:67.5%; --s:1.8px; --d:3.39s; --dur:9.7s; --th:19.4;"></i>
                  <i class="selfos-presence-dot" style="left:16.3%; top:80.5%; --s:2.4px; --d:6.13s; --dur:6.0s; --th:20.2;"></i>
                  <i class="selfos-presence-dot" style="left:45.2%; top:41.8%; --s:2.0px; --d:6.3s; --dur:7.9s; --th:20.9;"></i>
                  <i class="selfos-presence-dot" style="left:67.8%; top:51.9%; --s:3.4px; --d:4.74s; --dur:6.8s; --th:21.7;"></i>
                  <i class="selfos-presence-dot" style="left:87.5%; top:12.5%; --s:4.3px; --d:7.77s; --dur:8.0s; --th:22.5;"></i>
                  <i class="selfos-presence-dot" style="left:76.0%; top:63.6%; --s:3.5px; --d:2.62s; --dur:6.9s; --th:23.3;"></i>
                  <i class="selfos-presence-dot" style="left:35.8%; top:31.3%; --s:4.5px; --d:3.07s; --dur:7.3s; --th:24.0;"></i>
                  <i class="selfos-presence-dot" style="left:42.4%; top:76.0%; --s:3.1px; --d:4.98s; --dur:6.5s; --th:24.8;"></i>
                  <i class="selfos-presence-dot" style="left:29.1%; top:12.8%; --s:2.4px; --d:2.37s; --dur:10.1s; --th:25.6;"></i>
                  <i class="selfos-presence-dot" style="left:50.2%; top:14.6%; --s:3.1px; --d:1.09s; --dur:8.4s; --th:26.4;"></i>
                  <i class="selfos-presence-dot" style="left:44.6%; top:79.7%; --s:2.5px; --d:7.66s; --dur:6.5s; --th:27.1;"></i>
                  <i class="selfos-presence-dot" style="left:95.4%; top:60.2%; --s:1.9px; --d:7.26s; --dur:6.7s; --th:27.9;"></i>
                  <i class="selfos-presence-dot" style="left:37.1%; top:17.8%; --s:4.1px; --d:0.81s; --dur:9.4s; --th:28.7;"></i>
                  <i class="selfos-presence-dot" style="left:40.2%; top:64.1%; --s:2.6px; --d:0.7s; --dur:10.5s; --th:29.5;"></i>
                  <i class="selfos-presence-dot" style="left:64.5%; top:19.8%; --s:4.5px; --d:8.21s; --dur:6.1s; --th:30.2;"></i>
                  <i class="selfos-presence-dot" style="left:4.8%; top:58.2%; --s:2.2px; --d:6.59s; --dur:7.8s; --th:31.0;"></i>
                  <i class="selfos-presence-dot" style="left:69.7%; top:54.6%; --s:4.0px; --d:7.39s; --dur:8.6s; --th:31.8;"></i>
                  <i class="selfos-presence-dot" style="left:58.6%; top:33.4%; --s:2.2px; --d:0.83s; --dur:10.1s; --th:32.6;"></i>
                  <i class="selfos-presence-dot" style="left:22.4%; top:42.1%; --s:2.7px; --d:5.58s; --dur:8.2s; --th:33.3;"></i>
                  <i class="selfos-presence-dot" style="left:83.7%; top:42.9%; --s:2.8px; --d:5.86s; --dur:9.5s; --th:34.1;"></i>
                  <i class="selfos-presence-dot" style="left:90.0%; top:32.1%; --s:4.3px; --d:8.83s; --dur:10.9s; --th:34.9;"></i>
                  <i class="selfos-presence-dot" style="left:15.1%; top:38.1%; --s:4.0px; --d:7.48s; --dur:5.2s; --th:35.7;"></i>
                  <i class="selfos-presence-dot" style="left:40.1%; top:68.0%; --s:3.9px; --d:4.82s; --dur:6.3s; --th:36.4;"></i>
                  <i class="selfos-presence-dot" style="left:41.2%; top:10.1%; --s:2.7px; --d:3.85s; --dur:9.9s; --th:37.2;"></i>
                  <i class="selfos-presence-dot" style="left:58.4%; top:41.0%; --s:2.5px; --d:2.84s; --dur:9.0s; --th:38.0;"></i>
                  <i class="selfos-presence-dot" style="left:44.9%; top:20.1%; --s:4.1px; --d:5.18s; --dur:10.8s; --th:38.8;"></i>
                  <i class="selfos-presence-dot" style="left:53.4%; top:59.2%; --s:3.0px; --d:5.47s; --dur:10.5s; --th:39.5;"></i>
                  <i class="selfos-presence-dot" style="left:95.2%; top:62.5%; --s:3.0px; --d:0.56s; --dur:10.0s; --th:40.3;"></i>
                  <i class="selfos-presence-dot" style="left:39.8%; top:38.3%; --s:2.0px; --d:0.31s; --dur:7.3s; --th:41.1;"></i>
                  <i class="selfos-presence-dot" style="left:94.6%; top:69.4%; --s:3.8px; --d:6.02s; --dur:6.6s; --th:41.9;"></i>
                  <i class="selfos-presence-dot" style="left:18.9%; top:57.4%; --s:2.0px; --d:5.29s; --dur:8.1s; --th:42.6;"></i>
                  <i class="selfos-presence-dot" style="left:54.0%; top:15.6%; --s:2.0px; --d:4.26s; --dur:5.9s; --th:43.4;"></i>
                  <i class="selfos-presence-dot" style="left:63.3%; top:31.9%; --s:3.5px; --d:6.75s; --dur:8.6s; --th:44.2;"></i>
                  <i class="selfos-presence-dot" style="left:53.0%; top:22.2%; --s:2.8px; --d:8.8s; --dur:6.6s; --th:45.0;"></i>
                  <i class="selfos-presence-dot" style="left:29.7%; top:47.9%; --s:3.3px; --d:7.12s; --dur:6.8s; --th:45.7;"></i>
                  <i class="selfos-presence-dot" style="left:93.5%; top:6.9%; --s:4.0px; --d:5.13s; --dur:10.4s; --th:46.5;"></i>
                  <i class="selfos-presence-dot" style="left:17.4%; top:65.0%; --s:4.5px; --d:6.0s; --dur:5.7s; --th:47.3;"></i>
                  <i class="selfos-presence-dot" style="left:89.6%; top:89.4%; --s:2.1px; --d:7.45s; --dur:5.5s; --th:48.1;"></i>
                  <i class="selfos-presence-dot" style="left:10.6%; top:74.2%; --s:3.8px; --d:8.61s; --dur:8.8s; --th:48.8;"></i>
                  <i class="selfos-presence-dot" style="left:51.1%; top:28.7%; --s:3.4px; --d:8.93s; --dur:8.9s; --th:49.6;"></i>
                  <i class="selfos-presence-dot" style="left:85.3%; top:22.2%; --s:3.9px; --d:6.59s; --dur:5.4s; --th:50.4;"></i>
                  <i class="selfos-presence-dot" style="left:80.1%; top:20.3%; --s:2.4px; --d:0.55s; --dur:9.0s; --th:51.2;"></i>
                  <i class="selfos-presence-dot" style="left:16.4%; top:89.9%; --s:1.8px; --d:7.29s; --dur:9.6s; --th:51.9;"></i>
                  <i class="selfos-presence-dot" style="left:56.5%; top:54.8%; --s:4.0px; --d:5.73s; --dur:5.8s; --th:52.7;"></i>
                  <i class="selfos-presence-dot" style="left:77.9%; top:35.8%; --s:3.4px; --d:4.61s; --dur:10.4s; --th:53.5;"></i>
                  <i class="selfos-presence-dot" style="left:41.9%; top:79.2%; --s:2.0px; --d:2.94s; --dur:9.0s; --th:54.3;"></i>
                  <i class="selfos-presence-dot" style="left:60.5%; top:77.4%; --s:2.4px; --d:7.24s; --dur:9.8s; --th:55.0;"></i>
                  <i class="selfos-presence-dot" style="left:16.4%; top:17.2%; --s:3.4px; --d:8.78s; --dur:8.7s; --th:55.8;"></i>
                  <i class="selfos-presence-dot" style="left:43.2%; top:49.1%; --s:4.1px; --d:4.7s; --dur:8.2s; --th:56.6;"></i>
                  <i class="selfos-presence-dot" style="left:58.8%; top:86.1%; --s:4.0px; --d:7.55s; --dur:6.6s; --th:57.4;"></i>
                  <i class="selfos-presence-dot" style="left:59.4%; top:76.6%; --s:3.8px; --d:8.57s; --dur:10.5s; --th:58.1;"></i>
                  <i class="selfos-presence-dot" style="left:15.0%; top:49.2%; --s:2.8px; --d:1.85s; --dur:8.0s; --th:58.9;"></i>
                  <i class="selfos-presence-dot" style="left:95.5%; top:71.8%; --s:2.1px; --d:2.23s; --dur:7.2s; --th:59.7;"></i>
                  <i class="selfos-presence-dot" style="left:86.2%; top:45.0%; --s:2.2px; --d:4.95s; --dur:6.5s; --th:60.5;"></i>
                  <i class="selfos-presence-dot" style="left:6.6%; top:56.6%; --s:4.6px; --d:6.98s; --dur:9.4s; --th:61.2;"></i>
                  <i class="selfos-presence-dot" style="left:17.3%; top:53.9%; --s:3.6px; --d:6.83s; --dur:7.7s; --th:62.0;"></i>
                  <i class="selfos-presence-dot" style="left:8.0%; top:85.7%; --s:2.5px; --d:6.65s; --dur:7.8s; --th:62.8;"></i>
                  <i class="selfos-presence-dot" style="left:76.2%; top:34.4%; --s:2.1px; --d:3.85s; --dur:7.9s; --th:63.6;"></i>
                  <i class="selfos-presence-dot" style="left:77.5%; top:40.1%; --s:3.7px; --d:3.39s; --dur:9.4s; --th:64.3;"></i>
                  <i class="selfos-presence-dot" style="left:19.4%; top:81.6%; --s:4.4px; --d:0.21s; --dur:10.2s; --th:65.1;"></i>
                  <i class="selfos-presence-dot" style="left:76.1%; top:65.3%; --s:2.1px; --d:6.6s; --dur:9.6s; --th:65.9;"></i>
                  <i class="selfos-presence-dot" style="left:61.9%; top:88.8%; --s:4.5px; --d:5.7s; --dur:10.6s; --th:66.7;"></i>
                  <i class="selfos-presence-dot" style="left:16.5%; top:31.0%; --s:3.3px; --d:4.7s; --dur:10.7s; --th:67.4;"></i>
                  <i class="selfos-presence-dot" style="left:62.8%; top:59.1%; --s:3.5px; --d:8.51s; --dur:7.4s; --th:68.2;"></i>
                  <i class="selfos-presence-dot" style="left:72.5%; top:57.2%; --s:2.9px; --d:3.05s; --dur:5.9s; --th:69.0;"></i>
                  <i class="selfos-presence-dot" style="left:4.0%; top:34.2%; --s:2.6px; --d:0.73s; --dur:7.9s; --th:69.8;"></i>
                  <i class="selfos-presence-dot" style="left:36.0%; top:85.6%; --s:4.0px; --d:5.99s; --dur:10.1s; --th:70.5;"></i>
                  <i class="selfos-presence-dot" style="left:28.8%; top:15.1%; --s:3.5px; --d:2.05s; --dur:10.9s; --th:71.3;"></i>
                  <i class="selfos-presence-dot" style="left:42.9%; top:82.1%; --s:2.5px; --d:0.84s; --dur:8.8s; --th:72.1;"></i>
                  <i class="selfos-presence-dot" style="left:68.1%; top:27.3%; --s:4.4px; --d:8.76s; --dur:9.1s; --th:72.9;"></i>
                  <i class="selfos-presence-dot" style="left:95.2%; top:90.5%; --s:2.2px; --d:6.57s; --dur:9.5s; --th:73.6;"></i>
                  <i class="selfos-presence-dot" style="left:71.8%; top:34.5%; --s:3.3px; --d:5.29s; --dur:10.1s; --th:74.4;"></i>
                  <i class="selfos-presence-dot" style="left:7.8%; top:37.6%; --s:2.7px; --d:7.12s; --dur:5.7s; --th:75.2;"></i>
                  <i class="selfos-presence-dot" style="left:8.8%; top:15.0%; --s:2.1px; --d:3.92s; --dur:10.2s; --th:76.0;"></i>
                  <i class="selfos-presence-dot" style="left:36.4%; top:13.8%; --s:3.7px; --d:2.99s; --dur:8.4s; --th:76.7;"></i>
                  <i class="selfos-presence-dot" style="left:73.3%; top:44.7%; --s:3.9px; --d:5.58s; --dur:10.1s; --th:77.5;"></i>
                  <i class="selfos-presence-dot" style="left:74.7%; top:83.4%; --s:3.9px; --d:2.54s; --dur:8.0s; --th:78.3;"></i>
                  <i class="selfos-presence-dot" style="left:75.6%; top:73.3%; --s:3.8px; --d:7.59s; --dur:9.9s; --th:79.1;"></i>
                  <i class="selfos-presence-dot" style="left:53.9%; top:60.7%; --s:1.9px; --d:4.3s; --dur:9.4s; --th:79.8;"></i>
                  <i class="selfos-presence-dot" style="left:88.9%; top:78.8%; --s:3.0px; --d:2.07s; --dur:10.3s; --th:80.6;"></i>
                  <i class="selfos-presence-dot" style="left:64.8%; top:21.7%; --s:1.9px; --d:7.9s; --dur:8.5s; --th:81.4;"></i>
                  <i class="selfos-presence-dot" style="left:13.3%; top:91.1%; --s:3.4px; --d:6.83s; --dur:9.8s; --th:82.2;"></i>
                  <i class="selfos-presence-dot" style="left:27.1%; top:50.4%; --s:2.3px; --d:5.51s; --dur:7.6s; --th:82.9;"></i>
                  <i class="selfos-presence-dot" style="left:77.3%; top:15.1%; --s:2.4px; --d:3.48s; --dur:5.0s; --th:83.7;"></i>
                  <i class="selfos-presence-dot" style="left:41.2%; top:88.7%; --s:4.2px; --d:1.62s; --dur:10.0s; --th:84.5;"></i>
                  <i class="selfos-presence-dot" style="left:24.2%; top:25.8%; --s:3.6px; --d:2.65s; --dur:6.2s; --th:85.3;"></i>
                  <i class="selfos-presence-dot" style="left:11.0%; top:20.4%; --s:2.3px; --d:8.21s; --dur:5.3s; --th:86.0;"></i>
                  <i class="selfos-presence-dot" style="left:53.8%; top:23.5%; --s:3.8px; --d:0.03s; --dur:7.2s; --th:86.8;"></i>
                  <i class="selfos-presence-dot" style="left:72.3%; top:7.3%; --s:3.0px; --d:2.93s; --dur:7.9s; --th:87.6;"></i>
                  <i class="selfos-presence-dot" style="left:62.1%; top:12.0%; --s:4.2px; --d:2.43s; --dur:9.6s; --th:88.4;"></i>
                  <i class="selfos-presence-dot" style="left:15.5%; top:13.2%; --s:2.3px; --d:0.75s; --dur:6.5s; --th:89.1;"></i>
                  <i class="selfos-presence-dot" style="left:16.1%; top:12.5%; --s:4.2px; --d:4.76s; --dur:8.0s; --th:89.9;"></i>
                  <i class="selfos-presence-dot" style="left:50.8%; top:75.5%; --s:1.9px; --d:0.41s; --dur:9.0s; --th:90.7;"></i>
                  <i class="selfos-presence-dot" style="left:3.7%; top:49.0%; --s:3.5px; --d:7.65s; --dur:5.0s; --th:91.5;"></i>
                  <i class="selfos-presence-dot" style="left:40.8%; top:32.2%; --s:3.4px; --d:0.3s; --dur:9.5s; --th:92.2;"></i>
                  <i class="selfos-presence-dot" style="left:93.0%; top:52.7%; --s:3.7px; --d:7.52s; --dur:10.1s; --th:93.0;"></i>
                  <i class="selfos-presence-dot" style="left:80.0%; top:47.4%; --s:2.0px; --d:7.15s; --dur:10.1s; --th:93.8;"></i>
                  <i class="selfos-presence-dot" style="left:68.9%; top:32.4%; --s:4.5px; --d:5.61s; --dur:6.9s; --th:94.6;"></i>
                  <i class="selfos-presence-dot" style="left:76.9%; top:24.5%; --s:2.5px; --d:8.15s; --dur:5.3s; --th:95.3;"></i>
                  <i class="selfos-presence-dot" style="left:84.8%; top:39.5%; --s:3.4px; --d:6.22s; --dur:10.4s; --th:96.1;"></i>
                  <i class="selfos-presence-dot" style="left:23.7%; top:13.1%; --s:3.2px; --d:2.02s; --dur:7.5s; --th:96.9;"></i>
                  <i class="selfos-presence-dot" style="left:13.4%; top:12.8%; --s:3.4px; --d:0.47s; --dur:6.6s; --th:97.7;"></i>
                  <i class="selfos-presence-dot" style="left:39.5%; top:13.3%; --s:4.1px; --d:8.11s; --dur:5.2s; --th:98.4;"></i>
                  <i class="selfos-presence-dot" style="left:78.8%; top:20.3%; --s:3.8px; --d:0.55s; --dur:9.5s; --th:99.2;"></i>
                  <i class="selfos-presence-dot" style="left:90.7%; top:27.5%; --s:2.3px; --d:3.06s; --dur:10.2s; --th:100.0;"></i>
                </div>
                <span class="selfos-comet" style="--path: path('M -70 167 Q 275 170 590 32'); --ci:0.71; --P:71.8s; --off:4s;"></span>
                <span class="selfos-comet" style="--path: path('M 275 430 Q 165 173 -70 20'); --ci:0.87; --P:80.0s; --off:17s;"></span>
                <span class="selfos-comet" style="--path: path('M 590 109 Q 412 83 316 -70'); --ci:0.93; --P:74.1s; --off:29s;"></span>
                <span class="selfos-comet" style="--path: path('M -70 371 Q 228 162 590 119'); --ci:1.39; --P:78.1s; --off:41s;"></span>
                <span class="selfos-comet" style="--path: path('M -70 6 Q 199 159 348 430'); --ci:1.18; --P:76.7s; --off:52s;"></span>
                <div class="selfos-milestone">
                  <span style="--P:71.8s; --off:4s;">Maya · 5-day streak</span>
                  <span style="--P:80.0s; --off:17s;">Kai · 12 in a row</span>
                  <span style="--P:74.1s; --off:29s;">Noor kept the streak</span>
                  <span style="--P:78.1s; --off:41s;">Theo · streak of 9</span>
                  <span style="--P:76.7s; --off:52s;">Amara followed through</span>
                </div>
                <div class="selfos-presence-count font-tech">Who's with me? // <span class="selfos-count-num"></span> here right now</div>
              </div>
            </div>

        <div class="blueprint-right-details selfos-parent-slide-card" id="selfos-parent-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: hidden; position: relative;">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
          
          <!-- Slides Viewport Wrapper -->
          <div class="selfos-parent-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
            <div class="selfos-parent-slides-viewport" id="selfos-parent-slides-viewport" style="display: flex; width: 300%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
              
              <!-- SLIDE 01: Overview -->
              <div class="selfos-parent-slide-pane active" id="pane-selfos-parent-overview" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                <div class="overview-glance">
                  <p class="overview-question">What if friction is one side of freedom?</p>
                  <p class="overview-what">A Chrome extension that reroutes your attention toward a shared presence online, and back toward what tends to slip down the list: creative projects, and whatever lives in a different headspace from your task list. At set moments it steps into the scroll and hands you something small and physical to do, so your attention has somewhere better to land. It is also an experiment in collective presence, being aware of one another as quiet witnesses, present in the same moment.</p>
                  <div class="curatorial-throughline" style="border-left: 2px solid var(--color-moss-green); padding-left: 10px; margin-top: 1rem; font-size: 12px; font-style: italic; opacity: 0.85;">
                    Grounding focus in mechanical routine, reclaiming attention through shared presence.
                  </div>
                </div>
              </div>

              <!-- SLIDE 02: Essay -->
              <div class="selfos-parent-slide-pane" id="pane-selfos-parent-essay" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box; overflow: hidden;">
                <div style="display: flex; flex-direction: column; height: 100%;">
                  <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem;">
                    <span class="focused-reader-btn font-tech" onclick="openEssayFocusedReader('Room 07')" style="font-size: 11px; color: var(--color-ui-blue); cursor: pointer; border: 1px solid var(--color-cad-line); padding: 1px 4px; border-radius: 2px;">⛶ Focus Reader</span>
                  </div>
                  <div class="sonifold-essay-scroll-area" id="selfos-parent-essay-scroll" style="flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.6; opacity: 0.9;">
                    <p style="margin-bottom: 0.8rem;">
                      Most of the interfaces we live inside are built to extract: frictionless paths that keep you scrolling, attention harvested and sold. Self OS starts by putting friction back. At scheduled moments it breaks the passive loop and hands you a small, physical thing to do, below the threshold where decision fatigue sets in.
                    </p>
                    <p style="margin-bottom: 0.8rem;">
                      The deeper move is to reroute the energy that gets reclaimed. The same interface mechanics that usually drain us can be rebuilt as interfaces we make for each other: tools for exploration, for grounding, for presence. Self OS is my first attempt at that inversion, taking the shape of the thing that extracts from you and using it to give energy back.
                    </p>
                    <p style="margin-bottom: 0;">
                      It also holds a quieter question about being together. Rather than the tribes that algorithmic grouping sorts us into, what if we were simply aware of one another as witnesses, present in the same moment?
                    </p>
                  </div>
                </div>
              </div>

              <!-- SLIDE 03: Specs -->
              <div class="selfos-parent-slide-pane" id="pane-selfos-parent-specs" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                <div>
                  <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                    Bibliography &amp; Research
                  </h4>

                  <div class="research-list">
                    <details class="research-entry"><summary><span class="research-author">01 / GURDJIEFF, G. I.</span><span class="research-title">In Search of the Miraculous — the Law of Three (Ouspensky, 1949)</span></summary><div class="research-note">A mechanical habit is a passive process that keeps the observer asleep; it takes a denying force to break it. <strong>In the work:</strong> selfOS is that denying force, a scheduled interrupter that shocks attention back into presence.</div></details>
                    <details class="research-entry"><summary><span class="research-author">02 / SKINNER, B. F.</span><span class="research-title">Schedules of Reinforcement (1957)</span></summary><div class="research-note">Variable rewards on a frictionless lever produce the most compulsive behavior — the logic of the infinite scroll. <strong>In the work:</strong> deliberate friction breaks the variable-reward loop.</div></details>
                    <details class="research-entry"><summary><span class="research-author">03 / TURRELL, JAMES</span><span class="research-title">Light and Space (Ganzfeld works)</span></summary><div class="research-note">Slow, enveloping light returns perception to itself. <strong>In the work:</strong> the Presence Chamber's breathing colour fields, light apertures rather than content.</div></details>
                  </div>
                </div>
              </div>

            </div>
          </div>
          
          <!-- Footer Tabs Navigation -->
          <div class="selfos-parent-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
            <button class="controller-btn-tech active" id="btn-selfos-parent-slide-overview" onclick="switchSelfosParentSlide(0)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
              Overview
            </button>
            <button class="controller-btn-tech" id="btn-selfos-parent-slide-essay" onclick="switchSelfosParentSlide(1)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
              Text
            </button>
            <button class="controller-btn-tech" id="btn-selfos-parent-slide-specs" onclick="switchSelfosParentSlide(2)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
              Research
            </button>
          </div>
        </div>
      </div>

      <!-- Collapsible trigger for breakouts -->
      <div style="margin-top: 2rem; border-top: 1px dashed var(--color-cad-line); padding-top: 1.5rem; display: flex; justify-content: center; z-index: 10; position: relative;">
        <button class="folder-toggle-btn font-tech" id="btn-toggle-selfos" onclick="toggleSelfosFolder()" style="width: 100%; max-width: 500px; padding: 12px; font-size: 12px; font-weight: bold; border: 1px solid var(--color-ui-blue); color: var(--color-ui-blue); background: rgba(20,52,240,0.03); border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.3s; box-shadow: 0 4px 12px rgba(20,52,240,0.05);">
          [ + EXPAND COMPONENTS ]
        </button>
      </div>
    </section>

    <!-- selfOS Children Folder Container -->
    <div id="selfos-folder-children" class="folder-children-container">

      <!-- SUB-ROOM 07.1: THE ROULETTE WHEEL -->
      <section class="section-box nested-component selfos-child" id="sec-selfos-roulette" data-parent="sec-selfos" data-keywords="extension routine companion">
        <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
        <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>
        
        <div class="room-tags-wrapper font-tech">
          <span class="room-tags-label">touches //</span>
          <button class="room-tag-pill" onclick="filterExhibition('extension')">extension</button>
          <button class="room-tag-pill" onclick="filterExhibition('routine')">routine</button>
          <button class="room-tag-pill" onclick="filterExhibition('companion')">companion</button>
        </div>

        <span class="section-num">├── Sub-Room 07.1 / The Roulette Wheel</span>
        <h2 class="section-header">The Roulette Wheel</h2>
        <div class="project-meta-strip font-tech">
          <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-development"><span class="status-dot"></span><span>In Development</span></span></span>
          <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2026 (Ongoing)</span></span>
        </div>
        

        <div class="blueprint-viewport-split" id="selfos-roulette-viewport" style="height: 580px;">
          <!-- Left Viewport: Conic Roulette Spinning Wheel -->
          <div class="blueprint-left-stack" style="padding: 0; background-color: #08080f; flex-direction: column; overflow: hidden; position: relative; border-right: 1px solid var(--color-cad-line); height: 100%;">
            <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px; z-index: 20;"></div>
            <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px; z-index: 20;"></div>
            
            <div class="selfos-live-room">
              <!-- Spinning Wheel Frame -->
              <div class="selfos-roulette-ui" id="selfos-roulette-ui" style="background: transparent; backdrop-filter: none; position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10;">
                <div class="selfos-wheel-wrapper">
                  <div class="selfos-wheel-arrow-ptr"></div>
                  <div class="selfos-wheel-frame" id="selfos-wheel-frame" style="background: conic-gradient(from -36deg, rgba(91, 146, 229, 0.25) 0deg 72deg, rgba(220, 179, 92, 0.25) 72deg 144deg, rgba(0, 150, 136, 0.25) 144deg 216deg, rgba(255, 77, 77, 0.25) 216deg 288deg, rgba(138, 77, 255, 0.25) 288deg 360deg); border: 1.5px solid rgba(255, 255, 255, 0.25); box-shadow: 0 0 35px rgba(91, 146, 229, 0.28), inset 0 0 20px rgba(255, 255, 255, 0.05); margin-bottom: 0;">
                    <div class="selfos-wheel-divider" style="transform: rotate(36deg);"></div>
                    <div class="selfos-wheel-divider" style="transform: rotate(108deg);"></div>
                    <div class="selfos-wheel-divider" style="transform: rotate(180deg);"></div>
                    <div class="selfos-wheel-divider" style="transform: rotate(252deg);"></div>
                    <div class="selfos-wheel-divider" style="transform: rotate(324deg);"></div>
                    <div class="selfos-wheel-center-cap"></div>
                    <div class="selfos-wheel-label-segment" style="transform: rotate(0deg);"><span style="color: #ffffff; opacity: 0.95;">Troubadour</span></div>
                    <div class="selfos-wheel-label-segment" style="transform: rotate(72deg);"><span style="color: #ffffff; opacity: 0.95;">Architect</span></div>
                    <div class="selfos-wheel-label-segment" style="transform: rotate(144deg);"><span style="color: #ffffff; opacity: 0.95;">Ninja</span></div>
                    <div class="selfos-wheel-label-segment" style="transform: rotate(216deg);"><span style="color: #ffffff; opacity: 0.95;">2/4 H/O</span></div>
                    <div class="selfos-wheel-label-segment" style="transform: rotate(288deg);"><span style="color: #ffffff; opacity: 0.95;">Magus</span></div>
                  </div>
                </div>
                <button class="selfos-wheel-spin-btn" id="selfos-spin-trigger" onclick="spinSelfosInteractive()" style="background: rgba(255, 255, 255, 0.08); border-color: rgba(255,255,255,0.3); color: #ffffff; margin-top: 1.25rem;">Spin Routine</button>
              </div>

              <!-- Result/Timer HUD -->
              <div id="selfos-task-hud" style="position: absolute; top: 15px; left: 15px; font-family: var(--font-technical); font-size: 11.5px; color: #ffffff; pointer-events: none; background: rgba(10,10,18,0.85); border: 1px solid rgba(255,255,255,0.12); padding: 6px 12px; border-radius: 2px; z-index: 20; display: none;">
                Active Routine: <span id="selfos-active-routine" style="color: var(--color-ui-blue); font-weight: bold;">NINJA</span><br>
                Micro-Task: <span id="selfos-active-task" style="color: var(--color-ui-ochre);">Calisthenics</span><br>
                Time Remaining: <span id="selfos-timer-count" style="color: var(--color-ui-red); font-weight: bold;">05:00</span>
              </div>
              <button id="selfos-btn-spin-again" onclick="resetSelfosInteractive()" class="font-tech" style="position: absolute; top: 15px; right: 15px; z-index: 20; font-size: 9.5px; font-weight: bold; background: rgba(10,10,18,0.8); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.5); padding: 4px 8px; border-radius: 2px; cursor: pointer; display: none; text-transform: uppercase;">[ Spin Again ]</button>
            </div>

            <div style="position: absolute; bottom: 12px; left: 15px; font-family: var(--font-technical); font-size: 11px; opacity: 0.55; letter-spacing: 0.1em; pointer-events: none; background: var(--card-bg); border: 1px solid var(--color-cad-line); padding: 3px 8px; border-radius: 2px; z-index: 20;">
              Figure 07.1 / Conic Decision Wheel
            </div>
          </div>

          <!-- Right Viewport: Slide Deck -->
          <div class="blueprint-right-details selfos-slide-card" id="selfos-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: hidden; position: relative;">
            <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
            <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
            
            <div class="selfos-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
              <div class="selfos-slides-viewport" id="selfos-slides-viewport" style="display: flex; width: 300%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
                
                <!-- SLIDE 01: Overview -->
                <div class="selfos-slide-pane active" id="pane-selfos-overview" style="width: 33.333%;">
                  <div class="overview-glance">
                    <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">Hand It to the Wheel</h4>
                      <p class="overview-what">When a Self OS block kicks in, this wheel is the first thing you see, the centre of the extension. It makes the decisions that go unmade on their own. Creative tasks live in a different space from a task list, one without hierarchy, so they slip past the things that get prioritized. I pre-curate the things I actually want to do, then hand the choice to the wheel: spin it and do what it lands on. Outsourcing that single decision quietly interrupts the workflow I would otherwise stay stuck in, and it has changed how I spend my time.</p>
                  </div>
                </div>

                <!-- SLIDE 02: Essay -->
                <div class="selfos-slide-pane" id="pane-selfos-essay" style="width: 33.333%; overflow: hidden;">
                  <div style="display: flex; flex-direction: column; height: 100%;">
                    <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem;">
                      <span class="focused-reader-btn font-tech" onclick="openEssayFocusedReader('Room 07.1')" style="font-size: 11px; color: var(--color-ui-blue); cursor: pointer; border: 1px solid var(--color-cad-line); padding: 1px 4px; border-radius: 2px;">⛶ Focus Reader</span>
                    </div>
<div class="sonifold-essay-scroll-area" id="selfos-essay-scroll" style="flex: 1; overflow-y: auto; font-family: var(--font-ui); font-size: 13px; line-height: 1.6; opacity: 0.9;">
                      <p style="margin-bottom: 0.8rem;">
                        Friction is the primary mechanism of extraction. Modern interfaces are engineered to route our focus into loops of passive consumption, exploiting the cognitive gap we experience when switching between tasks. selfOS is built as a deliberate, mechanical counterweight. It introduces a physical interruption at a threshold below biological friction, bypassing decision-fatigue by selecting our micro-prioritizations for us.
                      </p>
                    </div>
                  </div>
                </div>

                <!-- SLIDE 03: Specs -->
                <div class="selfos-slide-pane" id="pane-selfos-specs" style="width: 33.333%;">
                  <div>
                    <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                      Bibliography &amp; Research
                    </h4>
                    <div class="research-list">
                      <details class="research-entry"><summary><span class="research-author">01 / IYENGAR &amp; LEPPER</span><span class="research-title">When Choice is Demotivating (2000)</span></summary><div class="research-note">Too many options erode the will to choose at all. <strong>In the work:</strong> the wheel removes the choice so the routine just happens.</div></details>
                      <details class="research-entry"><summary><span class="research-author">02 / JAMES, WILLIAM</span><span class="research-title">Habit — Principles of Psychology (1890)</span></summary><div class="research-note">Habit offloads decisions so attention is freed for what matters. <strong>In the work:</strong> micro-prioritizations automated below the threshold of active choice.</div></details>
                    </div>
                  </div>
                </div>

              </div>
            </div>

            <!-- Footer Nav -->
            <div class="selfos-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
              <button class="controller-btn-tech active" id="btn-selfos-slide-overview" onclick="switchSelfosSlide(0)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">Overview</button>
              <button class="controller-btn-tech" id="btn-selfos-slide-essay" onclick="switchSelfosSlide(1)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">Text</button>
              <button class="controller-btn-tech" id="btn-selfos-slide-specs" onclick="switchSelfosSlide(2)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">Research</button>
            </div>
          </div>
        </div>
      </section>

      <!-- SUB-ROOM 07.2: THE PRESENCE CHAMBER (TURRELL BREATHING FIELD & CO-PRESENCE) -->
      <section class="section-box nested-component selfos-child last-child" id="sec-selfos-presence" data-parent="sec-selfos" data-keywords="presence biometrics somatic interaction">
        <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
        <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>
        
        <div class="room-tags-wrapper font-tech">
          <span class="room-tags-label">touches //</span>
          <button class="room-tag-pill" onclick="filterExhibition('presence')">presence</button>
          <button class="room-tag-pill" onclick="filterExhibition('biometrics')">biometrics</button>
          <button class="room-tag-pill" onclick="filterExhibition('somatic')">somatic</button>
          <button class="room-tag-pill" onclick="filterExhibition('interaction')">interaction</button>
        </div>

        <span class="section-num">└── Sub-Room 07.2 / The Presence Chamber</span>
        <h2 class="section-header">The Presence Chamber</h2>
        <div class="project-meta-strip font-tech">
          <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-complete"><span class="status-dot"></span><span>Complete</span></span></span>
          <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2025</span></span>
        </div>
        

        <div class="blueprint-viewport-split" id="selfos-presence-viewport" style="height: 580px;">
          <!-- Left Viewport: Breathing Color Field & Synced comets -->
          <div class="blueprint-left-stack" style="padding: 0; background-color: #08080f; flex-direction: column; overflow: hidden; position: relative; border-right: 1px solid var(--color-cad-line); height: 100%;">
            <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px; z-index: 20;"></div>
            <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px; z-index: 20;"></div>
            
            <div class="selfos-live-room">
              <!-- Live Turrell light field room -->
              <div class="selfos-light-group">
                <div class="selfos-aperture"></div>
                <div class="selfos-atmosphere"></div>
                <div class="selfos-horizon"></div>
                <div class="selfos-vignette"></div>
              </div>
              <div class="selfos-smooth-pass"></div>
              <div class="selfos-dither-layer"></div>
              
              <!-- Celestial shooting star overlay canvas -->
              <canvas id="selfos-celestial-canvas" style="position: absolute; inset: 0; pointer-events: none; z-index: 5; display: none;"></canvas>

              <!-- Who's with me? co-presence HUD overlay -->
              <div id="selfos-presence-hud" style="position: absolute; bottom: 15px; left: 15px; font-family: var(--font-technical); font-size: 11px; color: rgba(255,255,255,0.7); pointer-events: none; background: rgba(10,10,18,0.85); border: 1px solid rgba(255,255,255,0.12); padding: 4px 10px; border-radius: 2px; z-index: 20; display: none;">
                Who's with me? // <span id="selfos-seeker-count" style="color: var(--color-ui-red); font-weight: bold;">5</span> seekers showing up with you
              </div>
            </div>

            <div style="position: absolute; bottom: 12px; left: 15px; font-family: var(--font-technical); font-size: 11px; opacity: 0.55; letter-spacing: 0.1em; pointer-events: none; background: var(--card-bg); border: 1px solid var(--color-cad-line); padding: 3px 8px; border-radius: 2px; transition: var(--theme-transition); z-index: 20;">
              Figure 07.2 / Synchronous Presence Chamber
            </div>
          </div>

          <!-- Right Viewport: Slide Deck -->
          <div class="blueprint-right-details selfos-presence-slide-card" id="selfos-presence-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: hidden; position: relative;">
            <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
            <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
            
            <!-- Slides Viewport Wrapper -->
            <div class="selfos-presence-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
              <div class="selfos-presence-slides-viewport" id="selfos-presence-slides-viewport" style="display: flex; width: 300%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
                
                <!-- SLIDE 01: Overview -->
                <div class="selfos-presence-slide-pane active" id="pane-selfos-presence-overview" style="width: 33.333%;">
                  <div class="overview-glance">
                    <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">Who's With Me</h4>
                      <p class="overview-what">It connects you with other people who, in the same moment, are taking active control of their attention and rerouting it toward what they actually care about. An experiment in collective presence and witnessing: the quiet knowledge that others are here, doing the same work. It appears at the end of every blocking session.</p>
                  </div>
                </div>

                <!-- SLIDE 02: Essay -->
                <div class="selfos-presence-slide-pane" id="pane-selfos-presence-essay" style="width: 33.333%; overflow: hidden;">
                  <div style="display: flex; flex-direction: column; height: 100%;">
                    <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem;">
                      <span class="focused-reader-btn font-tech" onclick="openEssayFocusedReader('Room 07.2')" style="font-size: 11px; color: var(--color-ui-blue); cursor: pointer; border: 1px solid var(--color-cad-line); padding: 1px 4px; border-radius: 2px;">⛶ Focus Reader</span>
                    </div>
<div class="sonifold-essay-scroll-area" id="selfos-presence-essay-scroll" style="flex: 1; overflow-y: auto; font-family: var(--font-ui); font-size: 13px; line-height: 1.6; opacity: 0.9;">
                      <p style="margin-bottom: 0.8rem;">
                        When the session starts, the interface answers the simple question: <em>Who's with me?</em> It renders a quiet, non-social count of other seekers showing up in the same moment. At milestones, synchronous celestial shooting stars and comets sweep across the screens of all active participants. It is collective presence without social clumping—attention reclaimed as a shared, silent tapestry rather than a private extraction.
                      </p>
                    </div>
                  </div>
                </div>

                <!-- SLIDE 03: Specs -->
                <div class="selfos-presence-slide-pane" id="pane-selfos-presence-specs" style="width: 33.333%;">
                  <div>
                    <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                      Bibliography &amp; Research
                    </h4>
                    <div class="research-list">
                      <details class="research-entry"><summary><span class="research-author">01 / TURRELL, JAMES</span><span class="research-title">Light and Space</span></summary><div class="research-note">Slow, enveloping light returns perception to itself. <strong>In the work:</strong> the browser becomes a breathing field of colour, not a dashboard.</div></details>
                      <details class="research-entry"><summary><span class="research-author">02 / TURKLE, SHERRY</span><span class="research-title">Alone Together (2011)</span></summary><div class="research-note">We seek connection without the demands of contact. <strong>In the work:</strong> a quiet, non-social count of others present in the same moment.</div></details>
                    </div>
                  </div>
                </div>

              </div>
            </div>

            <!-- Footer Nav -->
            <div class="selfos-presence-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
              <button class="controller-btn-tech active" id="btn-selfos-presence-slide-overview" onclick="switchSelfosPresenceSlide(0)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">Overview</button>
              <button class="controller-btn-tech" id="btn-selfos-presence-slide-essay" onclick="switchSelfosPresenceSlide(1)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">Text</button>
              <button class="controller-btn-tech" id="btn-selfos-presence-slide-specs" onclick="switchSelfosPresenceSlide(2)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">Research</button>
            </div>
          </div>
        </div>
      </section>

    </div> <!-- End selfos-folder-children -->
      </div>
    </section>
    <section class="section-box" id="sec-projective-geometry" data-keywords="projection mathematics sonics astrolabe">
      <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
      <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>
      
      <div class="room-tags-wrapper font-tech">
        <span class="room-tags-label">touches //</span>
        <button class="room-tag-pill" onclick="filterExhibition('projection')">projection</button>
        <button class="room-tag-pill" onclick="filterExhibition('mathematics')">mathematics</button>
        <button class="room-tag-pill" onclick="filterExhibition('sonics')">sonics</button>
        <button class="room-tag-pill" onclick="filterExhibition('astrolabe')">astrolabe</button>
      </div>

      <span class="section-num">Polarity</span>
      <h2 class="section-header">Counterspace</h2>
      <div class="project-meta-strip font-tech">
        <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-development"><span class="status-dot"></span><span>In Development</span></span></span>
        <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2025 (Ongoing)</span></span>
      </div>

      <div class="blueprint-viewport-split" id="projective-geometry-viewport" style="height: 580px;">
        <!-- Left Viewport: Curatorial Render Frame -->
        <div class="blueprint-left-stack" style="padding: 0; background-color: var(--nested-card-bg); flex-direction: column; overflow: hidden; position: relative; border-right: 1px solid var(--color-cad-line); height: 100%;">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px; z-index: 25;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px; z-index: 25;"></div>
          <video id="projective-video" src="assets/everything-is-relative.mp4" loop muted autoplay playsinline preload="none" onclick="expandVideo(this)" style="width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in;"></video>
          <button class="projective-expand-btn" onclick="expandProjectiveVideo()" title="Expand" aria-label="Expand video">⛶</button>
          <button class="projective-sound-toggle font-tech" onclick="toggleProjectiveSound(this)"><span class="psnd-ico">&#9658;</span><span class="psnd-label">Sound on for the full piece</span></button>
        </div>

        <!-- Right Viewport: Slide Deck -->
        <div class="blueprint-right-details projective-slide-card" id="projective-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: hidden; position: relative;">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
          
          <!-- Slides Viewport Wrapper -->
          <div class="projective-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
            <div class="projective-slides-viewport" id="projective-slides-viewport" style="display: flex; width: 400%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
              
              <!-- SLIDE 01: Curatorial Overview -->
              <div class="projective-slide-pane active" id="pane-projective-hud" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                <div class="overview-glance">
                  <p class="overview-question">What if position is only a matter of perspective?</p>
                  <p class="overview-what">A visualizer for projective geometry, a system where everything is defined by its relationships rather than absolute measurements. I have also been mapping it onto a room, where each person becomes an origin point and the distances between them play directly as sound. The room itself becomes the instrument, sounding from where people stand and how they relate, a quiet ambience in the space that you come to notice your own part in over time.</p>
                </div>
                
              </div>

              <!-- SLIDE 02: Scrollable Essay Content -->
              <div class="projective-slide-pane" id="pane-projective-essay" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box; overflow: hidden;">
                <div style="display: flex; flex-direction: column; height: 100%;">
                  <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem;">
                    <span class="focused-reader-btn font-tech" onclick="openEssayFocusedReader('Room 07')" style="font-size: 11px; color: var(--color-ui-blue); cursor: pointer; border: 1px solid var(--color-cad-line); padding: 1px 4px; border-radius: 2px;">⛶ Focus Reader</span>
                  </div>
                  
                  <div class="sonifold-essay-scroll-area" id="projective-essay-scroll" style="flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.6; opacity: 0.9;">
                    <p style="margin-bottom: 0.8rem;">
                      Projective geometry has no fixed coordinates and no absolute values. Everything is defined by relationship, by polarity, by how a form sits against the space around it. Each person is their own origin point.
                    </p>
                    <p style="margin-bottom: 0.8rem;">
                      Every form carries a network of formative forces that brought it into being, working inward from the periphery toward the center: counterspace, polar forms, the horizon as a line at infinity. The periphery does as much of the shaping as the center.
                    </p>
                    <p style="margin-bottom: 0.8rem; border-left: 2px solid var(--color-ui-red); padding-left: 0.75rem; font-style: italic;">
                      Spatial translation and musical transposition are the same operation. The coordinate that moves a point through space moves a pitch through a scale.
                    </p>
                    <p style="margin-bottom: 0;">
                      I built this visualizer because so few do projective geometry justice, and because emergent complexity, music, and harmony have held my attention for years. The next step is a room where people themselves are the points, their positions and movement playing the geometry as sound.
                    </p>
                  </div>
                </div>
              </div>
              <!-- SLIDE 03: Technical Specifications Spec Sheet -->
              <div class="projective-slide-pane" id="pane-projective-sandbox" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                <div>
                  <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                    The Instrument
                  </h4>
                  
                  <div class="telemetry-terminal-box" style="min-height: 230px; margin-bottom: 0.5rem;">
                    <div class="terminal-bar">
                      <span class="terminal-dot" style="background-color: var(--color-ui-blue);"></span>
                      <span class="terminal-title font-tech">How It Works</span>
                      <span class="terminal-status font-tech">Stable</span>
                    </div>
                    <div class="terminal-body" style="gap: 0.25rem;">
                      <div class="terminal-row">
                        <span class="term-label">Engine Core:</span>
                        <span class="term-value" style="color: var(--color-ui-blue);">Three.js WebGL // P² Homogeneous Matrices</span>
                      </div>
                      <div class="terminal-row">
                        <span class="term-label">Audio Synth:</span>
                        <span class="term-value">Web Audio API Polyphonic Oscillator Deck</span>
                      </div>
                      <div class="terminal-row">
                        <span class="term-label">Spatial Spacing:</span>
                        <span class="term-value" style="color: var(--color-ui-ochre);">ratio ** (i + bias) // Microtonal Scale</span>
                      </div>
                      <div class="terminal-row">
                        <span class="term-label">Pitch Translation:</span>
                        <span class="term-value">ratio ** ss // Chromatic Pitch Shift</span>
                      </div>
                      <div class="terminal-row">
                        <span class="term-label">Axiom Proofs:</span>
                        <span class="term-value" style="color: var(--color-ui-red);">Pascal Line Hexagram // Desargues Collinearity</span>
                      </div>
                      <div class="terminal-row" style="margin-top: 0.2rem; border-top: 1px dashed var(--color-cad-line); padding-top: 0.2rem;">
                        <span class="term-label">Dependencies:</span>
                        <span class="term-value" style="font-size: 11px;">THREE.OrthographicCamera // THREE.Raycaster</span>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div style="font-family: var(--font-technical); font-size: 11.5px; opacity: 0.5; line-height: 1.45;">
                  In development. The room version comes next.
                </div>
              </div>
          
          

              <!-- SLIDE 04: Interactive Bibliography & Research -->
              <div class="projective-slide-pane" id="pane-projective-refs" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box; overflow: hidden;">
                <div style="display: flex; flex-direction: column; height: 100%;">
                  <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.5rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                    Bibliography &amp; Research
                  </h4>
                  
                  <!-- Scrollable Reference List -->
                  <div class="sonifold-essay-scroll-area" style="flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; font-family: var(--font-technical); font-size: 11px; line-height: 1.55;">
                    
                    <!-- Entry 1 -->
                    <div class="bib-entry" onclick="expandBibNote(0)" style="margin-bottom: 0.5rem; border: 1px solid var(--color-cad-line); padding: 6px; border-radius: 2px; cursor: pointer; transition: all 0.3s; background: var(--bg-color);">
                      <div style="display: flex; justify-content: space-between; font-weight: bold; color: var(--color-ui-blue);">
                        <span>01 / WHICHER, GEORGE</span>
                        <span class="bib-arrow" id="bib-arrow-0" style="color: var(--color-cad-line-strong);">▶</span>
                      </div>
                      <div style="font-style: italic; margin-top: 1px; color: var(--text-color);">The Projective Geometry of Organic Form (1989)</div>
                      <div id="bib-desc-0" style="margin-top: 4px; color: var(--text-color); opacity: 0.9; display: none; border-top: 1px dashed var(--color-cad-line); padding-top: 4px; line-height: 1.45; font-family: var(--font-ui); font-size: 12px; font-style: normal;">
                        "Planar weaving forces work from the infinite periphery toward the center."<br>
                        <strong style="color: var(--color-ui-ochre);">Software translation:</strong> Horizon line tilt updates lowpass filter cutoffs, sonically illustrating Whicher's peripheral space forces.
                      </div>
                    </div>

                    <!-- Entry 2 -->
                    <div class="bib-entry" onclick="expandBibNote(1)" style="margin-bottom: 0.5rem; border: 1px solid var(--color-cad-line); padding: 6px; border-radius: 2px; cursor: pointer; transition: all 0.3s; background: var(--bg-color);">
                      <div style="display: flex; justify-content: space-between; font-weight: bold; color: var(--color-ui-blue);">
                        <span>02 / EDWARDS, LAWRENCE</span>
                        <span class="bib-arrow" id="bib-arrow-1" style="color: var(--color-cad-line-strong);">▶</span>
                      </div>
                      <div style="font-style: italic; margin-top: 1px; color: var(--text-color);">The Vortex of Life (1993)</div>
                      <div id="bib-desc-1" style="margin-top: 4px; color: var(--text-color); opacity: 0.9; display: none; border-top: 1px dashed var(--color-cad-line); padding-top: 4px; line-height: 1.45; font-family: var(--font-ui); font-size: 12px; font-style: normal;">
                        "Budding profiles manifest as path-curves under projective transformations."<br>
                        <strong style="color: var(--color-ui-ochre);">Software translation:</strong> Homographic angle-parametric pencils intersect to generate Steiner conics, mapping 3D space vectors to panning splits.
                      </div>
                    </div>

                    <!-- Entry 3 -->
                    <div class="bib-entry" onclick="expandBibNote(2)" style="margin-bottom: 0.5rem; border: 1px solid var(--color-cad-line); padding: 6px; border-radius: 2px; cursor: pointer; transition: all 0.3s; background: var(--bg-color);">
                      <div style="display: flex; justify-content: space-between; font-weight: bold; color: var(--color-ui-blue);">
                        <span>03 / WILSON, ERV</span>
                        <span class="bib-arrow" id="bib-arrow-2" style="color: var(--color-cad-line-strong);">▶</span>
                      </div>
                      <div style="font-style: italic; margin-top: 1px; color: var(--text-color);">Logarithmic Scale Architectures</div>
                      <div id="bib-desc-2" style="margin-top: 4px; color: var(--text-color); opacity: 0.9; display: none; border-top: 1px dashed var(--color-cad-line); padding-top: 4px; line-height: 1.45; font-family: var(--font-ui); font-size: 12px; font-style: normal;">
                        "Geometric divisions generate organic non-harmonic microtonal systems."<br>
                        <strong style="color: var(--color-ui-ochre);">Software translation:</strong> Coordinates grow geometrically as $ratio ** (i + bias)$ to physically retune oscillator scales in real time.
                      </div>
                    </div>

                    <!-- Entry 4 -->
                    <div class="bib-entry" onclick="expandBibNote(3)" style="margin-bottom: 0.5rem; border: 1px solid var(--color-cad-line); padding: 6px; border-radius: 2px; cursor: pointer; transition: all 0.3s; background: var(--bg-color);">
                      <div style="display: flex; justify-content: space-between; font-weight: bold; color: var(--color-ui-blue);">
                        <span>04 / THOMAS, NICK</span>
                        <span class="bib-arrow" id="bib-arrow-3" style="color: var(--color-cad-line-strong);">▶</span>
                      </div>
                      <div style="font-style: italic; margin-top: 1px; color: var(--text-color);">Science Between Space &amp; Counterspace</div>
                      <div id="bib-desc-3" style="margin-top: 4px; color: var(--text-color); opacity: 0.9; display: none; border-top: 1px dashed var(--color-cad-line); padding-top: 4px; line-height: 1.45; font-family: var(--font-ui); font-size: 12px; font-style: normal;">
                        "Counterspace represents a dual projective space centered on infinite planes."<br>
                        <strong style="color: var(--color-ui-ochre);">Software translation:</strong> Draggable coordinates represent nodes mapping the transition between local centers and the infinite horizon.
                      </div>
                    </div>

                    <!-- Entry 5 -->
                    <div class="bib-entry" onclick="expandBibNote(4)" style="margin-bottom: 0.5rem; border: 1px solid var(--color-cad-line); padding: 6px; border-radius: 2px; cursor: pointer; transition: all 0.3s; background: var(--bg-color);">
                      <div style="display: flex; justify-content: space-between; font-weight: bold; color: var(--color-ui-blue);">
                        <span>05 / LEHRS, ERNST</span>
                        <span class="bib-arrow" id="bib-arrow-4" style="color: var(--color-cad-line-strong);">▶</span>
                      </div>
                      <div style="font-style: italic; margin-top: 1px; color: var(--text-color);">Man or Matter (1951)</div>
                      <div id="bib-desc-4" style="margin-top: 4px; color: var(--text-color); opacity: 0.9; display: none; border-top: 1px dashed var(--color-cad-line); padding-top: 4px; line-height: 1.45; font-family: var(--font-ui); font-size: 12px; font-style: normal;">
                        "Suction fields and pressure limits represent expansion and contraction thresholds."<br>
                        <strong style="color: var(--color-ui-ochre);">Software translation:</strong> The Euclidean limit preset represents equal pressure space, while Vortex presets represent organic suction fields.
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Footer Tabs Navigation -->
          <div class="projective-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
            <button class="controller-btn-tech active" id="btn-projective-slide-hud" onclick="switchProjectiveSlide(0)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
              Overview
            </button>
            <button class="controller-btn-tech" id="btn-projective-slide-essay" onclick="switchProjectiveSlide(1)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
              Text
            </button>
            <button class="controller-btn-tech" id="btn-projective-slide-sandbox" onclick="switchProjectiveSlide(2)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
              Variables
            </button>
            <button class="controller-btn-tech" id="btn-projective-slide-refs" onclick="switchProjectiveSlide(3)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
              Research
            </button>
          </div>
        </div>
      </div>
    </section>
    
    <section class="section-box" id="sec-interfacers" data-keywords="generative portraits identity interface">
      <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
      <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>

      <div class="room-tags-wrapper font-tech">
        <span class="room-tags-label">touches //</span>
        <button class="room-tag-pill" onclick="filterExhibition('generative')">generative</button>
        <button class="room-tag-pill" onclick="filterExhibition('portraits')">portraits</button>
        <button class="room-tag-pill" onclick="filterExhibition('identity')">identity</button>
        <button class="room-tag-pill" onclick="filterExhibition('interface')">interface</button>
      </div>

      <span class="section-num">Generative Portraits</span>
      <h2 class="section-header">Interfacers</h2>
      <div class="project-meta-strip font-tech">
        <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-complete"><span class="status-dot"></span><span>Complete</span></span></span>
        <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2025</span></span>
      </div>

      <div class="blueprint-viewport-split" id="interfacers-sandbox" style="height: 580px;">

        <!-- Left Viewport: the live click-to-generate panel (procedural; shuffled round-robin under the hood) -->
        <div class="blueprint-left-stack" style="flex-direction: column; padding: 1.5rem; justify-content: center; align-items: center; gap: 1rem; overflow: hidden; background-color: var(--nested-card-bg);">
          <div style="position: relative; width: 100%; max-width: 440px; aspect-ratio: 1 / 1; border: 1px solid var(--color-cad-line); overflow: hidden; background: #111;">
            <div class="crop-mark-container crop-top-left" style="transform: scale(0.35); top: 6px; left: 6px;"></div>
            <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.35); bottom: 6px; right: 6px;"></div>
            <img loading="lazy" decoding="async" id="interfacers-face" src="assets/interfacers/face-00.png" alt="A generated interface portrait" style="width: 100%; height: 100%; object-fit: cover; display: block;" />
            <span class="font-tech" id="interfacers-counter" style="position: absolute; bottom: 6px; left: 6px; font-size: 9.5px; background: rgba(0,0,0,0.6); color: #fff; padding: 1px 5px; border-radius: 1px;">GEN // PROCEDURAL</span>
          </div>
          <button id="interfacers-generate" onclick="generateInterfacersFace()" class="font-tech" style="width: 100%; max-width: 440px; padding: 12px; font-size: 12px; font-weight: bold; border: 1px solid var(--color-ui-blue); color: var(--color-ui-blue); background: rgba(20,52,240,0.03); border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.3s;">
            ⟳ Generate Face
          </button>
        </div>

        <!-- Right Viewport: 3-slide deck -->
        <div class="blueprint-right-details interfacers-slide-card" id="interfacers-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid var(--color-cad-line); background-color: var(--nested-card-bg); border-radius: 4px; overflow: hidden; position: relative;">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>

          <div class="interfacers-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
            <div class="interfacers-slides-viewport" id="interfacers-slides-viewport" style="display: flex; width: 300%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">

              <!-- SLIDE 01: Overview -->
              <div class="interfacers-slide-pane active" id="pane-interfacers-overview" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                <div style="display: flex; flex-direction: column; height: 100%;">
                  <p class="overview-question" style="margin-bottom: 0.6rem;">What if every face is for entering?</p>
                  <div class="sonifold-essay-scroll-area" style="flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.6; opacity: 0.9;">
                    <p style="margin-bottom: 0.8rem;">Every portrait is assembled from the parts of an interface, and somewhere in the arrangement a face appears, eyes and a nose and a mouth, a presence looking back. It plays on a hallucination we are wired for, the same reflex that finds a face in a cloud or an outlet. The identity is half the components and half you.</p>
                    <p style="margin-bottom: 0.8rem;">It is also where a looser aesthetic for my work opens up, built on finding order inside randomness and on how readily we come to identify with something far from a face. A generative PFP for Interfacing, with endless variation, releasing likely in 2026.</p>
                  </div>
                </div>
              </div>

              <!-- SLIDE 02: Essay -->
              <div class="interfacers-slide-pane" id="pane-interfacers-essay" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                <div style="display: flex; flex-direction: column; height: 100%; align-items: center; justify-content: center; opacity: 0.3;">
                  <span class="font-tech" style="font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;">— coming later —</span>
                </div>
              </div>

              <!-- SLIDE 03: Styles -->
              <div class="interfacers-slide-pane" id="pane-interfacers-styles" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                <div>
                  <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">Bibliography &amp; Research</h4>
                </div>
                <div class="sonifold-essay-scroll-area" style="flex: 1; overflow-y: auto; padding-right: 0.5rem; margin: 0.5rem 0;">
                  <div class="research-list">
                    <details class="research-entry"><summary><span class="research-author">01 / TURKLE, SHERRY</span><span class="research-title">Life on the Screen (1995)</span></summary><div class="research-note">Identity becomes something we construct and perform through the interface. <strong>In the work:</strong> a face assembled entirely from interface parts.</div></details>
                    <details class="research-entry"><summary><span class="research-author">02 / HARAWAY, DONNA</span><span class="research-title">A Cyborg Manifesto (1985)</span></summary><div class="research-note">The line between human and machine dissolves; we are already hybrids. <strong>In the work:</strong> a presence that looks back out of pure interface.</div></details>
                    <details class="research-entry"><summary><span class="research-author">03 / MANOVICH, LEV</span><span class="research-title">The Language of New Media (2001)</span></summary><div class="research-note">The conventions of software become a cultural interface, our shared visual grammar. <strong>In the work:</strong> faces built from panels, nodes, scan lines, the things we look at all day.</div></details>
                  </div>
                </div>
              </div>

            </div>
          </div>

          <!-- Slide Controller Footer -->
          <div class="interfacers-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
            <button class="controller-btn-tech active" id="btn-interfacers-slide-overview" onclick="switchInterfacersSlide(0)" style="flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0.4rem 0.15rem;">Overview</button>
            <button class="controller-btn-tech" id="btn-interfacers-slide-essay" disabled title="Coming later" style="flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0.4rem 0.15rem; opacity: 0.3; cursor: not-allowed; pointer-events: none;">Text</button>
            <button class="controller-btn-tech" id="btn-interfacers-slide-styles" onclick="switchInterfacersSlide(2)" style="flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0.4rem 0.15rem;">Research</button>
          </div>
        </div>
      </div>
    </section>

    <section class="section-box" id="sec-weseeclearly" data-keywords="systems curation web-development">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>
          
          <div class="room-tags-wrapper font-tech">
            <span class="room-tags-label">touches //</span>
            <button class="room-tag-pill" onclick="filterExhibition('systems')">systems</button>
            <button class="room-tag-pill" onclick="filterExhibition('curation')">curation</button>
            <button class="room-tag-pill" onclick="filterExhibition('web-development')">web-development</button>
          </div>

          <span class="section-num">Surfacing</span>
          <h2 class="section-header">Studio Weseeclearly</h2>
          <div class="project-meta-strip font-tech">
            <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-deployed"><span class="status-dot"></span><span>Deployed</span></span></span>
            <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2026</span></span>
            <span class="meta-item"><span class="meta-label">LIVE //</span><a href="https://weseeclearly.com" target="_blank" class="meta-value" style="color: var(--color-ui-blue); text-decoration: none; font-weight: 700;">weseeclearly.com ↗</a></span>
          </div>
          

          <div class="blueprint-viewport-split" id="weseeclearly-sandbox" style="height: 580px;">
            <!-- Left Viewport: Walkthrough Video Viewport -->
            <div class="blueprint-left-stack" style="padding: 0; background-color: #08080f; flex-direction: column; overflow: hidden; position: relative; border-right: 1px solid var(--color-cad-line); height: 100%;">
              <!-- Walkthrough H.264 Video -->
              <video id="wsc-video-player" src="assets/walkthrough.mp4" loop muted autoplay playsinline preload="none" onclick="expandVideo(this)" style="width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9) contrast(1.1); display: block; cursor: zoom-in;"></video>
            </div>

            <!-- Right Viewport: Slide Deck -->
            <div class="blueprint-right-details weseeclearly-slide-card" id="weseeclearly-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: hidden; position: relative;">
              <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
              <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
              
              <!-- Slides Viewport Wrapper -->
              <div class="wsc-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
                <div class="wsc-slides-viewport" id="wsc-slides-viewport" style="display: flex; width: 300%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
                  
                  <!-- SLIDE 01: Overview -->
                  <div class="wsc-slide-pane active" id="pane-wsc-overview" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div class="overview-glance">
                      <p class="overview-question">Why do artists’ websites feel like dead storage?</p>
                      <p class="overview-what">I architected a new site for my paintings, synced to Notion and built as nested windows with no menu and no sequential order. Every painting is an axis you can move through; nothing is curated for you. It's nonlinear and exploratory, an archive you play through by dynamic association rather than fixed sequences or categories.</p>
                      <div class="curatorial-throughline" style="border-left: 2px solid var(--color-moss-green); padding-left: 10px; margin-top: 1rem; font-size: 12px; font-style: italic; opacity: 0.85;">
                        The structure itself is the manifesto.
                      </div>
                    </div>
                    
                    <div style="border-top: 1px dashed var(--color-cad-line); padding-top: 0.8rem; margin-top: 0.5rem;">
                      <a href="https://weseeclearly.com" target="_blank" class="control-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-technical); font-size: 12px; font-weight: 700; padding: 10px; text-decoration: none; border-color: var(--color-ui-blue); color: var(--color-ui-blue); background: rgba(20, 52, 240, 0.03); border-radius: 2px; text-transform: uppercase; transition: all 0.3s;">
                        <span>Visit Site Live ↗</span>
                      </a>
                    </div>
                  </div>

                  <!-- SLIDE 02: Essay -->
                  <div class="wsc-slide-pane" id="pane-wsc-essay" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box; overflow: hidden;">
                    <div style="display: flex; flex-direction: column; height: 100%;">
                      <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem;">
                        <span class="focused-reader-btn font-tech" onclick="openEssayFocusedReader('Room 01')" style="font-size: 11px; color: var(--color-ui-blue); cursor: pointer; border: 1px solid var(--color-cad-line); padding: 1px 4px; border-radius: 2px;">⛶ Focus Reader</span>
                      </div>
                      <div class="sonifold-essay-scroll-area" id="wsc-essay-scroll" style="flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.6; opacity: 0.9;">
                        <p style="margin-bottom: 0.8rem;">
                          I rebuilt the site for my paintings, which go back to 2007, from the ground up.
                        </p>
                        <p style="margin-bottom: 0.8rem;">
                          The site is synced to my Notion database, so it stays current without my touching it, and the interface is built as nested windows. There is no sequence and no time order. Every painting carries its own coordinates, its date and palette and price and whether it is available, and each of those is a way in. You move through the work by association, through whatever pulls you.
                        </p>
                        <p style="margin-bottom: 0.8rem; border-left: 2px solid var(--color-ui-red); padding-left: 0.75rem; font-style: italic; color: var(--text-color);">
                          The structure itself carries the meaning. A nonlinear site can still be coherent, and it keeps the work in motion.
                        </p>
                      </div>
                    </div>
                  </div>

                  <!-- SLIDE 03: Specs -->
                  <div class="wsc-slide-pane" id="pane-wsc-specs" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                        Bibliography &amp; Research
                      </h4>

                      <div class="research-list">
                        <details class="research-entry"><summary><span class="research-author">01 / WU, TIM</span><span class="research-title">The Attention Merchants (2016)</span></summary><div class="research-note">The modern web runs on harvesting attention and reselling it. <strong>In the work:</strong> this site is built as a counter-friction network, a place to navigate mindfully rather than scroll.</div></details>
                        <details class="research-entry"><summary><span class="research-author">02 / WEISER, M. &amp; BROWN, J. S.</span><span class="research-title">The Coming Age of Calm Technology (1996)</span></summary><div class="research-note">Technology can sit at the edge of attention and move to the center only when needed. <strong>In the work:</strong> a rigid coordinate structure so the presence within it can breathe.</div></details>
                        <details class="research-entry"><summary><span class="research-author">03 / ALEXANDER, CHRISTOPHER</span><span class="research-title">A Pattern Language (1977)</span></summary><div class="research-note">Space gains life from a coherent structure of relationships, not from decoration. <strong>In the work:</strong> the catalog is a directory tree of rooms; the structure is the argument.</div></details>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
              
              <!-- Footer Tabs Navigation -->
              <div class="wsc-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
                <button class="controller-btn-tech active" id="btn-wsc-slide-overview" onclick="switchWscSlide(0)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Overview
                </button>
                <button class="controller-btn-tech" id="btn-wsc-slide-essay" onclick="switchWscSlide(1)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Text
                </button>
                <button class="controller-btn-tech" id="btn-wsc-slide-specs" onclick="switchWscSlide(2)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Research
                </button>
              </div>
            </div>
          </div>
        </section>




    <!-- Floating Wayfinder Table of Contents (Wayfinding Table of Contents Node Deck) -->
    <section class="section-box" id="sec-interfacing" data-keywords="systems curation framework web-development">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>
          
          <div class="room-tags-wrapper font-tech">
            <span class="room-tags-label">touches //</span>
            <button class="room-tag-pill" onclick="filterExhibition('systems')">systems</button>
            <button class="room-tag-pill" onclick="filterExhibition('curation')">curation</button>
            <button class="room-tag-pill" onclick="filterExhibition('framework')">framework</button>
            <button class="room-tag-pill" onclick="filterExhibition('web-development')">web-development</button>
          </div>

          <span class="section-num">Threshold</span>
          <h2 class="section-header">Interfacing</h2>
          <div class="project-meta-strip font-tech">
            <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-launched"><span class="status-dot"></span><span>Launched</span></span></span>
            <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2026 (Ongoing)</span></span>
            <span class="meta-item"><span class="meta-label">LIVE //</span><a href="https://interfac.ing" target="_blank" class="meta-value" style="color: var(--color-ui-blue); text-decoration: none; font-weight: 700;">interfac.ing ↗</a></span>
          </div>
          

          <div class="blueprint-viewport-split" id="interfacing-sandbox" style="height: 580px;">
            <!-- Left Panel: The Active 3D Stack -->
            <div class="blueprint-left-stack" id="blueprint-sandbox">
              <div class="three-d-scene">
                <div class="three-d-stack focus-tool" id="interactive-stack">
                  
                  <!-- Somatic OS (Green) Card -->
                  <div class="three-d-card card-4" onclick="setFocusedLayer(4, 'focus-somatic')">
                    <span class="font-tech" style="font-size: 10.5px; font-weight: 600; color: var(--color-moss-green);">04 // SELF OS</span>
                    <span class="font-edit" style="font-size: 13px;">Somatic Grounding</span>
                    <span class="font-tech" style="font-size: 9.5px; opacity: 0.85;">60_BPM // 5.5s_BREATH</span>
                  </div>

                  <!-- Artifact (Magenta) Card -->
                  <div class="three-d-card card-3" onclick="setFocusedLayer(3, 'focus-artifact')">
                    <span class="font-tech" style="font-size: 10.5px; font-weight: 600; color: #ff007f;">03 // ARTIFACT (TO TAKE)</span>
                    <span class="font-edit" style="font-size: 13px;">To Take</span>
                    <span class="font-tech" style="font-size: 9.5px; opacity: 0.75;">PHYSICAL_OBJECT // BOUTIQUE</span>
                  </div>

                  <!-- Essay (Cyan) Card -->
                  <div class="three-d-card card-2" onclick="setFocusedLayer(2, 'focus-essay')">
                    <span class="font-tech" style="font-size: 10.5px; font-weight: 600; color: #00d2ff;">02 // ESSAY (TO TURN)</span>
                    <span class="font-edit" style="font-size: 13px;">To Turn</span>
                    <span class="font-tech" style="font-size: 9.5px; opacity: 0.75;">NEWSLETTER // PHILOSOPHY</span>
                  </div>

                  <!-- Tool (Yellow) Card -->
                  <div class="three-d-card card-1" onclick="setFocusedLayer(1, 'focus-tool')">
                    <span class="font-tech" style="font-size: 10.5px; font-weight: 600; color: #ffd700;">01 // TOOL (THE TOUCH)</span>
                    <span class="font-edit" style="font-size: 13px;">The Touch</span>
                    <span class="font-tech" style="font-size: 9.5px; opacity: 0.75;">UTILITY_APP // GENERATIVE</span>
                  </div>
                  
                </div>
              </div>
              
            </div>

            <!-- Right Viewport: Slide Deck -->
            <div class="blueprint-right-details interfacing-slide-card" id="interfacing-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: hidden; position: relative;">
              <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
              <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
              
              <!-- Slides Viewport Wrapper -->
              <div class="interfacing-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
                <div class="interfacing-slides-viewport" id="interfacing-slides-viewport" style="display: flex; width: 300%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
                  
                  <!-- SLIDE 01: Overview -->
                  <div class="interfacing-slide-pane active" id="pane-interfacing-overview" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div class="overview-glance">
                      <p class="overview-question">What is hidden underneath a brand?</p>
                      <p class="overview-what">Interfacing is a tripolar architecture for releasing work. Most brands collapse toward the same entropy, which shows up as creeping humanitarian abuse, opacity, or a loss of quality hidden under a consistent surface. I am re-architecting what a brand can be as a tensegrity, where nothing rests on one visual style and every part stays in balance and relation, so the integrity runs all the way through.</p>
                      <div class="curatorial-throughline" style="border-left: 2px solid var(--color-moss-green); padding-left: 10px; margin-top: 1rem; font-size: 12px; font-style: italic; opacity: 0.85;">
                        “From brand to release” is the first drop from Interfacing, and my current main focus.
                      </div>
                    </div>

                  </div>

                  <!-- SLIDE 02: Essay -->
                  <div class="interfacing-slide-pane" id="pane-interfacing-essay" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box; overflow: hidden;">
                    <div style="display: flex; flex-direction: column; height: 100%;">
                      <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem;">
                        <span class="focused-reader-btn font-tech" onclick="openEssayFocusedReader('Room 04')" style="font-size: 11px; color: var(--color-ui-blue); cursor: pointer; border: 1px solid var(--color-cad-line); padding: 1px 4px; border-radius: 2px;">⛶ Focus Reader</span>
                      </div>
                      <div class="sonifold-essay-scroll-area" id="interfacing-essay-scroll" style="flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.6; opacity: 0.9;">
                        <p style="margin-bottom: 0.8rem;">Interfacing is an unusual word. As a verb it is the act of two systems meeting, a threshold in motion. As a thing it is the support sewn invisibly inside a garment, the layer that holds the shape of what is on the surface without ever taking the attention. I chose it as a name because it already carries its own polarity, the meeting and the quiet support held in one word.</p>
                        <p style="margin-bottom: 0.8rem;">For a long time a handful of companies built the interfaces and the rest of us lived inside them, taking whatever shape we were handed. That is changing. We can build our own now, on top of our own data, and the interface itself becomes something you make.</p>
                        <p style="margin-bottom: 0.8rem;">I didn't set out to make a brand. I wanted to move away from the assumption that you have to build one at all. This is Interfacing: work that puts something in motion and asks real questions about what forms us and where we differ, without ever telling you who to be. Why a brand, and not a release?</p>
                        <p style="margin-bottom: 0.8rem;">Everything under Interfacing arrives as three things at once: an essay, a tool, and an artifact, holding each other up like a tensegrity. The structure inverts what you expect from a brand. There is no central store, no homepage that everything points back to. Interfacing rides as a footer on every release, and each release gets its own domain and its own design.</p>
                        <p style="margin-bottom: 0.8rem;">Interfacing is my main project, and most of my work from here will be released under it.</p>
                      </div>
                    </div>
                  </div>

                  <!-- SLIDE 03: Specs -->
                  <div class="interfacing-slide-pane" id="pane-interfacing-specs" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                        Bibliography &amp; Research
                      </h4>

                      <div class="research-list">
                        <details class="research-entry"><summary><span class="research-author">01 / HOOKWAY, BRANDEN</span><span class="research-title">Interface (2014)</span></summary><div class="research-note">The interface is a threshold and a relation, the zone where two systems meet and act on each other. <strong>In the work:</strong> Interfacing treats the interface as the thing you make, not the thing handed to you.</div></details>
                        <details class="research-entry"><summary><span class="research-author">02 / FULLER, R. BUCKMINSTER</span><span class="research-title">Synergetics — Tensegrity (1975)</span></summary><div class="research-note">Tensegrity holds its shape through distributed tension, with no single member carrying the load alone. <strong>In the work:</strong> essay, tool, and artifact hold each other up; remove one and the release loses its structure.</div></details>
                        <details class="research-entry"><summary><span class="research-author">03 / SIMONDON, GILBERT</span><span class="research-title">On the Mode of Existence of Technical Objects (1958)</span></summary><div class="research-note">Technical objects individuate and evolve; they carry a way of being, not only a function. <strong>In the work:</strong> a release puts something in motion and asks a question instead of handing you an identity to wear.</div></details>
                      </div>
                  </div>

                </div>
              </div>
              </div>

              <!-- Footer Tabs Navigation -->
              <div class="interfacing-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
                <button class="controller-btn-tech active" id="btn-interfacing-slide-overview" onclick="switchInterfacingSlide(0)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Overview
                </button>
                <button class="controller-btn-tech" id="btn-interfacing-slide-essay" onclick="switchInterfacingSlide(1)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Text
                </button>
                <button class="controller-btn-tech" id="btn-interfacing-slide-specs" onclick="switchInterfacingSlide(2)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Research
                </button>
              </div>
          </div>
          </div>

          <!-- Tactics Trigger at the bottom to expand/collapse directory -->
          <div style="margin-top: 2rem; border-top: 1px dashed var(--color-cad-line); padding-top: 1.5rem; display: flex; justify-content: center; z-index: 10; position: relative;">
            <button class="folder-toggle-btn font-tech" id="btn-toggle-interfacing" onclick="toggleInterfacingFolder()" style="width: 100%; max-width: 500px; padding: 12px; font-size: 12px; font-weight: bold; border: 1px solid var(--color-ui-blue); color: var(--color-ui-blue); background: rgba(20,52,240,0.03); border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.3s; box-shadow: 0 4px 12px rgba(20,52,240,0.05);">
              [ + EXPAND COMPONENTS ]
            </button>
          </div>
        </section>

        <!-- Interfacing Children Folder Container -->
        <div id="interfacing-folder-children" class="folder-children-container">

        <!-- SUB-ROOM 04.1: THE UNIFIED INDEX (3D ENIGMA STACK) -->

        <!-- SUB-ROOM 04.2: 3D LOGO PERSPECTIVE SIMULATOR (DIMENSIONAL COLLAPSE) -->
        <section class="section-box nested-component interfacing-child" id="sec-logo-simulator" data-parent="sec-interfacing" data-keywords="geometry dimensional-collapse component perspective">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>
          
          <div class="room-tags-wrapper font-tech">
            <span class="room-tags-label">touches //</span>
            <button class="room-tag-pill" onclick="filterExhibition('geometry')">geometry</button>
            <button class="room-tag-pill" onclick="filterExhibition('dimensional-collapse')">dimensional-collapse</button>
            <button class="room-tag-pill" onclick="filterExhibition('component')">component</button>
            <button class="room-tag-pill" onclick="filterExhibition('perspective')">perspective</button>
          </div>

          <span class="section-num">├── Sub-Room 04.2 / Perspective Reveal</span>
          <h2 class="section-header">Logo Development</h2>
          <div class="project-meta-strip font-tech">
            <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-deployed"><span class="status-dot"></span><span>Deployed</span></span></span>
            <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2026</span></span>
          </div>
          
          <p class="lead-text" style="font-size: 14.5px; margin-bottom: 3rem; display: none;">
            Collapsing down dimensions creates intersections that do not exist in reality.
          </p>

          <div class="blueprint-viewport-split" id="logo-simulator-sandbox" style="height: 560px;">
            
            <!-- Left Viewport: The Slanted Ellipses Rig -->
            <div class="blueprint-left-stack" style="position: relative; overflow: visible; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem;">
              <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
              <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>

              <div class="logo-viewport-3d">
                
                <!-- Shared Vector Filters -->
                <svg style="position: absolute; width: 0; height: 0;">
                  <defs>
                    <radialGradient id="circle-radial-grad" cx="50%" cy="50%" r="50%">
                      <stop offset="0%" stop-color="var(--bg-color)" stop-opacity="0" />
                      <stop offset="65%" stop-color="var(--text-color)" stop-opacity="0.08" />
                      <stop offset="100%" stop-color="var(--text-color)" stop-opacity="0.22" />
                    </radialGradient>
                    <filter id="stipple-filter" x="-20%" y="-20%" width="140%" height="140%">
                      <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" result="noise" />
                      <feDisplacementMap in="SourceGraphic" in2="noise" scale="1.2" xChannelSelector="R" yChannelSelector="G" result="displaced" />
                      <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.4 -0.3" in="noise" result="alphaNoise" />
                      <feComposite operator="in" in="displaced" in2="alphaNoise" />
                    </filter>
                  </defs>
                </svg>

                <!-- Rotating 3D Rig -->
                <div class="logo-rig-3d" id="logo-rig">
                  
                  <!-- 3D Axes System -->
                  <div id="logo-3d-grid-axes" style="position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; pointer-events: none; opacity: 1; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
                    <div style="position: absolute; width: 220px; height: 220px; border: 1px dashed var(--color-cad-line); background-image: linear-gradient(var(--color-cad-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-cad-line) 1px, transparent 1px); background-size: 22px 22px; background-position: center center; transform: rotateX(90deg); opacity: 0.18; transform-style: preserve-3d;"></div>
                    <div style="position: absolute; width: 93px; height: 93px; border: 1.2px dashed var(--color-ui-blue); border-radius: 50%; transform: rotateX(90deg); opacity: 0.28; transform-style: preserve-3d;"></div>

                    <!-- Local X-Axis Line -->
                    <div style="position: absolute; width: 240px; height: 1.2px; background: #ff4a5a; opacity: 0.55; transform-style: preserve-3d;">
                      <div class="font-tech" style="position: absolute; right: -16px; top: -5px; font-size: 11px; color: #ff4a5a; font-weight: 700;">+X</div>
                      <div class="font-tech" style="position: absolute; left: -16px; top: -5px; font-size: 11px; color: #ff4a5a; font-weight: 700;">-X</div>
                    </div>

                    <!-- Local Y-Axis Line -->
                    <div style="position: absolute; width: 1.2px; height: 240px; background: #10b981; opacity: 0.55; transform-style: preserve-3d;">
                      <div class="font-tech" style="position: absolute; top: -16px; left: -4px; font-size: 11px; color: #10b981; font-weight: 700;">+Y</div>
                      <div class="font-tech" style="position: absolute; bottom: -16px; left: -4px; font-size: 11px; color: #10b981; font-weight: 700;">-Y</div>
                    </div>

                    <!-- Local Z-Axis Line -->
                    <div style="position: absolute; width: 240px; height: 1.2px; background: #00d2ff; opacity: 0.55; transform: rotateY(90deg); transform-style: preserve-3d;">
                      <div class="font-tech" style="position: absolute; right: -16px; top: -5px; font-size: 11px; color: #00d2ff; font-weight: 700; transform: rotateY(-90deg);">+Z</div>
                      <div class="font-tech" style="position: absolute; left: -16px; top: -5px; font-size: 11px; color: #00d2ff; font-weight: 700; transform: rotateY(-90deg);">-Z</div>
                    </div>
                  </div>
                  
                  <!-- Ellipse Circle A -->
                  <div class="logo-circle circle-a">
                    <svg width="72" height="116" viewBox="0 0 72 116" fill="none" style="overflow: visible;">
                      <ellipse cx="36" cy="58" rx="34" ry="56" stroke="var(--text-color)" stroke-width="1.8" fill="url(#circle-radial-grad)" filter="url(#stipple-filter)" />
                    </svg>
                  </div>
                  
                  <!-- Ellipse Circle B -->
                  <div class="logo-circle circle-b">
                    <svg width="72" height="116" viewBox="0 0 72 116" fill="none" style="overflow: visible;">
                      <ellipse cx="36" cy="58" rx="34" ry="56" stroke="var(--text-color)" stroke-width="1.8" fill="url(#circle-radial-grad)" filter="url(#stipple-filter)" />
                    </svg>
                  </div>

                  <!-- Connecting Z-Depth indicator line -->
                  <div class="logo-rig-depth-line" id="logo-depth-line" style="transform: rotateY(-59deg);"></div>
                </div>

                <div class="logo-horizontal-axis"></div>
              </div>

              <!-- Live Coordinate HUD -->
              <div style="position: absolute; bottom: 15px; left: 15px; font-family: var(--font-technical); font-size: 11px; opacity: 0.75; font-weight: 600; line-height: 1.6;">
                [LOGO_RIG_TELEMETRY]<br>
                CAMERA_Y_ROT: <span id="telemetry-logo-rot" style="color: var(--color-ui-blue); font-weight: 600;">180°</span><br>
                Z_SEPARATION: <span style="color: var(--color-ui-blue); font-weight: 600;">80px [STATIC]</span><br>
                PROJ_OVERLAP: <span id="telemetry-logo-overlap" style="color: var(--color-ui-blue); font-weight: 600;">33% [MAX]</span>
              </div>
              
              <div style="position: absolute; top: 15px; right: 15px; font-family: var(--font-technical); font-size: 11px; opacity: 0.75;">
                PROJ_STATUS: <span id="telemetry-logo-status" style="color: var(--color-ui-blue); font-weight: 600;">INTERPENETRATION_ILLUSION</span>
              </div>
            </div>

            <!-- Right Panel: Rig Slide Deck -->
            <div class="blueprint-right-details logo-slide-card" id="logo-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid var(--color-cad-line); background-color: var(--nested-card-bg); border-radius: 4px; overflow: hidden; position: relative;">
              <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
              <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
              
              <!-- Active Slides Viewport Wrapper -->
              <div class="logo-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
                <div class="logo-slides-viewport" id="logo-slides-viewport" style="display: flex; width: 300%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
                  
                  <!-- SLIDE 01: Overview / Calibration -->
                  <div class="logo-slide-pane active" id="pane-logo-overview" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">Depending on Perspective</h4>
                      <p class="overview-what">Depending on your perspective: a Venn diagram, an intersection of two circles, or a rotation around two circles that never actually meet. That dependence on perspective, and the fluidity of interpretation it opens, runs through every part of Interfacing.</p>
                    </div>

                    <div style="display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.5rem;">
                      <!-- Slider -->
                      <div>
                        <div style="display: flex; justify-content: space-between; margin-bottom: 0.2rem;">
                          <span class="font-tech" style="font-size: 11px; font-weight: 600;">SIMULATION ANGLE (ROT_Y)</span>
                          <span class="font-tech" id="logo-slider-val" style="font-size: 11px; color: var(--color-ui-blue); font-weight: 600;">180°</span>
                        </div>
                        <input type="range" id="logo-rot-slider" min="90" max="270" value="180" style="width: 100%; cursor: pointer;" />
                      </div>

                      <!-- Presets -->
                      <div>
                        <span class="font-tech" style="font-size: 11px; font-weight: 600; display: block; margin-bottom: 0.2rem;">CHOOSE VIEWPORT ASPECT</span>
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem;">
                          <button class="control-btn active" id="logo-btn-front" style="padding: 0.4rem; font-size: 11.5px; margin-bottom: 0 !important; text-align: center; justify-content: center;">
                            2D Overlap (Venn)
                          </button>
                          <button class="control-btn" id="logo-btn-side" style="padding: 0.4rem; font-size: 11.5px; margin-bottom: 0 !important; text-align: center; justify-content: center;">
                            3D Reality Reveal
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- SLIDE 02: Scrollable Essay -->
                  <div class="logo-slide-pane" id="pane-logo-essay" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <!-- Scrollable Essay Text Area -->
                    <div class="sonifold-essay-scroll-area" id="logo-essay-scroll" style="flex: 1; overflow-y: auto; padding-right: 0.5rem; margin: 0.5rem 0 0.5rem 0;">
                      <p class="font-ui" style="font-size: 12.5px; line-height: 1.55; opacity: 0.9; margin-top: 0; margin-bottom: 0.6rem;">
                        What happens when we collapse dimensions? From a fixed, flat perspective, two circles moving in three-dimensional space appear to slide across one another, creating an intersection—a Venn diagram of overlapping zones. We read this overlap as connection, or even friction.
                      </p>
                      <p class="font-ui" style="font-size: 12.5px; line-height: 1.55; opacity: 0.9; margin-bottom: 0.6rem; border-left: 2px solid var(--color-ui-blue); padding-left: 0.5rem; font-style: italic;">
                        "Circles maintain their integrity and independence; they never interpenetrate. Collapsing down from dimensions creates intersections that do not exist."
                      </p>
                      <p class="font-ui" style="font-size: 12.5px; line-height: 1.55; opacity: 0.9; margin-bottom: 0;">
                        But if we orbit the camera and slide the perspective to the side, the depth coordinate is revealed. The circles never touched. They occupy completely separate vertical coordinates along the Z-axis, rotating statically in their own planes. The intersection was a flat illusion, an artifact of dimensional collapse. This serves as a physical metaphor for modern digital echo-chambers: we collapse multi-dimensional richness into flat, binary profiles, constructing artificial conflicts that only exist because of the flat angle from which we look.
                      </p>
                    </div>
                  </div>

                  <!-- SLIDE 03: Switches / Specs -->
                  <div class="logo-slide-pane" id="pane-logo-specs" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                        Simulation Switches
                      </h4>
                    </div>

                    <div style="display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.5rem;">
                      <!-- Guidelines toggle -->
                      <div style="display: flex; align-items: center; justify-content: space-between;">
                        <span class="font-tech" style="font-size: 11px; font-weight: 600;">SHOW 3D DEPTH GUIDELINES</span>
                        <label class="switch">
                          <input type="checkbox" id="logo-depth-toggle">
                          <span class="switch-slider"></span>
                        </label>
                      </div>

                      <!-- Grid toggle -->
                      <div style="display: flex; align-items: center; justify-content: space-between;">
                        <span class="font-tech" style="font-size: 11px; font-weight: 600;">SHOW 3D GRID &amp; AXES</span>
                        <label class="switch">
                          <input type="checkbox" id="logo-grid-toggle" checked>
                          <span class="switch-slider"></span>
                        </label>
                      </div>

                      <!-- Orbit toggle -->
                      <div style="display: flex; align-items: center; justify-content: space-between;">
                        <span class="font-tech" style="font-size: 11px; font-weight: 600;">AUTO CAMERA ORBIT</span>
                        <label class="switch">
                          <input type="checkbox" id="logo-orbit-toggle" checked>
                          <span class="switch-slider"></span>
                        </label>
                      </div>
                    </div>

                    <p class="font-ui" style="font-size: 12px; opacity: 0.6; line-height: 1.45; border-top: 1px dashed var(--color-cad-line); padding-top: 0.5rem; margin: 0;">
                      Engine: Three-dimensional homogenous skew coordinates. Calculates dynamic trigonometric projection coefficients.
                    </p>
                  </div>

                </div>
              </div>

              <!-- Slide Controller Footer -->
              <div class="logo-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
                <button class="controller-btn-tech active" id="btn-logo-slide-overview" onclick="switchLogoSlide(0)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Overview
                </button>
                <button class="controller-btn-tech" id="btn-logo-slide-essay" onclick="switchLogoSlide(1)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Text
                </button>
                <button class="controller-btn-tech" id="btn-logo-slide-specs" onclick="switchLogoSlide(2)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Controls
                </button>
              </div>
            </div>
          </div>
        </section>

        <!-- SUB-ROOM 04.3: STAMP REGISTRY & LO SHU CIPHER SIMULATOR -->
        <section class="section-box nested-component interfacing-child" id="sec-stamp-registry" data-parent="sec-interfacing" data-keywords="cipher grid magic-square editioning">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>
          
          <div class="room-tags-wrapper font-tech">
            <span class="room-tags-label">touches //</span>
            <button class="room-tag-pill" onclick="filterExhibition('cipher')">cipher</button>
            <button class="room-tag-pill" onclick="filterExhibition('grid')">grid</button>
            <button class="room-tag-pill" onclick="filterExhibition('magic-square')">magic-square</button>
            <button class="room-tag-pill" onclick="filterExhibition('editioning')">editioning</button>
          </div>

          <span class="section-num">└── Sub-Room 04.3 / Edition Cipher</span>
          <h2 class="section-header">Everything is Unique</h2>
          <div class="project-meta-strip font-tech">
            <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-deployed"><span class="status-dot"></span><span>Deployed</span></span></span>
            <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2026</span></span>
          </div>
          
          <p class="lead-text" style="font-size: 14.5px; margin-bottom: 3rem;">
            A deterministic digital stamp signature generator. Using ancient **Lo Shu mathematical grids**, edition numbers are spiral-filled and shifted based on unique seed multipliers, creating a distinct, unrepeatable visual watermark for physical items.
          </p>

          <div class="stamp-projection-split">
            
            <!-- Left Viewport: Exploded 3D Stamp Stack -->
            <div class="stamp-3d-scene" id="stamp-sandbox">
              <div class="stamp-3d-stack-rig" id="stamp-stack">
                
                <!-- Stamp Layer 2: Red Series (Slid out on trigger) -->
                <div class="stamp-3d-layer" id="stamp-l2">
                  <div class="stamp-cell" id="l2-cell-0-0">0</div>
                  <div class="stamp-cell" id="l2-cell-0-1">0</div>
                  <div class="stamp-cell" id="l2-cell-0-2">0</div>
                  <div class="stamp-cell" id="l2-cell-1-0">0</div>
                  <div class="stamp-cell" id="l2-cell-1-1">0</div>
                  <div class="stamp-cell" id="l2-cell-1-2">0</div>
                  <div class="stamp-cell" id="l2-cell-2-0">0</div>
                  <div class="stamp-cell" id="l2-cell-2-1">0</div>
                  <div class="stamp-cell" id="l2-cell-2-2">0</div>
                </div>

                <!-- Stamp Layer 1: Black Anchor -->
                <div class="stamp-3d-layer" id="stamp-l1">
                  <div class="stamp-cell" id="l1-cell-0-0">0</div>
                  <div class="stamp-cell" id="l1-cell-0-1">0</div>
                  <div class="stamp-cell" id="l1-cell-0-2">0</div>
                  <div class="stamp-cell" id="l1-cell-1-0">0</div>
                  <div class="stamp-cell" id="l1-cell-1-1">0</div>
                  <div class="stamp-cell" id="l1-cell-1-2">0</div>
                  <div class="stamp-cell" id="l1-cell-2-0">0</div>
                  <div class="stamp-cell" id="l1-cell-2-1">0</div>
                  <div class="stamp-cell" id="l1-cell-2-2">0</div>
                </div>
                
              </div>

              <div style="position: absolute; bottom: 12px; left: 15px; font-family: var(--font-technical); font-size: 11px; opacity: 0.45; letter-spacing: 0.1em; pointer-events: none;">
                [EXPLODED_STAMP_PROJECTION]
              </div>
            </div>

            <!-- Right Viewport: Controls -->
            <div class="blueprint-right-details stamp-slide-card" id="stamp-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid var(--color-cad-line); background-color: var(--nested-card-bg); border-radius: 4px; overflow: hidden; position: relative;">
              <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
              <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
              
              <!-- Active Slides Viewport Wrapper -->
              <div class="stamp-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
                <div class="stamp-slides-viewport" id="stamp-slides-viewport" style="display: flex; width: 300%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
                  
                  <!-- SLIDE 01: Overview / Calibration -->
                  <div class="stamp-slide-pane active" id="pane-stamp-overview" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">One Registry</h4>
                      <p class="overview-what">Every Interfacing drop is one of one. Each is translated into a magic square, a unique identifier inside a single registry that holds the whole Interfacing universe. It is a non-linear cipher, where meaning comes from your relationship to the grid rather than a place in any sequence.</p>
                    </div>

                    <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 0.5rem;">
                      <!-- Edition Slider -->
                      <div>
                        <div style="display: flex; justify-content: space-between; margin-bottom: 0.2rem;">
                          <span class="font-tech" style="font-size: 11.5px; font-weight: 600;">EDITION NUMBER</span>
                          <span class="font-tech" id="stamp-slider-val" style="font-size: 11.5px; color: var(--color-ui-red); font-weight: 600;">Nº 001</span>
                        </div>
                        <input type="range" id="stamp-val-slider" min="1" max="150" value="1" style="width: 100%; cursor: pointer;" />
                      </div>

                      <!-- Red Series Trigger -->
                      <button class="control-btn" id="stamp-btn-red" style="font-size: 12px; font-weight: 600; padding: 0.75rem; text-transform: uppercase; margin-bottom: 0 !important;">
                        Trigger Layer 2 Red Series Spin-Out
                      </button>
                    </div>
                  </div>

                  <!-- SLIDE 02: Scrollable Essay -->
                  <div class="stamp-slide-pane" id="pane-stamp-essay" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                        Lo Shu Magic Squares
                      </h4>
                    </div>

                    <div class="sonifold-essay-scroll-area" id="stamp-essay-scroll" style="flex: 1; overflow-y: auto; padding-right: 0.5rem; margin: 0.5rem 0 0.5rem 0;">
                      <p class="font-ui" style="font-size: 12.5px; line-height: 1.55; opacity: 0.9; margin-top: 0; margin-bottom: 0.6rem;">
                        The ancient Lo Shu magic square represents one of the earliest examples of deterministic harmony. Every row, column, and diagonal sums to fifteen—establishing a weightless lattice of numerical equilibrium. When we map this ancient lattice to digital editions, we create a spatial signature that is unrepeatable yet completely deterministic.
                      </p>
                      <p class="font-ui" style="font-size: 12.5px; line-height: 1.55; opacity: 0.9; margin-bottom: 0.6rem; border-left: 2px solid var(--color-ui-red); padding-left: 0.5rem; font-style: italic;">
                        "Watermarks are not arbitrary database indices; they are topological transformations of sequence numbers directly onto physical coordinate space."
                      </p>
                      <p class="font-ui" style="font-size: 12.5px; line-height: 1.55; opacity: 0.9; margin-bottom: 0;">
                        By printing these mathematical ciphers onto physical works, we link digital authenticity directly to sequence without relying on heavy external databases. It is a spatial correspondence, a circular return where math serves as a beautiful protective seal.
                      </p>
                    </div>
                  </div>

                  <!-- SLIDE 03: Switches / Specs -->
                  <div class="stamp-slide-pane" id="pane-stamp-specs" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                        Technical Specifications
                      </h4>
                    </div>

                    <div style="display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.5rem;">
                      <div style="display: flex; align-items: center; justify-content: space-between;">
                        <span class="font-tech" style="font-size: 11px; font-weight: 600;">DETERMINISTIC CIPHER STEPS:</span>
                        <span class="font-tech" style="font-size: 11px; color: var(--color-ui-red); font-weight: 600;">[7] VERIFIED</span>
                      </div>
                      <div style="display: flex; align-items: center; justify-content: space-between;">
                        <span class="font-tech" style="font-size: 11px; font-weight: 600;">GRID INTEGRITY (SUM = 15):</span>
                        <span class="font-tech" style="font-size: 11px; color: var(--color-ui-red); font-weight: 600;">ACTIVE</span>
                      </div>
                      <div style="display: flex; align-items: center; justify-content: space-between;">
                        <span class="font-tech" style="font-size: 11px; font-weight: 600;">3D VIEWPORT PROJECTION:</span>
                        <span class="font-tech" style="font-size: 11px; color: var(--color-ui-red); font-weight: 600;">60 FPS</span>
                      </div>
                    </div>

                    <p class="font-ui" style="font-size: 12px; opacity: 0.6; line-height: 1.45; border-top: 1px dashed var(--color-cad-line); padding-top: 0.5rem; margin: 0;">
                      Engine: Ancient magic square matrix offset with linear shift multipliers. Formulates an unrepeatable digital-physical watermark signature.
                    </p>
                  </div>

                </div>
              </div>

              <!-- HUD Stamp Stats (folded nicely into layout bottom) -->
              <div style="border-top: 1px solid var(--color-cad-line); padding-top: 0.5rem; margin-top: 0.5rem; font-family: var(--font-technical); font-size: 10.5px; opacity: 0.75; line-height: 1.6; display: flex; justify-content: space-between;">
                <div>ID: <span id="telemetry-stamp-seq" style="color: var(--color-ui-red); font-weight: 600;">Nº 001</span></div>
                <div>MODE: <span id="telemetry-stamp-mode" style="color: var(--color-ui-blue); font-weight: 600;">SINGLE_ADDITION</span></div>
                <div>KEY: <span id="telemetry-stamp-key" style="color: var(--color-ui-blue); font-weight: 600;">[7] DET</span></div>
                <div>STATUS: <span id="telemetry-stamp-status" style="color: var(--color-ui-blue); font-weight: 600;">ANCHOR_ACTIVE</span></div>
              </div>

              <!-- Slide Controller Footer -->
              <div class="stamp-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.5rem; margin-top: 0.5rem; z-index: 10;">
                <button class="controller-btn-tech active" id="btn-stamp-slide-overview" onclick="switchStampSlide(0)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Overview
                </button>
                <button class="controller-btn-tech" id="btn-stamp-slide-essay" onclick="switchStampSlide(1)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Text
                </button>
                <button class="controller-btn-tech" id="btn-stamp-slide-specs" onclick="switchStampSlide(2)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Variables
                </button>
              </div>
            </div>
          </div>
        </section>

        <section class="section-box nested-component interfacing-child last-child" id="sec-stillness" data-parent="sec-interfacing" data-keywords="biometrics presence somatic interaction">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>
          
          <div class="room-tags-wrapper font-tech">
            <span class="room-tags-label">touches //</span>
            <button class="room-tag-pill" onclick="filterExhibition('biometrics')">biometrics</button>
            <button class="room-tag-pill" onclick="filterExhibition('presence')">presence</button>
            <button class="room-tag-pill" onclick="filterExhibition('somatic')">somatic</button>
            <button class="room-tag-pill" onclick="filterExhibition('interaction')">interaction</button>
          </div>

          <span class="section-num">Room 05 / Somatic Resonance</span>
          <h2 class="section-header">Polar Shadow</h2>
          <div class="project-meta-strip font-tech">
            <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-complete"><span class="status-dot"></span><span>Complete</span></span></span>
            <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2025</span></span>
          </div>
          
          <p class="lead-text" style="font-size: 14.5px; margin-bottom: 3rem;">
            A key V2 philosophy that connects the visitor's bodily presence to the site's digital current. Instead of encouraging endless mouse movement and cognitive depletion, the catalog incentives **contemplative stillness**. 
            As you pause your cursor, the organic breathing glow blooms behind typography and lines, causing coordinates and letters to light up with spectral chromatic refraction.
          </p>

          <!-- Split Viewport Sandbox -->
          <div class="blueprint-viewport-split" id="stillness-sandbox" style="height: 580px;">
            
            <!-- Left Viewport: Interactive Browser Mockup -->
            <div class="blueprint-left-stack" style="padding: 1.5rem; justify-content: center; align-items: center; overflow: hidden; background-color: var(--nested-card-bg);">
              <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
              <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
              
              <!-- Interactive Browser Mockup -->
              <div style="border: 1px solid var(--color-cad-line); background: var(--card-bg); border-radius: 6px; overflow: hidden; box-shadow: 0 10px 30px var(--color-ink-shadow); position: relative; width: 100%; height: 100%; display: flex; flex-direction: column;">
                
                <!-- Browser Address Bar -->
                <div style="height: 30px; border-bottom: 1px solid var(--color-cad-line); background: var(--nested-card-bg); display: flex; align-items: center; padding: 0 0.8rem; gap: 0.4rem; transition: var(--theme-transition); flex-shrink: 0;">
                  <div style="display: flex; gap: 4px;">
                    <div style="width: 7px; height: 7px; border-radius: 50%; background: var(--color-cad-line-strong);"></div>
                    <div style="width: 7px; height: 7px; border-radius: 50%; background: var(--color-cad-line-strong);"></div>
                    <div style="width: 7px; height: 7px; border-radius: 50%; background: var(--color-cad-line-strong);"></div>
                  </div>
                  <div class="font-tech" style="font-size: 11px; opacity: 0.6; flex-grow: 1; text-align: center; letter-spacing: 0.05em; line-height: 30px;">
                    hold.sonifold.interfac.ing (V2 Mirror)
                  </div>
                </div>

                <!-- Viewport grid canvas -->
                <div style="position: relative; flex: 1; background-color: var(--bg-color); background-image: radial-gradient(var(--grid-dot-color) 1px, transparent 1px); background-size: 20px 20px; transition: var(--theme-transition); display: flex; align-items: center; justify-content: center; overflow: hidden;">
                  <div style="position: absolute; width: 85%; height: 75%; border: 1.2px dashed var(--color-cad-line-faint); pointer-events: none;"></div>
                  
                  <!-- Dashed Polar Diagonal -->
                  <svg style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; overflow: visible;">
                    <line x1="120" y1="120" x2="85%" y2="78%" stroke="var(--color-cad-line-strong)" stroke-width="1.2" stroke-dasharray="3 5" opacity="0.45" />
                    <circle cx="120" cy="120" r="3" fill="var(--color-ui-red)" opacity="0.5" />
                    <circle cx="85%" cy="78%" r="3" fill="var(--color-ui-blue)" opacity="0.5" />
                  </svg>

                  <style>
                    @keyframes mockup-scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
                    @keyframes mockup-scroll-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
                    @keyframes mockup-glyph-orbit { from { transform: perspective(120px) rotateY(0deg); } to { transform: perspective(120px) rotateY(360deg); } }
                  </style>

                  <!-- Polar Shadow HUD (Top-Left Corner) - Blurred/Glitched -->
                  <div style="position: absolute; top: 10px; left: 30px; z-index: 10; pointer-events: none; transform: scale(1.1) scaleX(-1.1) skewX(6deg) skewY(2deg); opacity: 0.45; filter: blur(0.35px);">
                    <div style="padding: 0.5rem 0.6rem; color: var(--text-color); width: 120px;">
                      <div style="display: flex; align-items: center; gap: 1.2rem; margin-bottom: 0.5rem; opacity: 0.82;">
                        <span style="font-family: serif; font-size: 15px; opacity: 0.35;">◬</span>
                        <span style="font-family: serif; font-size: 15px; opacity: 0.35;">◎</span>
                        <span style="font-family: serif; font-size: 15px; font-weight: bold; opacity: 0.85; animation: mockup-glyph-orbit 3s linear infinite; display: inline-block;">⊞</span>
                      </div>
                      <div style="width: 100px; color: var(--text-color); opacity: 0.82;">
                        <div style="overflow: hidden; white-space: nowrap; font-family: var(--font-interface); font-style: italic; font-size: 10.5px; letter-spacing: 0.08em; line-height: 1.6;">
                          <div style="display: inline-flex; animation: mockup-scroll-left 12s linear infinite;">
                            <span style="display: inline-flex; align-items: center; gap: 0.4em;">FROM SYNTAX TO SIGNAL<span style="opacity: 0.35;">·</span></span>
                            <span style="display: inline-flex; align-items: center; gap: 0.4em;">FROM SYNTAX TO SIGNAL<span style="opacity: 0.35;">·</span></span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- Primary Active HUD (Bottom-Right Corner) - Crisp/Clean -->
                  <div style="position: absolute; bottom: 20px; right: 40px; z-index: 20; transform: scale(1.15); transform-origin: bottom right;">
                    <div style="padding: 0.5rem 0.6rem; color: var(--text-color); width: 120px;">
                      <div style="display: flex; align-items: center; gap: 1.2rem; margin-bottom: 0.5rem;">
                        <span style="font-family: serif; font-size: 15px; opacity: 0.35;">◬</span>
                        <span style="font-family: serif; font-size: 15px; opacity: 0.35;">◎</span>
                        <span style="font-family: serif; font-size: 15px; font-weight: bold; opacity: 1; text-shadow: 0 0 10px rgba(180, 180, 220, 0.8); animation: mockup-glyph-orbit 3s linear infinite; display: inline-block;">⊞</span>
                      </div>
                      <div style="width: 100px; color: var(--text-color); opacity: 0.7;">
                        <div style="overflow: hidden; white-space: nowrap; font-family: var(--font-interface); font-style: italic; font-size: 10.5px; letter-spacing: 0.08em; line-height: 1.6;">
                          <div style="display: inline-flex; animation: mockup-scroll-left 12s linear infinite;">
                            <span style="display: inline-flex; align-items: center; gap: 0.4em;">FROM SYNTAX TO SIGNAL<span style="opacity: 0.35;">·</span></span>
                            <span style="display: inline-flex; align-items: center; gap: 0.4em;">FROM SYNTAX TO SIGNAL<span style="opacity: 0.35;">·</span></span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- HUD wayfinding indicators -->
                  <div style="position: absolute; bottom: 8px; right: 8px; font-family: var(--font-technical); font-size: 11px; opacity: 0.8; font-weight: bold; background: var(--card-bg); padding: 2px 6px; border: 1px solid var(--color-cad-line); border-radius: 2px; z-index: 30; transition: var(--theme-transition);">
                    PRIMARY_HUD_ANCHOR
                  </div>
                  <div style="position: absolute; top: 8px; left: 8px; font-family: var(--font-technical); font-size: 11px; opacity: 0.8; font-weight: bold; background: var(--card-bg); padding: 2px 6px; border: 1px solid var(--color-cad-line); border-radius: 2px; z-index: 30; transition: var(--theme-transition);">
                    POLAR_SHADOW_HUD (WAYFINDING MIRROR)
                  </div>
                </div>
              </div>
            </div>

            <!-- Right Panel: Stillness Slide Deck -->
            <div class="blueprint-right-details stillness-slide-card" id="stillness-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid var(--color-cad-line); background-color: var(--nested-card-bg); border-radius: 4px; overflow: hidden; position: relative;">
              <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
              <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
              
              <!-- Active Slides Viewport Wrapper -->
              <div class="stillness-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
                <div class="stillness-slides-viewport" id="stillness-slides-viewport" style="display: flex; width: 300%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
                  
                  <!-- SLIDE 01: Overview -->
                  <div class="stillness-slide-pane active" id="pane-stillness-overview" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">A Polar Form</h4>
                      <p class="overview-what">A polar form and an inversion: more of the philosophy behind Interfacing, set into its design. Interfacing travels as a footer on every release rather than a header or a homepage, so components like this one carry the meaning, each a quiet signal that everything belongs to the same universe.</p>
                    </div>

                  </div>

                  <!-- SLIDE 02: Essay -->
                  <div class="stillness-slide-pane" id="pane-stillness-essay" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                        The Polar Shadow of Attention
                      </h4>
                    </div>
                    
                    <!-- Scrollable Essay Text Area -->
                    <div class="sonifold-essay-scroll-area" id="stillness-essay-scroll" style="flex: 1; overflow-y: auto; padding-right: 0.5rem; margin: 0.5rem 0 0.5rem 0;">
                      <p class="font-ui" style="font-size: 12.5px; line-height: 1.55; opacity: 0.9; margin-top: 0; margin-bottom: 0.6rem;">
                        Extractive networks treat your attention as an active ore to be mined. They incentivize endless clicks, rapid scrolls, and constant mouse displacement. The browser becomes a somatic stress chamber.
                      </p>
                      <p class="font-ui" style="font-size: 12.5px; line-height: 1.55; opacity: 0.9; margin-bottom: 0.6rem; border-left: 2px solid var(--color-ui-red); padding-left: 0.5rem; font-style: italic;">
                        "Somatic Stillness is the polar shadow of that extraction: it is attention reclaimed through absolute physical quietude."
                      </p>
                      <p class="font-ui" style="font-size: 12.5px; line-height: 1.55; opacity: 0.9; margin-bottom: 0;">
                        When you halt all physical cursor movements, the interface signals a change of state. It ceases to update coordinate grids with mechanical vectors and instead yields to a slow, breathing biological light loop. By standing still, you become conscious of the interface as a mirroring envelope—a synchronous space where presence is defined by your capacity to rest.
                      </p>
                    </div>
                  </div>

                  <!-- SLIDE 03: Specs -->
                  <div class="stillness-slide-pane" id="pane-stillness-specs" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                        Sensor Variables
                      </h4>
                    </div>

                    <div class="telemetry-terminal-box" style="min-height: 180px; margin-bottom: 0.5rem;">
                      <div class="terminal-bar">
                        <span class="terminal-dot" style="background-color: var(--color-ui-red);"></span>
                        <span class="terminal-title font-tech">Sensor HUD</span>
                        <span class="terminal-status font-tech">Sys_Idle</span>
                      </div>
                      <div class="terminal-body" style="gap: 0.25rem;">
                        <div class="terminal-row">
                          <span class="term-label">Cursor Idle Trigger:</span>
                          <span class="term-value" style="color: var(--color-ui-red);">1.20 Seconds</span>
                        </div>
                        <div class="terminal-row">
                          <span class="term-label">Spectral Gradient:</span>
                          <span class="term-value">Dual Complementary Ghost Pairs</span>
                        </div>
                        <div class="terminal-row">
                          <span class="term-label">Interaction Level:</span>
                          <span class="term-value">Continuous Mousemove Intercepts</span>
                        </div>
                        <div class="terminal-row">
                          <span class="term-label">CSS Variables Bind:</span>
                          <span class="term-value" style="font-size: 11px;">--stillness-x // --ghost-color</span>
                        </div>
                      </div>
                    </div>

                    <p class="font-ui" style="font-size: 12px; opacity: 0.6; line-height: 1.45; margin: 0;">
                      Philosophy: Reclaiming agency from extractive networks by mapping stable biological resting rhythms to programmatic CSS apertures.
                    </p>
                  </div>

                </div>
              </div>

              <!-- Slide Controller Footer -->
              <div class="stillness-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
                <button class="controller-btn-tech active" id="btn-stillness-slide-overview" onclick="switchStillnessSlide(0)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Overview
                </button>
                <button class="controller-btn-tech" id="btn-stillness-slide-essay" onclick="switchStillnessSlide(1)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Text
                </button>
                <button class="controller-btn-tech" id="btn-stillness-slide-specs" onclick="switchStillnessSlide(2)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                  Variables
                </button>
              </div>
            </div>
          </div>
        </section>

        </div> <!-- End interfacing-folder-children -->

        <section class="section-box" id="sec-sonifold" data-keywords="sound linguistics topology interaction">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>
          
          <div class="room-tags-wrapper font-tech">
            <span class="room-tags-label">touches //</span>
            <button class="room-tag-pill" onclick="filterExhibition('sound')">sound</button>
            <button class="room-tag-pill" onclick="filterExhibition('linguistics')">linguistics</button>
            <button class="room-tag-pill" onclick="filterExhibition('topology')">topology</button>
            <button class="room-tag-pill" onclick="filterExhibition('interaction')">interaction</button>
          </div>

          <span class="section-num">Mirror</span>
          <h2 class="section-header">Sonifold</h2>
          <div class="project-meta-strip font-tech">
            <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-launched"><span class="status-dot"></span><span>Launched</span></span></span>
            <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2025 - 2026</span></span>
            <span class="meta-item"><span class="meta-label">LIVE //</span><a href="https://sonifold.interfac.ing" target="_blank" class="meta-value" style="color: var(--color-ui-blue); text-decoration: none; font-weight: 700;">sonifold.interfac.ing ↗</a></span>
          </div>
          

          <!-- Split Viewport Sandbox -->
          <div class="blueprint-viewport-split" id="sonifold-sandbox" style="height: 580px;">
            
            <!-- Left Viewport: The Morphing SVG Canvas -->
            <div class="blueprint-left-stack" style="flex-direction: column; padding: 1.5rem; justify-content: space-between; overflow: hidden; background-color: var(--nested-card-bg);">
              <div class="sonifold-canvas-wrapper" style="width: 100%; height: calc(100% - 70px); position: relative; border: 1px solid var(--color-cad-line); background: var(--bg-color); transition: var(--theme-transition);">
                <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
                <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
                <svg id="sonifold-canvas" viewBox="0 0 800 540" width="100%" height="100%" style="display: block;"></svg>
              </div>

              <!-- Morph Slider Controls -->
              <div class="sonifold-slider-container" style="width: 100%; padding-top: 1rem; border-top: 1px dashed var(--color-cad-line);">
                <div style="display: flex; justify-content: space-between; margin-bottom: 0.3rem;">
                  <span class="font-tech" style="font-size: 11.5px; font-weight: 600; color: var(--color-ui-blue);">SPEECH MORPH SLIDER</span>
                  <span class="font-tech" id="sonifold-slider-val" style="font-size: 11.5px; color: var(--color-ui-blue); font-weight: 700;">0% Spoken Words</span>
                </div>
                <input type="range" id="sonifold-morph-slider" min="0" max="100" value="0" class="gallery-slider" style="width: 100%; cursor: pointer;" />
              </div>
            </div>            <!-- Right Viewport: Curatorial Details & Technical Telemetry HUD (Multi-Slide Deck Viewport) -->
            <div class="blueprint-right-details sonifold-slide-card" id="sonifold-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid var(--color-cad-line); background-color: var(--nested-card-bg); border-radius: 4px; overflow: hidden; position: relative;">
              <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
              <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
              
              <!-- Active Slides Viewport Wrapper -->
              <div class="sonifold-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
                <div class="sonifold-slides-viewport" id="sonifold-slides-viewport" style="display: flex; width: 400%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
                  
                  <!-- SLIDE 01: Overview / Technical Telemetry HUD -->
                  <div class="sonifold-slide-pane active" id="pane-sonifold-overview" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <p class="overview-question">What does your voice know that you don't?</p>
                      <p class="overview-what">Upload a voice note and it maps how you said it — your timing, your pauses, and the words you kept returning to — as a shape you can see.</p>

                    <!-- Live Technical Telemetry HUD — kept for JS bindings, hidden from view (off-voice for first-time visitors) -->
                    <div class="telemetry-terminal-box" style="min-height: 160px; margin-bottom: 0.5rem; display: none;">
                      <div class="terminal-bar">
                        <span class="terminal-dot" style="background-color: var(--color-ui-blue);"></span>
                        <span class="terminal-title font-tech">Voice Analysis</span>
                        <span class="terminal-status font-tech" id="telemetry-sonifold-status">Stable</span>
                      </div>
                      <div class="terminal-body" style="gap: 0.3rem;">
                        <div class="terminal-row">
                          <span class="term-label">Speech Rhythm:</span>
                          <span class="term-value" id="telemetry-sonifold-cadence" style="color: var(--color-ui-blue);">Linear Paragraph</span>
                        </div>
                        <div class="terminal-row">
                          <span class="term-label">Morph Progress:</span>
                          <span class="term-value" id="telemetry-sonifold-morph">0.00</span>
                        </div>
                        <div class="terminal-row">
                          <span class="term-label">Transcription:</span>
                          <span class="term-value" id="telemetry-sonifold-transcription" style="font-size: 12px; line-height: 1.35; white-space: normal; display: block; max-width: 100%;">--</span>
                        </div>
                        <div class="terminal-row">
                          <span class="term-label">Vocal Uncertainty:</span>
                          <span class="term-value" id="telemetry-sonifold-jitter">0% (0.0px)</span>
                        </div>
                        <div class="terminal-row">
                          <span class="term-label">Repeated Words:</span>
                          <span class="term-value" id="telemetry-sonifold-gestalt">0 ACTIVE</span>
                        </div>
                        <div class="terminal-row" style="margin-top: 0.4rem; border-top: 1px dashed var(--color-cad-line); padding-top: 0.4rem;">
                          <span class="term-label" style="color: var(--color-ui-red);">Emphasized Words:</span>
                          <span class="term-value" id="telemetry-sonifold-alerts" style="font-size: 12px; color: var(--color-ui-red);">None Active</span>
                        </div>
                      </div>
                    </div>
                  </div>

                    <!-- External Links Container -->
                    <div style="border-top: 1px dashed var(--color-cad-line); padding-top: 0.8rem; margin-top: 0.5rem; display: flex; gap: 8px; z-index: 10;">
                      <div style="flex: 1;">
                        <a href="https://sonifold.interfac.ing" target="_blank" class="control-btn" style="display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-technical); font-size: 11px; font-weight: 700; padding: 8px; text-decoration: none; border-color: var(--color-ui-blue); color: var(--color-ui-blue); background: rgba(20, 52, 240, 0.03); border-radius: 2px; text-transform: uppercase; transition: all 0.3s;">
                          <span>Generator ↗</span>
                        </a>
                      </div>
                      <div style="flex: 1;">
                        <a href="https://hold.sonifold.interfac.ing" target="_blank" class="control-btn" style="display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-technical); font-size: 11px; font-weight: 700; padding: 8px; text-decoration: none; border-color: var(--color-ui-blue); color: var(--color-ui-blue); background: rgba(20, 52, 240, 0.03); border-radius: 2px; text-transform: uppercase; transition: all 0.3s;">
                          <span>Gallery ↗</span>
                        </a>
                      </div>
                    </div>
                  </div>

                  <!-- SLIDE 02: Scrollable Essay Content -->
                  <div class="sonifold-slide-pane" id="pane-sonifold-essay" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <!-- Scrollable Essay Text Area -->
                    <div class="sonifold-essay-scroll-area" id="sonifold-essay-scroll" style="flex: 1; overflow-y: auto; padding-right: 0.5rem; margin: 0.5rem 0 0.5rem 0;">
                      <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin-top: 0; margin-bottom: 0.75rem;">
                        What shapes does a spoken voice take? You upload a voice note—a message to a friend, a paragraph read aloud, something said while driving. This tool transcribes it, then uses the timestamp on every word to place it in space. Pause becomes distance, speed becomes density, and every cluster of silence is a coordinate. Each word lands precisely where it does because of <em>when</em> it arrived. The result is a 2D map, a spatial typography of speech. A sonifold.
                      </p>
                      <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin-bottom: 0.75rem; border-left: 2px solid var(--color-ui-blue); padding-left: 0.5rem; font-style: italic;">
                        "A transcript preserves what you said. The sonifold preserves how."
                      </p>
                      <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin-bottom: 0.75rem;">
                        Shape carries what the words don't: where you circled back, where you accelerated, which phrases your speech kept returning to. Repeated words connect across the canvas as colored threads, and immediately you can see the loops. A topology of a voice, where the map <em>is</em> the meaning.
                      </p>
                      <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin-bottom: 0.75rem;">
                        Adjustable parameters let you influence what emerges. Tune the sensitivity to silence and the pauses open like rooms. Rushed passages compress into constellations. The architecture comes from the voice; the image comes from the conversation between the voice and the choices you make. Which is why there's always an interactive component to every Interfacing release, one that produces artifacts you can take with you.
                      </p>
                      <p class="font-ui" style="font-size: 13px; line-height: 1.6; opacity: 0.9; margin-bottom: 0;">
                        The voice you upload doesn't have to be yours. The tool reads rhythm, density, silence, speed, indifferent to your reason for choosing. What arrives is the geometry of how someone moves through language, stripped of meaning, rendered as form.
                      </p>
                    </div>
                  </div>

                  <!-- SLIDE 03: Visual Gallery -->
                  <div class="sonifold-slide-pane" id="pane-sonifold-gallery" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                        Vocal Topologies
                      </h4>
                      <p class="font-ui" style="font-size: 13.5px; opacity: 0.85; line-height: 1.5; margin-bottom: 1rem;">
                        Navigate to the Sonifold Generator and Gallery to view more, and to generate your own. The links are on the Overview tab.
                      </p>
                    </div>
                    
                    <!-- 2x2 Gallery Grid -->
                    <div class="painting-gallery-grid" style="flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px; margin-bottom: 0.5rem; min-height: 250px;">
                      <!-- Cell 1 -->
                      <div class="gallery-item-frame" style="border: 1px solid var(--color-cad-line); background: var(--bg-color); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer;" onclick="openLightbox(this.querySelector('img').src)">
                        <div class="crop-mark-container crop-top-left" style="transform: scale(0.2); top: 4px; left: 4px;"></div>
                        <img src="https://udzn1bjgwzlrqd8d.public.blob.vercel-storage.com/posters/clear-birch-coda-1775500831260-preview.jpg" alt="Sonifold — Clear Birch Coda" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;" />
                        <span class="font-tech" style="position: absolute; bottom: 4px; left: 4px; font-size: 9.5px; background: rgba(0,0,0,0.6); color: #fff; padding: 1px 3px; border-radius: 1px;">CLEAR BIRCH CODA</span>
                      </div>
                      
                      <!-- Cell 2 -->
                      <div class="gallery-item-frame" style="border: 1px solid var(--color-cad-line); background: var(--bg-color); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer;" onclick="openLightbox(this.querySelector('img').src)">
                        <div class="crop-mark-container crop-top-left" style="transform: scale(0.2); top: 4px; left: 4px;"></div>
                        <img src="https://udzn1bjgwzlrqd8d.public.blob.vercel-storage.com/posters/crisp-quartz-pivot-1774773214629-preview.jpg" alt="Sonifold — Crisp Quartz Pivot" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;" />
                        <span class="font-tech" style="position: absolute; bottom: 4px; left: 4px; font-size: 9.5px; background: rgba(0,0,0,0.6); color: #fff; padding: 1px 3px; border-radius: 1px;">CRISP QUARTZ PIVOT</span>
                      </div>
                      
                      <!-- Cell 3 -->
                      <div class="gallery-item-frame" style="border: 1px solid var(--color-cad-line); background: var(--bg-color); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer;" onclick="openLightbox(this.querySelector('img').src)">
                        <div class="crop-mark-container crop-top-left" style="transform: scale(0.2); top: 4px; left: 4px;"></div>
                        <img src="https://udzn1bjgwzlrqd8d.public.blob.vercel-storage.com/posters/dim-granite-eleven-1773474850214-preview.jpg" alt="Sonifold — Dim Granite Eleven" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;" />
                        <span class="font-tech" style="position: absolute; bottom: 4px; left: 4px; font-size: 9.5px; background: rgba(0,0,0,0.6); color: #fff; padding: 1px 3px; border-radius: 1px;">DIM GRANITE ELEVEN</span>
                      </div>

                      <!-- Cell 4 -->
                      <div class="gallery-item-frame" style="border: 1px solid var(--color-cad-line); background: var(--bg-color); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer;" onclick="openLightbox(this.querySelector('img').src)">
                        <div class="crop-mark-container crop-top-left" style="transform: scale(0.2); top: 4px; left: 4px;"></div>
                        <img src="https://udzn1bjgwzlrqd8d.public.blob.vercel-storage.com/posters/sonifold-10-mar-2026-09-06-1773133620342-preview.jpg" alt="Sonifold — 10 Mar 2026" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;" />
                        <span class="font-tech" style="position: absolute; bottom: 4px; left: 4px; font-size: 9.5px; background: rgba(0,0,0,0.6); color: #fff; padding: 1px 3px; border-radius: 1px;">10 MAR 2026</span>
                      </div>
                    </div>
                  </div>

                  <!-- SLIDE 04: Research Citations -->
                  <div class="sonifold-slide-pane" id="pane-sonifold-research" style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                    <div>
                      <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                        Bibliography &amp; Research
                      </h4>
                    </div>

                    <div class="sonifold-essay-scroll-area" style="flex: 1; overflow-y: auto; padding-right: 0.5rem; margin: 0.5rem 0;">
                      <div class="research-list">
                        <details class="research-entry"><summary><span class="research-author">01 / DOLAR, MLADEN</span><span class="research-title">A Voice and Nothing More (2006)</span></summary><div class="research-note">"The voice is the instrument, the vehicle, the medium, and the meaning is the goal; voice appears as materiality opposed to the ideality of meaning." <strong>In the work:</strong> the sonifold renders only the materiality, the timing and rhythm and trajectory of sound, setting meaning aside to show the structure underneath.</div></details>
                        <details class="research-entry"><summary><span class="research-author">02 / LABELLE, BRANDON</span><span class="research-title">Acoustic Territories (2010)</span></summary><div class="research-note">"Sound violates the border, and in that sense it may show us how to live as a border, a threshold, always in touch." <strong>In the work:</strong> the map makes that threshold visible, turning continuous acoustic waves into a discrete spatial topography.</div></details>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

              <!-- Slide Controller Footer (Sleek Blueprint Navigation Tabs) -->
              <div class="sonifold-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
                <button class="controller-btn-tech active" id="btn-sonifold-slide-overview" onclick="switchSonifoldSlide(0)" style="flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0.4rem 0.15rem;">
                  Overview
                </button>
                <button class="controller-btn-tech" id="btn-sonifold-slide-essay" onclick="switchSonifoldSlide(1)" style="flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0.4rem 0.15rem;">
                  Text
                </button>
                <button class="controller-btn-tech" id="btn-sonifold-slide-gallery" onclick="switchSonifoldSlide(2)" style="flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0.4rem 0.15rem;">
                  Gallery
                </button>
                <button class="controller-btn-tech" id="btn-sonifold-slide-research" onclick="switchSonifoldSlide(3)" style="flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0.4rem 0.15rem;">
                  Research
                </button>
              </div>      </div>

          </div>
        </section>

        <section class="section-box" id="sec-botany" data-keywords="astronomy keplerian-orbits botany morphology">
      <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
      <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>
      
      <div class="room-tags-wrapper font-tech">
        <span class="room-tags-label">touches //</span>
        <button class="room-tag-pill" onclick="filterExhibition('astronomy')">astronomy</button>
        <button class="room-tag-pill" onclick="filterExhibition('keplerian-orbits')">keplerian-orbits</button>
        <button class="room-tag-pill" onclick="filterExhibition('botany')">botany</button>
        <button class="room-tag-pill" onclick="filterExhibition('morphology')">morphology</button>
      </div>

      <span class="section-num">Room 09 / Cosmic Botany</span>
      <h2 class="section-header">Cosmic Botany</h2>
      <div class="project-meta-strip font-tech">
        <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-complete"><span class="status-dot"></span><span>Complete</span></span></span>
        <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2024</span></span>
      </div>

      <div class="blueprint-viewport-split" id="botany-viewport" style="height: 580px;">
        <!-- Left Viewport: Live Keplerian Rosette Morph Simulator -->
        <div class="blueprint-left-stack" style="padding: 0; background-color: var(--nested-card-bg); flex-direction: column; overflow: hidden; position: relative; border-right: 1px solid var(--color-cad-line); height: 100%;">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
          
          <div class="botany-canvas-container">
            <canvas id="botany-sim-canvas" class="interactive-sim-canvas"></canvas>
          </div>

          <!-- range control overlay -->
          <div style="position: absolute; bottom: 15px; left: 15px; right: 15px; font-family: var(--font-technical); font-size: 11px; z-index: 10; display: flex; flex-direction: column; gap: 6px; background: var(--card-bg); border: 1px solid var(--color-cad-line); padding: 10px 15px; border-radius: 2px; transition: var(--theme-transition);">
            <div style="display: flex; justify-content: space-between;">
              <span style="color: var(--color-ui-blue); font-weight: bold;">MORPHOLOGY SHIFT</span>
              <span id="botany-morph-val" style="color: var(--color-ui-red); font-weight: bold;">0% Planet Orbits</span>
            </div>
            <input type="range" id="botany-morph-slider" min="0" max="100" value="0" class="gallery-slider" style="width: 100%; cursor: pointer;" />
          </div>

          <div style="position: absolute; top: 12px; left: 15px; font-family: var(--font-technical); font-size: 11px; opacity: 0.55; letter-spacing: 0.1em; pointer-events: none;">
            Figure 09.1 / Keplerian Leaf &amp; Bud Rosette Simulator
          </div>
        </div>

        <!-- Right Viewport: Slide Deck -->
        <div class="blueprint-right-details botany-slide-card" id="botany-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: hidden; position: relative;">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
          
          <!-- Slides Viewport Wrapper -->
          <div class="botany-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
            <div class="botany-slides-viewport" id="botany-slides-viewport" style="display: flex; width: 300%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
              
              <!-- SLIDE 01: Curatorial Overview -->
              <div class="botany-slide-pane active" id="pane-botany-overview" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                <div class="overview-glance">
                  <p class="overview-question">Can a computer lead us back to nature?</p>
                  <p class="overview-what">An orbital simulator that maps the orbits of Earth and Venus onto the geometry of leaves and buds. It follows real research from the Steiner-school tradition, where bud forms were found to fit geometric path-curves that shift in rhythm with planetary cycles.</p>
                  <div class="curatorial-throughline" style="border-left: 2px solid var(--color-moss-green); padding-left: 10px; margin-top: 1rem; font-size: 12px; font-style: italic; opacity: 0.85;">
                    Going so far around the digital circle that we return to cosmic correspondence.
                  </div>
                </div>
              </div>

              <!-- SLIDE 02: Scrollable Essay Content -->
              <div class="botany-slide-pane" id="pane-botany-essay" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box; overflow: hidden;">
                <div style="display: flex; flex-direction: column; height: 100%;">
                  <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem;">
                    <span class="focused-reader-btn font-tech" onclick="openEssayFocusedReader('Room 09')" style="font-size: 11px; color: var(--color-ui-blue); cursor: pointer; border: 1px solid var(--color-cad-line); padding: 1px 4px; border-radius: 2px;">⛶ Focus Reader</span>
                  </div>
                  <div class="sonifold-essay-scroll-area" id="botany-essay-scroll" style="flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.6; opacity: 0.9;">
                    <p style="margin-bottom: 0.8rem;">
                      We have obstructed our connection with natural cycles. Extractive structures—monolithic concrete buildings, asphalt pavements, and ubiquitous Wi-Fi signals—act as a sensory shield, isolating us from the primary rhythms of the earth and sky. Many point to this severance as our civilizational downfall.
                    </p>
                    <p style="margin-bottom: 0.8rem;">
                      Yet the digital represents an unexpected portal back. Because nature is not constructed of straight lines, its geometries are dynamic, curved, and relational. By pushing calculations to their outer limits, the mathematical visualizer returns us to the circle, allowing us to find form correspondences (homonyms) across cosmic and biological scales.
                    </p>
                    <p style="margin-bottom: 0.8rem; border-left: 2px solid var(--color-ui-red); padding-left: 0.75rem; font-style: italic; color: var(--text-color);">
                      "The computer becomes a glass pane reflecting the macrocosmic order. The same mathematics that maps Venus's synodic year traces the contour of a budding leaf."
                    </p>
                    <p style="margin-bottom: 0.8rem;">
                      In this active research, the planetary orbits are mapped directly to microtonal chord ratios. Sliding the morphology control transitions the orbital vector lines into organic botanical profiles—revealing that the structural template of plant growth is a perfect spatial projection of celestial orbits. The computer is not a barrier to the cosmic; it is the loom upon which its threads are woven together.
                    </p>
                  </div>
                </div>
              </div>

              <!-- SLIDE 03: Technical Specifications Spec Sheet -->
              <div class="botany-slide-pane" id="pane-botany-specs" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                <div>
                  <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                    Bibliography &amp; Research
                  </h4>

                  <div class="research-list">
                    <details class="research-entry"><summary><span class="research-author">01 / EDWARDS, LAWRENCE</span><span class="research-title">The Vortex of Life (1993)</span></summary><div class="research-note">Measured tens of thousands of leaf buds and found their profiles fit projective path-curves that shift in rhythm with lunar and planetary cycles. <strong>In the work:</strong> the orbits are mapped onto the geometry of the buds.</div></details>
                    <details class="research-entry"><summary><span class="research-author">02 / ADAMS, G. &amp; WHICHER, O.</span><span class="research-title">The Plant Between Sun and Earth (1982)</span></summary><div class="research-note">Develops the projective geometry of plant form held between the poles of sun and earth. <strong>In the work:</strong> the rosette sits between a celestial pole and an earthly one.</div></details>
                    <details class="research-entry"><summary><span class="research-author">03 / EDWARDS, LAWRENCE</span><span class="research-title">Projective Geometry (1985)</span></summary><div class="research-note">The path-curve transformations used to model leaf and bud profiles. <strong>In the work:</strong> the geometry that actually draws the bud.</div></details>
                  </div>
                </div>
                
                <div style="font-family: var(--font-technical); font-size: 11px; opacity: 0.5; line-height: 1.45;">
                  Planetary-biological homonym morphogenesis explorer.<br>
                  Status: Active Research Project.
                </div>
              </div>

            </div>
          </div>
          
          <!-- Footer Tabs Navigation -->
          <div class="botany-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
            <button class="controller-btn-tech active" id="btn-botany-slide-overview" onclick="switchBotanySlide(0)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
              Overview
            </button>
            <button class="controller-btn-tech" id="btn-botany-slide-essay" onclick="switchBotanySlide(1)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
              Text
            </button>
            <button class="controller-btn-tech" id="btn-botany-slide-specs" onclick="switchBotanySlide(2)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
              Research
            </button>
          </div>
        </div>
      </div>
    </section>

    <section class="section-box" id="sec-cloud" data-keywords="volumetrics particle-system portal co-presence">
      <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
      <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>
      
      <div class="room-tags-wrapper font-tech">
        <span class="room-tags-label">touches //</span>
        <button class="room-tag-pill" onclick="filterExhibition('volumetrics')">volumetrics</button>
        <button class="room-tag-pill" onclick="filterExhibition('particle-system')">particle-system</button>
        <button class="room-tag-pill" onclick="filterExhibition('portal')">portal</button>
        <button class="room-tag-pill" onclick="filterExhibition('co-presence')">co-presence</button>
      </div>

      <span class="section-num">Room 08 / Cloud Embassy Website</span>
      <h2 class="section-header">Cloud Embassy Website</h2>
      <div class="project-meta-strip font-tech">
        <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-launched"><span class="status-dot"></span><span>Launched</span></span></span>
        <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2025</span></span>
      </div>
      
      <p class="lead-text" style="font-size: 14.5px; margin-bottom: 3rem;">
        An container concept and architected space functioning as the neutral zone in a three-pole framework. In this mirror-world interface, real-world tasks and administrative metrics register as subtractions—clearing a dense, misty atmosphere toward geometric stillness.
      </p>

      <div class="blueprint-viewport-split" id="cloud-parent-sandbox" style="height: 580px;">
        <!-- Left Viewport: Directory Console visual -->
        <div class="blueprint-left-stack" style="padding: 2.5rem 2rem; background-color: #08080f; flex-direction: column; overflow: hidden; position: relative; border-right: 1px solid var(--color-cad-line); height: 100%; justify-content: flex-start;">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
          
          <span class="font-tech" style="color: var(--color-ui-blue); font-size: 12px; margin-bottom: 1.5rem; font-weight: 700; letter-spacing: 0.05em;">DIRECTORY_TREE // CLOUD_CORE</span>
          
          <div class="folder-terminal font-tech" style="color: #00ffcc; font-size: 13px; line-height: 1.7; flex: 1; border: 1px solid rgba(255,255,255,0.08); padding: 20px; background: rgba(0,0,0,0.4); border-radius: 4px; box-shadow: inset 0 0 20px rgba(0,255,204,0.05); width: 100%;">
            <div style="margin-bottom: 8px; color: rgba(255,255,255,0.4);">[CLOUD_EMBASSY_ROOT]</div>
            <div style="padding-left: 10px; display: flex; align-items: center; gap: 8px;">
              <span style="color: var(--color-ui-blue);">└──</span>
              <span style="color: #ffffff; font-weight: 700;">Sub-Room 08.1: Sky-Break Volumetrics</span>
              <span class="pulse-dot-green"></span>
            </div>
            <div style="padding-left: 35px; color: rgba(255,255,255,0.5); font-size: 11.5px; font-style: italic;">└─ 3D WebGL stipple cloud coherence engine</div>
          </div>

          <div style="font-family: var(--font-technical); font-size: 10px; opacity: 0.65; letter-spacing: 0.1em; pointer-events: none; border-top: 1px dashed var(--color-cad-line); padding-top: 10px; width: 100%; margin-top: 15px;">
            SYSTEM: WEBGL // THREE_JS
          </div>
        </div>

        <!-- Right Viewport: Slide Deck -->
        <div class="blueprint-right-details cloud-parent-slide-card" id="cloud-parent-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: hidden; position: relative;">
          <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
          <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
          
          <!-- Slides Viewport Wrapper -->
          <div class="cloud-parent-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
            <div class="cloud-parent-slides-viewport" id="cloud-parent-slides-viewport" style="display: flex; width: 300%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
              
              <!-- SLIDE 01: Overview -->
              <div class="cloud-parent-slide-pane active" id="pane-cloud-parent-overview" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                <div>
                  <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                    Subtracted Atmosphere
                  </h4>
                  <p class="font-ui" style="font-size: 13.5px; opacity: 0.85; line-height: 1.55; margin-bottom: 0.8rem;">
                    Cloud Embassy is structured as a spatial website and wiki container. In this alchemical interface, real-world tasks function as direct meteorological subtractions. Tapping the expansion button below slides open the nested Sky-Break Volumetrics sub-room to reveal the performance-tuned Three.js particle system.
                  </p>
                  
                  <div class="curatorial-throughline" style="border-left: 2px solid var(--color-moss-green); padding-left: 10px; margin-top: 1rem; font-size: 12px; font-style: italic; opacity: 0.85;">
                    Throughline: Establishes a quiet, neutral static-markdown portal where human identities are not asserted, but subtracted into geometric space.
                  </div>
                </div>
                
                <div style="border-top: 1px dashed var(--color-cad-line); padding-top: 0.8rem; margin-top: 0.5rem;">
                  <span class="font-tech" style="font-size: 11px; opacity: 0.5; display: block; margin-bottom: 0.4rem;">External Quartz Repository</span>
                  <a href="https://github.com/weseeclearly/cloud-embassy" target="_blank" class="control-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-technical); font-size: 12px; font-weight: 700; padding: 10px; text-decoration: none; border-color: var(--color-ui-blue); color: var(--color-ui-blue); background: rgba(20, 52, 240, 0.03); border-radius: 2px; text-transform: uppercase; transition: all 0.3s;">
                    <span>Launch Quartz Repository ↗</span>
                  </a>
                </div>
              </div>

              <!-- SLIDE 02: Essay -->
              <div class="cloud-parent-slide-pane" id="pane-cloud-parent-essay" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box; overflow: hidden;">
                <div style="display: flex; flex-direction: column; height: 100%;">
                  <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem;">
                    <span class="focused-reader-btn font-tech" onclick="openEssayFocusedReader('Room 08')" style="font-size: 11px; color: var(--color-ui-blue); cursor: pointer; border: 1px solid var(--color-cad-line); padding: 1px 4px; border-radius: 2px;">⛶ Focus Reader</span>
                  </div>
                  <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0 0 0.5rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                    The Neutral Zone
                  </h4>
                  
                  <div class="sonifold-essay-scroll-area" id="cloud-parent-essay-scroll" style="flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.6; opacity: 0.9;">
                    <p style="margin-bottom: 0.8rem;">
                      Drawing from Gurdjieff's Law of Three, Cloud Embassy functions as the neutralizing container—the place where the affirming self and denying digital environment dissolve into geometric stillness. 
                    </p>
                    <p style="margin-bottom: 0.8rem;">
                      The static site uses the Quartz engine linked directly to my Obsidian database, mapping personal archives, drawings, and texts into a windswept cloud universe.
                    </p>
                  </div>
                </div>
              </div>

              <!-- SLIDE 03: Specs -->
              <div class="cloud-parent-slide-pane" id="pane-cloud-parent-specs" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                <div>
                  <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                    Cloud Specifications
                  </h4>
                  
                  <div class="telemetry-terminal-box" style="min-height: 230px; margin-bottom: 0.5rem;">
                    <div class="terminal-bar">
                      <span class="terminal-dot" style="background-color: var(--color-ui-blue);"></span>
                      <span class="terminal-title font-tech">Embassy System</span>
                      <span class="terminal-status font-tech">WIP</span>
                    </div>
                    <div class="terminal-body" style="gap: 0.25rem;">
                      <div class="terminal-row">
                        <span class="term-label">Conceptual Pole:</span>
                        <span class="term-value" style="color: var(--color-ui-blue);">The Neutral Container</span>
                      </div>
                      <div class="terminal-row">
                        <span class="term-label">Quartz Version:</span>
                        <span class="term-value">v4.1.0 Static Markdown Parser</span>
                      </div>
                      <div class="terminal-row">
                        <span class="term-label">Knowledge Engine:</span>
                        <span class="term-value" style="color: var(--color-ui-ochre);">Obsidian Local Vault File Mapping</span>
                      </div>
                      <div class="terminal-row">
                        <span class="term-label">Interactive Breakout:</span>
                        <span class="term-value" style="color: var(--color-ui-red);">Sky-Break Volumetrics (Sub-Room 08.1)</span>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div style="font-family: var(--font-technical); font-size: 11px; opacity: 0.5; line-height: 1.45;">
                  Static Site Scaffold: Active Staging.<br>
                  Status: Upcoming Commission.
                </div>
              </div>

            </div>
          </div>
          
          <!-- Footer Tabs Navigation -->
          <div class="cloud-parent-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
            <button class="controller-btn-tech active" id="btn-cloud-parent-slide-overview" onclick="switchCloudParentSlide(0)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
              Overview
            </button>
            <button class="controller-btn-tech" id="btn-cloud-parent-slide-essay" onclick="switchCloudParentSlide(1)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
              Text
            </button>
            <button class="controller-btn-tech" id="btn-cloud-parent-slide-specs" onclick="switchCloudParentSlide(2)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
              Variables
            </button>
          </div>
        </div>
      </div>

      <!-- Collapsible trigger for breakouts -->
      <div style="margin-top: 2rem; border-top: 1px dashed var(--color-cad-line); padding-top: 1.5rem; display: flex; justify-content: center; z-index: 10; position: relative;">
        <button class="folder-toggle-btn font-tech" id="btn-toggle-cloud" onclick="toggleCloudFolder()" style="width: 100%; max-width: 500px; padding: 12px; font-size: 12px; font-weight: bold; border: 1px solid var(--color-ui-blue); color: var(--color-ui-blue); background: rgba(20,52,240,0.03); border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.3s; box-shadow: 0 4px 12px rgba(20,52,240,0.05);">
          [ + EXPAND COMPONENTS ]
        </button>
      </div>
    </section>

    <!-- Cloud Embassy Children Folder Container -->
    <div id="cloud-folder-children" class="folder-children-container">

      <!-- SUB-ROOM 08.1: SKY-BREAK VOLUMETRICS (3D WEBGL PARTICLE SYSTEM) -->
      <section class="section-box nested-component cloud-child last-child" id="sec-cloud-skybreak" data-parent="sec-cloud" data-keywords="volumetrics particle-system portal">
        <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
        <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>
        
        <div class="room-tags-wrapper font-tech">
          <span class="room-tags-label">touches //</span>
          <button class="room-tag-pill" onclick="filterExhibition('volumetrics')">volumetrics</button>
          <button class="room-tag-pill" onclick="filterExhibition('particle-system')">particle-system</button>
          <button class="room-tag-pill" onclick="filterExhibition('portal')">portal</button>
        </div>

        <span class="section-num">└── Sub-Room 08.1 / Sky-Break Volumetrics</span>
        <h2 class="section-header">Sky-Break Volumetrics</h2>
        <div class="project-meta-strip font-tech">
          <span class="meta-item"><span class="meta-label">LIFECYCLE //</span><span class="status-badge-container status-deployed"><span class="status-dot"></span><span>Deployed</span></span></span>
          <span class="meta-item"><span class="meta-label">TIMELINE //</span><span class="meta-value">2025</span></span>
        </div>
        
        <p class="lead-text" style="font-size: 14.5px; margin-bottom: 3rem;">
          The Three.js stipple cloud simulation system. Dragging the Sky-Break slider on the left organically parts the floating clouds to reveal the geometric coordinate grid behind.
        </p>

        <div class="blueprint-viewport-split" id="cloud-viewport" style="height: 580px;">
          <!-- Left Viewport: Live Cloud Breaks Coherence Engine -->
          <div class="blueprint-left-stack" style="padding: 1.5rem; background-color: var(--nested-card-bg); flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; border-right: 1px solid var(--color-cad-line); height: 100%;">
            <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
            <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
            
            <div class="cloud-canvas-container" style="width: 100%; height: calc(100% - 70px); position: relative; border: 1px solid var(--color-cad-line); background: var(--bg-color); transition: var(--theme-transition); overflow: hidden;">
              <canvas id="cloud-sim-canvas" class="interactive-sim-canvas" style="width: 100%; height: 100%; display: block;"></canvas>
            </div>

            <!-- Cloud Parting Slider Controls -->
            <div class="cloud-slider-container" style="width: 100%; padding-top: 1rem; border-top: 1px dashed var(--color-cad-line); z-index: 10;">
              <div style="display: flex; justify-content: space-between; margin-bottom: 0.3rem;">
                <span class="font-tech" style="font-size: 11.5px; font-weight: 600; color: var(--color-ui-blue);">COHERENCE SKY-BREAK SLIDER</span>
                <span class="font-tech" id="cloud-slider-val" style="font-size: 11.5px; color: var(--color-ui-blue); font-weight: 700;">0% Sky Break (Dense Clouds)</span>
              </div>
              <input type="range" id="cloud-parting-slider" min="0" max="100" value="0" class="gallery-slider" style="width: 100%; cursor: pointer;" />
            </div>
          </div>

          <!-- Right Viewport: Slide Deck -->
          <div class="blueprint-right-details cloud-slide-card" id="cloud-slide-card" style="padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: hidden; position: relative;">
            <div class="crop-mark-container crop-top-left" style="transform: scale(0.4); top: 8px; left: 8px;"></div>
            <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.4); bottom: 8px; right: 8px;"></div>
            
            <!-- Slides Viewport Wrapper -->
            <div class="cloud-slides-wrapper" style="flex: 1; width: 100%; overflow: hidden; position: relative;">
              <div class="cloud-slides-viewport" id="cloud-slides-viewport" style="display: flex; width: 300%; height: 100%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
                
                <!-- SLIDE 01: Curatorial Overview -->
                <div class="cloud-slide-pane active" id="pane-cloud-overview" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                  <div>
                    <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                      Subtracted Density
                    </h4>
                    <p class="font-ui" style="font-size: 13.5px; opacity: 0.85; line-height: 1.55; margin-bottom: 0.8rem;">
                      Cloud Embassy acts as a spatial container representing a mirror-world interface. Real-world commitments and life actions function as subtractions: pay a debt or clear a desk, and the environment subtracts a cloud. The digital canvas begins heavy, misty, and congested; as life is handled, the vapor sweeps away, clearing the atmosphere toward empty, geometric stillness.
                    </p>
                    
                    <div class="curatorial-throughline" style="border-left: 2px solid var(--color-moss-green); padding-left: 10px; margin-top: 1rem; font-size: 12px; font-style: italic; opacity: 0.85;">
                      Throughline: Creates a weightless formative container representing the self—translating the heavy burden of worldly densities into a clear, aesthetic canvas of radial geometry.
                    </div>
                  </div>
                  
                  <div style="border-top: 1px dashed var(--color-cad-line); padding-top: 0.8rem; margin-top: 0.5rem;">
                    <span class="font-tech" style="font-size: 11px; opacity: 0.5; display: block; margin-bottom: 0.4rem;">Obsidian Concept Node</span>
                    <div class="font-tech" style="font-size: 11px; color: var(--color-ui-blue); font-weight: 700; text-transform: uppercase;">
                      Upcoming Commission // Vault v1.02
                    </div>
                  </div>
                </div>

                <!-- SLIDE 02: Scrollable Essay Content -->
                <div class="cloud-slide-pane" id="pane-cloud-essay" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box; overflow: hidden;">
                  <div style="display: flex; flex-direction: column; height: 100%;">
                    <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem;">
                      <span class="focused-reader-btn font-tech" onclick="openEssayFocusedReader('Room 08.1')" style="font-size: 11px; color: var(--color-ui-blue); cursor: pointer; border: 1px solid var(--color-cad-line); padding: 1px 4px; border-radius: 2px;">⛶ Focus Reader</span>
                    </div>
                    <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0 0 0.5rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                      Archival Mists
                    </h4>
                    
                    <div class="sonifold-essay-scroll-area" id="cloud-essay-scroll" style="flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.6; opacity: 0.9;">
                      <p style="margin-bottom: 0.8rem;">
                        Under Gurdjieff's Law of Three, a structure is composed of three relational forces: the affirming protagonist, the denying environment, and the reconciling act of interfacing. Cloud Embassy is the neutral container—the place where these dynamics dissolve. 
                      </p>
                      <p style="margin-bottom: 0.8rem;">
                        Drawing from primordial cloud cosmologies (the Islamic <em>al-Ama</em> and Zuni <em>awonawilona</em>) and high cloud-forest stone fortresses like Kuelap, the environment treats the digital screen as a literal meteorological atmosphere. The hand-drawn marks—dots, numbers, and fine ikat weaving drafts—represent the density of human weight.
                      </p>
                      <p style="margin-bottom: 0.8rem; border-left: 2px solid var(--color-ui-red); padding-left: 0.75rem; font-style: italic; color: var(--text-color);">
                        "As mists part, we discover that the separation between protagonist and environment was an illusion. The observer merges with the cleared sky."
                      </p>
                      <p style="margin-bottom: 0.8rem;">
                        The interaction reproduces this subtractive geometry. By dragging your cursor, you sweep away the particulate layers, creating a local coherence break—a momentary clearing of the sky. In the parallel Internet, identity is not performed or broadcast; it is subtracted. Studio Weseeclearly disappears into the geometry, resolving the privacy wound by clearing away the surface noise to reveal the underlying silent matrix.
                      </p>
                    </div>
                  </div>
                </div>

                <!-- SLIDE 03: Technical Specifications Spec Sheet -->
                <div class="cloud-slide-pane" id="pane-cloud-specs" style="width: 33.333%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 0.5rem; box-sizing: border-box;">
                  <div>
                    <h4 class="font-ui" style="font-size: 15px; font-weight: 700; margin: 0.2rem 0 0.75rem 0; text-transform: uppercase; font-style: italic; letter-spacing: -0.02em;">
                      Embassy Vault
                    </h4>
                    
                    <div class="telemetry-terminal-box" style="min-height: 230px; margin-bottom: 0.5rem;">
                      <div class="terminal-bar">
                        <span class="terminal-dot" style="background-color: var(--color-ui-blue);"></span>
                        <span class="terminal-title font-tech">Embassy Metadata</span>
                        <span class="terminal-status font-tech">WIP</span>
                      </div>
                      <div class="terminal-body" style="gap: 0.25rem;">
                        <div class="terminal-row">
                          <span class="term-label">Conceptual Pole:</span>
                          <span class="term-value" style="color: var(--color-ui-blue);">The Environment // Reconciling Container</span>
                        </div>
                        <div class="terminal-row">
                          <span class="term-label">Obsidian Vault:</span>
                          <span class="term-value">Wiki-Linked Concept Mapping &amp; MOC Anchors</span>
                        </div>
                        <div class="terminal-row">
                          <span class="term-label">Research Domains:</span>
                          <span class="term-value" style="color: var(--color-ui-ochre);">al-Ama // awonawilona // enenra // ikat // kuelap</span>
                        </div>
                        <div class="terminal-row">
                          <span class="term-label">Subtractive Engine:</span>
                          <span class="term-value">Three.js Particle Drifting / Vector Sweeping</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div style="font-family: var(--font-technical); font-size: 11px; opacity: 0.5; line-height: 1.45;">
                    Three.js stipple rendering simulation engine.<br>
                    Status: Upcoming Commission.
                  </div>
                </div>

              </div>
            </div>
            
            <!-- Footer Tabs Navigation -->
            <div class="cloud-card-footer" style="display: flex; gap: 4px; border-top: 1px dashed var(--color-cad-line); padding-top: 0.75rem; margin-top: 0.5rem; z-index: 10;">
              <button class="controller-btn-tech active" id="btn-cloud-slide-overview" onclick="switchCloudSlide(0)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                Overview
              </button>
              <button class="controller-btn-tech" id="btn-cloud-slide-essay" onclick="switchCloudSlide(1)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                Text
              </button>
              <button class="controller-btn-tech" id="btn-cloud-slide-specs" onclick="switchCloudSlide(2)" style="flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 0.4rem 0.25rem;">
                Variables
              </button>
            </div>
          </div>
        </div>
      </section>

    </div> <!-- End cloud-folder-children -->

    <section id="exhibition-catalogue" class="exhibition-cv-catalog">
      <div class="crop-mark-container crop-top-left" style="transform: scale(0.6); top: 12px; left: 12px;"></div>
      <div class="crop-mark-container crop-bottom-right" style="transform: scale(0.6); bottom: 12px; right: 12px;"></div>
      
      <div class="cv-room-header">
        <h2 class="cv-title">CV</h2>
      </div>

      <div class="cv-grid">

        <!-- Selected Exhibitions -->
        <div class="cv-card">
          <span class="cv-card-num">Selected Exhibitions</span>
          <h3>Solo &amp; Group</h3>
          <ul class="cv-list">
            <li class="cv-list-item"><span class="cv-item-date">2025</span><span class="cv-item-title">MASCULINITY (group)</span><span class="cv-item-location">Quantum Galerie, Berlin</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2024</span><span class="cv-item-title">TigerDAO (group)</span><span class="cv-item-location">Bhutan Innovation Forum, Paro</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2023</span><span class="cv-item-title">News from Abroad (group)</span><span class="cv-item-location">Galerie Wolfsen, Aalborg</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2018</span><span class="cv-item-title">Vienna Contemporary (group)</span><span class="cv-item-location">Art fair, Vienna</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2018</span><span class="cv-item-title">Positions Berlin (group)</span><span class="cv-item-location">Art fair, Berlin</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2018</span><span class="cv-item-title">Elevate the Ball So It Never Drops Again</span><span class="cv-item-location">Blake &amp; Vargas, Berlin</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2017</span><span class="cv-item-title">Antarctic Pavilion</span><span class="cv-item-location">Venice Biennale, Venice</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2017</span><span class="cv-item-title">Choose Your Own Adventure (solo)</span><span class="cv-item-location">Galerie Thomas Fuchs, Stuttgart</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2017</span><span class="cv-item-title">MIA Photo Fair (group)</span><span class="cv-item-location">BNP Paribas Award semifinalist, Milan</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2017</span><span class="cv-item-title">Beirut Design Week</span><span class="cv-item-location">with Isaac Sullivan, Beirut</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2016</span><span class="cv-item-title">How To Let Go (solo)</span><span class="cv-item-location">Magic Beans, Berlin</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2016</span><span class="cv-item-title">Cut And Fold (solo)</span><span class="cv-item-location">SouvenirBY, Berlin</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2016</span><span class="cv-item-title">Positions Berlin (group)</span><span class="cv-item-location">Art fair, Berlin</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2015</span><span class="cv-item-title">Whole Is a Hand That Shakes (solo)</span><span class="cv-item-location">Thomas Fuchs Gallery, Stuttgart</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2014</span><span class="cv-item-title">Continental Shift (group)</span><span class="cv-item-location">Saatchi Gallery, London</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2014</span><span class="cv-item-title">Kölner Liste (group)</span><span class="cv-item-location">Art fair, Cologne</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2013</span><span class="cv-item-title">Imago Mundi (group)</span><span class="cv-item-location">Querini Stampalia, Venice Biennale — cur. Diego Cortez</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2013</span><span class="cv-item-title">VOLTA NY (solo)</span><span class="cv-item-location">New York</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2013</span><span class="cv-item-title">Laughter (solo)</span><span class="cv-item-location">Egbert Baqué Contemporary Art, Berlin</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2012</span><span class="cv-item-title">Ecstatic Skin (solo)</span><span class="cv-item-location">Envoy Enterprises, New York</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2012</span><span class="cv-item-title">Texas Contemporary (group)</span><span class="cv-item-location">Art fair, Houston</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2011</span><span class="cv-item-title">I Digressed (solo)</span><span class="cv-item-location">NP Contemporary Art Center, New York</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2010</span><span class="cv-item-title">Tools for Thought: Rebuild Haiti (group)</span><span class="cv-item-location">Sotheby's, New York</span></li>
          </ul>
        </div>

        <!-- Selected Illustration -->
        <div class="cv-card">
          <span class="cv-card-num">Selected Illustration</span>
          <h3>Covers &amp; editorial</h3>
          <ul class="cv-list">
            <li class="cv-list-item"><span class="cv-item-date">2025</span><span class="cv-item-title">JQ &amp; Richard Pike</span><span class="cv-item-location">Cover &amp; visualizer, &ldquo;Tessera&rdquo;</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2025</span><span class="cv-item-title">DIE ZEIT</span><span class="cv-item-location">Editorial illustration, Hamburg</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2024</span><span class="cv-item-title">DIE ZEIT</span><span class="cv-item-location">Full-page illustration, Hamburg</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2024</span><span class="cv-item-title">Süddeutsche Zeitung Magazin</span><span class="cv-item-location">Editorial illustration, Munich</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2020</span><span class="cv-item-title">Süddeutsche Zeitung Magazin</span><span class="cv-item-location">Cover &amp; interior, Munich</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2018</span><span class="cv-item-title">Woodkid &amp; Louis Garrel</span><span class="cv-item-location">Single cover, &ldquo;L'aérogramme de Los Angeles&rdquo;</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2015</span><span class="cv-item-title">Moisés Fernández Via</span><span class="cv-item-location">Album cover, &ldquo;Les mains nues&rdquo;</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2014</span><span class="cv-item-title">Barbarisms</span><span class="cv-item-location">Album cover, self-titled</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2013</span><span class="cv-item-title">Daníel Bjarnason</span><span class="cv-item-location">Album cover, &ldquo;Over Light Earth&rdquo;</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2013</span><span class="cv-item-title">PVT</span><span class="cv-item-location">Album cover, &ldquo;Homosapien&rdquo;</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2011</span><span class="cv-item-title">The Pains of Being Pure at Heart</span><span class="cv-item-location">Album cover, &ldquo;Belong&rdquo; — BBC Top 50 Sleeves</span></li>
          </ul>
        </div>

        <!-- Selected Press -->
        <div class="cv-card">
          <span class="cv-card-num">Selected Press</span>
          <h3>Coverage</h3>
          <ul class="cv-list">
            <li class="cv-list-item"><span class="cv-item-date">2025</span><span class="cv-item-title">TITLES</span><span class="cv-item-location">Interview</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2018</span><span class="cv-item-title">Stuttgarter Nachrichten</span><span class="cv-item-location">Review, Stuttgart</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2016</span><span class="cv-item-title">Hello Mr.</span><span class="cv-item-location">Profile, photographed by Jonas Lindstroem</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2016</span><span class="cv-item-title">Travis Jeppesen</span><span class="cv-item-location">Essay in PhD thesis, Royal College of Art</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2014</span><span class="cv-item-title">The Lab Magazine</span><span class="cv-item-location">Video studio portrait</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2013</span><span class="cv-item-title">Complex</span><span class="cv-item-location">&ldquo;25 Best Artists 25 &amp; Under&rdquo;, New York</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2013</span><span class="cv-item-title">OUT</span><span class="cv-item-location">Hot List, New York</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2013</span><span class="cv-item-title">IGNANT</span><span class="cv-item-location">Feature</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2013</span><span class="cv-item-title">Berlin Art Link</span><span class="cv-item-location">Review &amp; studio visit, Berlin</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2013</span><span class="cv-item-title">GalleryLOG</span><span class="cv-item-location">Video feature, VOLTA NY</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2012</span><span class="cv-item-title">Autre</span><span class="cv-item-location">Interview, Los Angeles</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2012</span><span class="cv-item-title">Artwrit</span><span class="cv-item-location">Essay by Anna Khachiyan</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2012</span><span class="cv-item-title">Barneys New York</span><span class="cv-item-location">Co-Op Spring campaign film</span></li>
          </ul>
        </div>

        <!-- Performances -->
        <div class="cv-card">
          <span class="cv-card-num">Performances</span>
          <h3>Selected</h3>
          <ul class="cv-list">
            <li class="cv-list-item"><span class="cv-item-date">2017</span><span class="cv-item-title">Shade</span><span class="cv-item-location">Tanztage, Sophiensæle, Berlin</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2017</span><span class="cv-item-title">Return to Preludes</span><span class="cv-item-location">SINAI Orchestral Theatre, Berlin</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2017</span><span class="cv-item-title">Preservation</span><span class="cv-item-location">Solo, KUNSTSAELE, Berlin</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2016</span><span class="cv-item-title">Ice Chrysocolla</span><span class="cv-item-location">with Donna Huanca, Manifesta 11, Zurich</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2016</span><span class="cv-item-title">People Like Shapes</span><span class="cv-item-location">with Jonathan VanDyke, Este Arte, Punta del Este</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2010</span><span class="cv-item-title">MOVE!</span><span class="cv-item-location">Terence Koh &amp; Italo Zucchelli, MoMA PS1, New York</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2010</span><span class="cv-item-title">Vaginal Davis: Speaking From the Diaphragm</span><span class="cv-item-location">PS122, New York</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2010</span><span class="cv-item-title">Miho Hatori</span><span class="cv-item-location">Philadelphia Museum of Art</span></li>
          </ul>
        </div>

        <!-- Selected Work -->
        <div class="cv-card">
          <span class="cv-card-num">Selected Work Experience</span>
          <h3>Roles</h3>
          <ul class="cv-list">
            <li class="cv-list-item"><span class="cv-item-date">2023</span><span class="cv-item-title">PI Apparel Europe</span><span class="cv-item-location">Keynote, Milan</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2022–23</span><span class="cv-item-title">BNV</span><span class="cv-item-location">Creative Director, Singapore</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2022</span><span class="cv-item-title">DALL·E &amp; Midjourney</span><span class="cv-item-location">Beta tester</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2021</span><span class="cv-item-title">Matthew Stone, &ldquo;Dreaming&rdquo;</span><span class="cv-item-location">Curator &amp; architect, online</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2020–23</span><span class="cv-item-title">Metafactory</span><span class="cv-item-location">Core team lead</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2020–21</span><span class="cv-item-title">Newcoin Foundation</span><span class="cv-item-location">Director of Cultural Sciences, Prague</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2020</span><span class="cv-item-title">Shedhalle</span><span class="cv-item-location">Workshop leader, Zürich</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2019–20</span><span class="cv-item-title">Donna Huanca Studio</span><span class="cv-item-location">Prop Designer, Berlin</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2019</span><span class="cv-item-title">Scholastic Art &amp; Writing Awards</span><span class="cv-item-location">National Juror, New York</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2016</span><span class="cv-item-title">Ai Weiwei studio</span><span class="cv-item-location">Research &amp; production, Human Flow, Berlin</span></li>
          </ul>
        </div>

        <!-- Education & Residencies -->
        <div class="cv-card">
          <span class="cv-card-num">Education &amp; Residencies</span>
          <h3>Education</h3>
          <ul class="cv-list">
            <li class="cv-list-item"><span class="cv-item-date">2015</span><span class="cv-item-title">Ren Shi Gong Fu School</span><span class="cv-item-location">Martial arts, Shandong</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2007–11</span><span class="cv-item-title">New York University</span><span class="cv-item-location">Philosophy &amp; creative writing, New York</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2009</span><span class="cv-item-title">Peking University</span><span class="cv-item-location">Chinese literature, Beijing</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2006–07</span><span class="cv-item-title">L'Institut Catholique</span><span class="cv-item-location">French art, Paris</span></li>
          </ul>
          <h3 style="margin-top: 1.1rem;">Residencies</h3>
          <ul class="cv-list">
            <li class="cv-list-item"><span class="cv-item-date">2024</span><span class="cv-item-title">Unfurling Domesticity</span><span class="cv-item-location">Pullay, France</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2022</span><span class="cv-item-title">Glitch Residency</span><span class="cv-item-location">Château du Fey, Villecien, France</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2021</span><span class="cv-item-title">Gitler &amp;_____ with Boy Kong</span><span class="cv-item-location">Catskills, New York</span></li>
            <li class="cv-list-item"><span class="cv-item-date">2017</span><span class="cv-item-title">Alfred &amp; Trafford Klots Program</span><span class="cv-item-location">MICA, Léhon, France</span></li>
          </ul>
        </div>

        <!-- Skills -->
        <div class="cv-card cv-card-skills">
          <span class="cv-card-num">Skills</span>
          <h3>What I Do</h3>

          <div class="skills-grid">
          <div class="skills-block">
            <span class="cv-item-date" style="display:block; margin-bottom:var(--space-xs)">Garments &amp; 3D</span>
            <div class="skill-tag-group">
              <span class="skill-pill">CLO3D</span>
              <span class="skill-pill">Blender</span>
              <span class="skill-pill">Pattern making</span>
            </div>
          </div>

          <div class="skills-block">
            <span class="cv-item-date" style="display:block; margin-bottom:var(--space-xs)">Creative code</span>
            <div class="skill-tag-group">
              <span class="skill-pill">TouchDesigner</span>
              <span class="skill-pill">Audio-reactive visuals</span>
              <span class="skill-pill">Processing</span>
              <span class="skill-pill">D3.js</span>
            </div>
          </div>

          <div class="skills-block">
            <span class="cv-item-date" style="display:block; margin-bottom:var(--space-xs)">AI</span>
            <p class="font-ui" style="font-size: 13px; line-height: 1.55; opacity: 0.85; margin: 0 0 0.65rem 0;">
              Working with language models since GPT-1 in 2019. I currently teach and advise on how to use AI.
            </p>
            <div class="skill-tag-group">
              <span class="skill-pill">LLMs since GPT-1</span>
              <span class="skill-pill">DALL·E / Midjourney beta</span>
              <span class="skill-pill">Agentic engineering</span>
              <span class="skill-pill">Teaching &amp; advising</span>
            </div>
          </div>

          <div class="skills-block">
            <span class="cv-item-date" style="display:block; margin-bottom:var(--space-xs)">Systems &amp; databases</span>
            <div class="skill-tag-group">
              <span class="skill-pill">Notion</span>
              <span class="skill-pill">Database design</span>
              <span class="skill-pill">Information architecture</span>
              <span class="skill-pill">Production flow</span>
            </div>
          </div>

          <div class="skills-block">
            <span class="cv-item-date" style="display:block; margin-bottom:var(--space-xs)">Design software</span>
            <div class="skill-tag-group">
              <span class="skill-pill">Adobe Illustrator</span>
              <span class="skill-pill">Adobe Photoshop</span>
            </div>
          </div>

          <div class="skills-block">
            <span class="cv-item-date" style="display:block; margin-bottom:var(--space-xs)">Sound</span>
            <div class="skill-tag-group">
              <span class="skill-pill">Ableton</span>
            </div>
          </div>

          <div class="skills-block">
            <span class="cv-item-date" style="display:block; margin-bottom:var(--space-xs)">By hand</span>
            <div class="skill-tag-group">
              <span class="skill-pill">Violin</span>
              <span class="skill-pill">Viola</span>
              <span class="skill-pill">Erhu</span>
              <span class="skill-pill">Oil painting</span>
              <span class="skill-pill">Sewing</span>
            </div>
          </div>
          </div>
        </div>

      </div>
    </section>

      </div>
    </main>

    <!-- ==================== FOOTER ==================== -->
    <footer class="exhibition-footer">
      <ul class="footer-nav">
        <li><a href="https://www.youtube.com/@SelfOhYes" class="footer-nav-link" target="_blank" rel="noopener" data-social="youtube">YouTube</a></li>
        <li><a href="https://www.instagram.com/weseeclearly" class="footer-nav-link" target="_blank" rel="noopener" data-social="instagram">Instagram</a></li>
        <li><a href="https://x.com/interfaciing" class="footer-nav-link" target="_blank" rel="noopener" data-social="x">X</a></li>
        <li><a href="https://paragraph.com/@interfacing/" class="footer-nav-link" target="_blank" rel="noopener" data-social="blog">Blog</a></li>
        <li><a href="https://www.linkedin.com/in/weseeclearly" class="footer-nav-link" target="_blank" rel="noopener" data-social="linkedin">LinkedIn</a></li>
      </ul>
      <span class="copyright-museum">WINSTON CHMIELINSKI © 2026 // ALL RIGHTS RESERVED</span>
    </footer>

  </div>

  <!-- Toast Notification -->
  <div class="toast" id="toast-message">COPIED TO CLIPBOARD</div>

  <!-- GALLERY LightBOX OVERLAY -->
  <div class="gallery-lightbox" id="gallery-lightbox" onclick="closeLightbox(event)">
    <div class="lightbox-content-wrapper">
      <img id="lightbox-img" src="" alt="High Resolution View" />
      <div id="lightbox-custom-content" class="lightbox-custom-content" style="display: none; width: 100%;"></div>
      <button class="lightbox-close font-tech" onclick="closeLightbox(event)">[ CLOSE ] ×</button>
    </div>
  </div>

  <!-- Core JavaScript modules -->
  <script src="main.js?v=67.0"></script>
  <script src="force-graph.js?v=67.0"></script>
  
</body>
</html>
