<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>rain-2 — Monaco + dual rain layers</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <script type="module" crossorigin src="./assets/index-CLsonJMm.js"></script>
    <link rel="modulepreload" crossorigin href="./assets/monaco-BAfg2J42.js">
    <link rel="modulepreload" crossorigin href="./assets/vendor-jGAocria.js">
    <link rel="stylesheet" crossorigin href="./assets/monaco-CgHo24-M.css">
    <link rel="stylesheet" crossorigin href="./assets/index-BjzDlDIi.css">
  </head>
  <body>
    <div id="app">
      <div id="container">
        <canvas id="rain-back" class="rain-canvas"></canvas>
        <canvas id="connections-layer"></canvas>
        <canvas id="matrix-layer"></canvas>
        <div id="reference-layer"></div>
        <div id="reference-overlay"></div>
        <div id="holo-layer"></div>
        <div id="aurora-layer"></div>
        <div id="echo-layer"></div>
        <div id="editor-title-bar" class="editor-title-bar">main.js</div>
        <div id="editor"></div>
        <div id="image-viewer"></div>
        <div id="magnifier-lens"></div>
        <div id="neon-scatter-layer"></div>
        <div id="scanline-overlay"></div>
        <canvas id="rain-front" class="rain-canvas"></canvas>
        <canvas id="dust-layer"></canvas>
        <div id="fog-layer"></div>
        <div id="lightning-layer"></div>
        <div id="vignette-layer"></div>
        <div id="depth-beam"></div>
      </div>

      <div id="tabs-container">
        <div class="ui-sheen"></div>
        <div class="tabs-list"></div>
        <div class="depth-controls">
          <button
            id="btn-depth-forward"
            title="Bring Forward — increase z-depth (Ctrl/Cmd + ↑)"
          >
            ↑ Bring Forward
          </button>
          <button
            id="btn-depth-back"
            title="Push Back — decrease z-depth (Ctrl/Cmd + ↓)"
          >
            ↓ Push Back
          </button>
          <select id="view-mode-select" title="Toggle View Mode">
            <option value="">Default View</option>
            <option value="cityscape">🏙️ Cityscape View</option>
            <option value="house-of-cards">🃏 House of Cards</option>
            <option value="floating-nexus">✨ Floating Nexus</option>
            <option value="quantum">🌌 Quantum Superposition</option>
            <option value="time-tunnel">🕳️ Time Tunnel View</option>
            <option value="theater">🎭 Theater View</option>
            <option value="tornado">🌪️ Tornado View</option>
            <option value="venetian">Venetian Blinds</option>
            <option value="stackdeck">🗂️ Stack Deck View</option>
            <option value="card-spread">🎴 Card Spread View</option>
            <option value="aurora">🌌 Aurora View</option>
            <option value="waterfall">💧 Waterfall View</option>
            <option value="cascade">🌊 Cascade View</option>
            <option value="orbit">🪐 Orbit View</option>
            <option value="scattered">🌪️ Scattered View</option>
            <option value="isometric">📐 Isometric</option>
            <option value="stack">⏳ Stack View</option>
            <option value="timeline">🛤️ Timeline View</option>
            <option value="tunnel">🚇 Tunnel View</option>
            <option value="grid">🧊 Grid View</option>
            <option value="helix">🧬 Helix View</option>
            <option value="carousel">🎠 Carousel View</option>
            <option value="accordion">🪗 Accordion View</option>
            <option value="meteor">☄️ Meteor Scatter</option>
            <option value="infinity-mirror">🪞 Infinity Mirror</option>\n            <option value="archway">⛩️ Archway View</option>
            <option value="pinboard">📌 Pinboard</option>
            <option value="vortex">🌀 Vortex View</option>
            <option value="constellation">✨ Constellation View</option>
            <option value="prism">💎 Prism View</option>
            <option value="prism-split">💎 Prism Split</option>
            <option value="coverflow">🗂️ Coverflow</option>
            <option value="chrono-ring">⏱️ Chrono-Ring View</option>
            <option value="ribbon">🎀 Ribbon View</option>
            <option value="sphere">🌐 Sphere View</option>
            <option value="wave">🌊 Wave View</option>
            <option value="black-hole">🕳️ Black Hole</option>
            <option value="rolodex">📇 Rolodex View</option>
            <option value="cylinder">🛢️ Cylinder View</option>
            <option value="galaxy">🌌 Galaxy View</option>
            <option value="data-hive">🐝 Data Hive</option>
            <option value="origami">🦢 Origami View</option>
            <option value="matrix-rain">🔣 Matrix Rain View</option>
            <option value="staircase">🪜 Staircase View</option>
            <option value="pyramid">🔺 Pyramid View</option>
            <option value="crystal">💎 Crystal Lattice View</option>
            <option value="fractal">🌳 Fractal Tree View</option>
            <option value="solar-system">☀️ Solar System View</option>
            <option value="neon-synth">🏎️ Neon Synth View</option>
            <option value="tesseract">🌌 Tesseract View</option>
            <option value="bookshelf">📚 Bookshelf View</option>
            <option value="blueprint-3d">📐 Blueprint 3D</option>
            <option value="cyber-cortex">🧠 Cyber Cortex</option>
            <option value="outline">📋 Outline View</option>
            <option value="cyclone">🌪️ Cyclone View</option>
            <option value="mobius">♾️ Möbius Strip View</option>
            <option value="astrolabe">⚙️ Astrolabe View</option>
            <option value="dominoes">🁣 Dominoes View</option>
            <option value="hexagon-matrix">⬡ Hexagon Matrix</option>
            <option value="kaleidoscope">👁️ Kaleidoscope View</option>
            <option value="torus">🍩 Torus View</option>
            <option value="luminescence">🌟 Luminescence View</option>
            <option value="geode">🪨 Geode View</option>
            <option value="lotus">🪷 Lotus View</option>
            <option value="fibonacci-spiral">🌀 Fibonacci Spiral View</option>
            <option value="hypercube">🧊 Hypercube View</option>
            <option value="theater">🎭 Theater View</option>
            <option value="tornado">🌪️ Tornado View</option>
            <option value="venetian">Venetian Blinds</option>
            <option value="stackdeck">🗂️ Stack Deck View</option>
            <option value="dna-helix">🧬 DNA Helix View</option>
          </select>
        </div>
      </div>

      <div id="dock">
        <div class="ui-sheen"></div>
        <div class="dock-title">RAIN CONTROL</div>

        <div class="dock-group">
          <canvas
            id="radar-canvas"
            width="160"
            height="90"
            style="
              background: rgba(0, 0, 0, 0.3);
              border-radius: 8px;
              border: 1px solid rgba(255, 255, 255, 0.1);
              width: 100%;
              display: block;
            "
          ></canvas>
        </div>

        <div class="dock-group">
          <label><span class="icon">⛈️</span> Storm Intensity</label>
          <input
            id="storm-intensity"
            type="range"
            min="0"
            max="100"
            value="30"
          />
        </div>

        <div class="dock-group">
          <label><span class="icon">👁️</span> Editor Opacity</label>
          <input
            id="editor-opacity"
            type="range"
            min="0"
            max="1"
            step="0.05"
            value="1"
          />
        </div>

        <div class="dock-group">
          <label><span class="icon">📝</span> Reference Text</label>
          <textarea
            id="reference-input"
            rows="3"
            placeholder="Paste reference here..."
          ></textarea>
        </div>

        <div class="dock-group">
          <label><span class="icon">🔍</span> Deep Search</label>
          <input
            id="global-search"
            type="text"
            placeholder="Search background tabs..."
            style="
              background: rgba(0, 0, 0, 0.3);
              border: 1px solid rgba(255, 255, 255, 0.05);
              border-radius: 8px;
              color: #c0c0d0;
              padding: 6px;
              font-family: inherit;
              font-size: 11px;
              width: 100%;
              box-sizing: border-box;
              outline: none;
            "
          />
        </div>

        <div class="dock-group">
          <label><span class="icon">🎨</span> Theme</label>
          <select
            id="theme-select"
            style="
              background: rgba(0, 0, 0, 0.3);
              border: 1px solid rgba(255, 255, 255, 0.1);
              border-radius: 4px;
              color: #c0c0d0;
              padding: 4px;
              font-family: inherit;
              font-size: 11px;
              width: 100%;
              margin-top: 5px;
              cursor: pointer;
            "
          >
            <option value="cyberpunk">Cyberpunk</option>
            <option value="journal">Journal</option>
            <option value="blueprint">Blueprint</option>
          </select>
        </div>

        <div class="dock-group" id="workspace-dock">
          <label><span class="icon">💾</span> Workspace</label>
          <div class="workspace-actions">
            <button
              type="button"
              id="btn-local-folder"
              class="dock-btn-workspace"
              title="Open a local folder (File System Access API)"
            >
              Open folder
            </button>
            <button
              type="button"
              id="btn-local-opfs"
              class="dock-btn-workspace"
              title="Open Origin Private File System sandbox"
            >
              OPFS sandbox
            </button>
            <button
              type="button"
              id="btn-workspace-export"
              class="dock-btn-workspace"
              title="Export storm layout JSON"
            >
              Export layout
            </button>
            <button
              type="button"
              id="btn-workspace-import"
              class="dock-btn-workspace"
              title="Import storm layout JSON"
            >
              Import layout
            </button>
            <input
              id="workspace-import-input"
              type="file"
              accept="application/json,.json"
              hidden
            />
            <button
              type="button"
              id="btn-workspace-clear"
              class="dock-btn-workspace"
              title="Clear saved session from IndexedDB/localStorage"
            >
              Clear saved
            </button>
          </div>
          <label title="Opt-in: sync session JSON via StorageAPI notes"
            ><input id="workspace-remote-sync" type="checkbox" /> Remote session
            sync</label
          >
        </div>

        <div class="dock-toggles">
          <div title="Water-map simulation backend (visual parity)">
            <label for="rain-sim-backend">Rain Sim</label>
            <select
              id="rain-sim-backend"
              style="
                background: rgba(0, 0, 0, 0.5);
                color: #0ff;
                border: 1px solid #0ff;
                border-radius: 4px;
                padding: 2px 4px;
                font-family: 'JetBrains Mono', monospace;
                font-size: 0.7rem;
                cursor: pointer;
              "
            >
              <option value="auto">Auto</option>
              <option value="wasm">WASM Worker</option>
              <option value="js">JS Worker</option>
              <option value="main">Main-thread JS</option>
            </select>
          </div>
          <label title="Back Rain"
            ><input id="toggle-back" type="checkbox" checked /> Back Rain</label
          >
          <label title="Front Rain"
            ><input id="toggle-front" type="checkbox" checked /> Front
            Rain</label
          >
          <label title="Front Rain on Top"
            ><input id="toggle-front-on-top" type="checkbox" checked /> Rain
            Layering</label
          >
          <label title="Focus Mode"
            ><input id="focus-mode" type="checkbox" /> Focus Mode</label
          >
          <label title="Blueprint Mode"
            ><input id="blueprint-mode" type="checkbox" /> Blueprint Mode</label
          >
          <label title="Lantern Mode"
            ><input id="lantern-mode" type="checkbox" checked /> Lantern
            Mode</label
          >
          <label title="Ghost Mode"
            ><input id="ghost-mode" type="checkbox" /> Ghost Mode</label
          >
          <label title="Cinematic Autofocus"
            ><input id="cinematic-autofocus-mode" type="checkbox" /> Cinematic
            Autofocus</label
          >
          <label title="Wiper Mode"
            ><input id="wiper-mode" type="checkbox" /> Wiper Mode</label
          >
          <label title="Expose Mode"
            ><input id="expose-mode" type="checkbox" /> Expose Mode</label
          >
          <label title="Portal Mode"
            ><input id="portal-mode-toggle" type="checkbox" /> Portal Mode</label
          >
          <label title="Theater Mode"
            ><input id="theater-mode" type="checkbox" /> Theater Mode</label
          >
          <label title="Cinematic Autofocus"
            ><input id="cinematic-autofocus-mode" type="checkbox" /> Cinematic
            Autofocus</label
          >
          <div>
            <button
              id="btn-sonar-ping"
              title="Sonar Ping (Ctrl+Space)"
              class="dock-btn-sonar"
            >
              📡 Sonar Ping
            </button>
            <button
              id="btn-z-scan"
              title="3D Z-Axis Scan"
              class="dock-btn-zscan"
            >
              🔍 Z-Scan
            </button>
            <button
              id="btn-black-hole-view"
              title="Toggle Black Hole View"
              class="dock-btn-sonar"
              style="margin-top: 5px"
            >
              🕳️ Black Hole
            </button>
            <button
              id="btn-explode-view"
              title="Explode View (Ctrl+Alt+E)"
              class="dock-btn-sonar"
              style="margin-top: 5px"
            >
              💥 Explode View (Ctrl+Alt+E)
            </button>
          </div>
        </div>
      </div>

    <!-- Z-Axis Scanner plane element -->
    <div id="z-scanner-plane"></div>

    <!-- 3D File Cabinet toggle button -->
    <!-- Heat Distortion SVG -->
    <svg style="position: absolute; width: 0; height: 0">
      <filter id="heat-haze">
        <feTurbulence
          type="fractalNoise"
          baseFrequency="0.015 0.05"
          numOctaves="2"
          result="noise"
        />
        <feDisplacementMap
          in="SourceGraphic"
          in2="noise"
          scale="10"
          xChannelSelector="R"
          yChannelSelector="G"
        />
      </filter>
    </svg>

    <div
      style="
        position: fixed;
        bottom: 24px;
        left: 24px;
        z-index: 40;
        display: flex;
        gap: 10px;
        align-items: center;
      "
    >
      <button
        id="btn-cabinet"
        title="Open 3D File Cabinet"
        style="
          background: rgba(10, 15, 40, 0.6);
          border: 1px solid rgba(140, 200, 255, 0.3);
          color: #e0f0ff;
          font-family: inherit;
          font-size: 14px;
          font-weight: 500;
          padding: 12px 24px;
          border-radius: 20px;
          cursor: pointer;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(140, 200, 255, 0.1);
          transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
          text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        "
        onmouseover="this.style.background = 'rgba(10, 15, 40, 0.8)'; this.style.border = '1px solid rgba(0, 229, 255, 0.6)'; this.style.boxShadow = '0 6px 20px rgba(0, 229, 255, 0.3), inset 0 0 25px rgba(0, 229, 255, 0.2)'; this.style.backdropFilter = 'blur(20px)'; this.style.transform = 'scale(1.05) translateY(-2px)';"
        onmouseout="this.style.background = 'rgba(10, 15, 40, 0.6)'; this.style.border = '1px solid rgba(140, 200, 255, 0.3)'; this.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(140, 200, 255, 0.1)'; this.style.backdropFilter = 'blur(16px)'; this.style.transform = 'scale(1) translateY(0)';"
        onmousedown="this.style.boxShadow = 'inset 0 4px 10px rgba(0, 0, 0, 0.6), inset 0 0 5px rgba(0, 229, 255, 0.1)'; this.style.transform = 'scale(0.98) translateY(1px)';"
        onmouseup="this.style.boxShadow = '0 6px 20px rgba(0, 229, 255, 0.3), inset 0 0 25px rgba(0, 229, 255, 0.2)'; this.style.transform = 'scale(1.05) translateY(-2px)';"
      >
        🗄️ File Cabinet
      </button>

      <button
        id="btn-vps-open"
        title="Open file from Contabo VPS (storage.noahcohn.com)"
        style="
          background: rgba(10, 15, 40, 0.6);
          border: 1px solid rgba(140, 200, 255, 0.3);
          color: #e0f0ff;
          font-family: inherit;
          font-size: 14px;
          font-weight: 500;
          padding: 12px 24px;
          border-radius: 20px;
          cursor: pointer;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(140, 200, 255, 0.1);
          transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
          text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        "
        onmouseover="this.style.background = 'rgba(10, 15, 40, 0.8)'; this.style.border = '1px solid rgba(0, 229, 255, 0.6)'; this.style.boxShadow = '0 6px 20px rgba(0, 229, 255, 0.3), inset 0 0 25px rgba(0, 229, 255, 0.2)'; this.style.backdropFilter = 'blur(20px)'; this.style.transform = 'scale(1.05) translateY(-2px)';"
        onmouseout="this.style.background = 'rgba(10, 15, 40, 0.6)'; this.style.border = '1px solid rgba(140, 200, 255, 0.3)'; this.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(140, 200, 255, 0.1)'; this.style.backdropFilter = 'blur(16px)'; this.style.transform = 'scale(1) translateY(0)';"
        onmousedown="this.style.boxShadow = 'inset 0 4px 10px rgba(0, 0, 0, 0.6), inset 0 0 5px rgba(0, 229, 255, 0.1)'; this.style.transform = 'scale(0.98) translateY(1px)';"
        onmouseup="this.style.boxShadow = '0 6px 20px rgba(0, 229, 255, 0.3), inset 0 0 25px rgba(0, 229, 255, 0.2)'; this.style.transform = 'scale(1.05) translateY(-2px)';"
      >
        📡 VPS Files
      </button>

      <button
        id="btn-vps-save"
        title="Save current file to Contabo VPS (Ctrl+Shift+S)"
        style="
          background: rgba(10, 15, 40, 0.6);
          border: 1px solid rgba(140, 200, 255, 0.3);
          color: #e0f0ff;
          font-family: inherit;
          font-size: 14px;
          font-weight: 500;
          padding: 12px 24px;
          border-radius: 20px;
          cursor: pointer;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(140, 200, 255, 0.1);
          transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
          text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        "
        onmouseover="this.style.background = 'rgba(10, 15, 40, 0.8)'; this.style.border = '1px solid rgba(0, 229, 255, 0.6)'; this.style.boxShadow = '0 6px 20px rgba(0, 229, 255, 0.3), inset 0 0 25px rgba(0, 229, 255, 0.2)'; this.style.backdropFilter = 'blur(20px)'; this.style.transform = 'scale(1.05) translateY(-2px)';"
        onmouseout="this.style.background = 'rgba(10, 15, 40, 0.6)'; this.style.border = '1px solid rgba(140, 200, 255, 0.3)'; this.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(140, 200, 255, 0.1)'; this.style.backdropFilter = 'blur(16px)'; this.style.transform = 'scale(1) translateY(0)';"
        onmousedown="this.style.boxShadow = 'inset 0 4px 10px rgba(0, 0, 0, 0.6), inset 0 0 5px rgba(0, 229, 255, 0.1)'; this.style.transform = 'scale(0.98) translateY(1px)';"
        onmouseup="this.style.boxShadow = '0 6px 20px rgba(0, 229, 255, 0.3), inset 0 0 25px rgba(0, 229, 255, 0.2)'; this.style.transform = 'scale(1.05) translateY(-2px)';"
      >
        💾 Save to VPS
      </button>
    </div>
    </div>

    <div id="z-slicer-ui">
      <div class="slicer-label">Z-DEPTH SLICER</div>
      <input type="range" id="z-slicer-range" min="0" max="100" value="0" />
    </div>

  </body>
</html>