<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="fediverse:creator" content="@TheRealNooshu@hachyderm.io" />
    <title>FractalAI - 2D Fractal Generator</title>

    <!-- Open Graph / Facebook -->
    <!-- Site URL is also stored in static/js/core/config.js for JavaScript use -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://fractals.world/" />
    <meta property="og:title" content="FractalAI - 2D Fractal Generator" />
    <meta property="og:description" content="Generate beautiful 2D fractals with AI assistance. Explore Mandelbrot sets, Julia sets, and many more fractal types with interactive controls." />
    <meta property="og:image" content="https://fractals.world/static/images/fractals-world-preview.jpg" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="FractalAI - 2D Fractal Generator preview" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://fractals.world/" />
    <meta name="twitter:title" content="FractalAI - 2D Fractal Generator" />
    <meta name="twitter:description" content="Generate beautiful 2D fractals with AI assistance. Explore Mandelbrot sets, Julia sets, and many more fractal types with interactive controls." />
    <meta name="twitter:image" content="https://fractals.world/static/images/fractals-world-preview.jpg" />

    <link rel="icon" type="image/x-icon" href="/assets/favicon-BwtegrMi.ico" />
    <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-DL4GKFdk.png" />
    <link rel="manifest" href="/site.webmanifest" />

    <script type="module" crossorigin src="/assets/index-DqJxd5nV.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/attractor-family-CqIaCYxi.js">
    <link rel="stylesheet" crossorigin href="/assets/index-BmF5XDjj.css">
  </head>
  <body>
    <div class="app-container">
      <aside class="side-panel">
        <header class="panel-header">
          <button class="back-btn" title="Back">
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="M19 12H5M12 19l-7-7 7-7" />
            </svg>
          </button>
          <h1>Rendering Settings</h1>
        </header>

        <div class="panel-content">
          <div class="panel-warning" aria-live="polite">
            <svg
              class="warning-icon"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path
                d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
              ></path>
              <line x1="12" y1="9" x2="12" y2="13"></line>
              <line x1="12" y1="17" x2="12.01" y2="17"></line>
            </svg>
            <span
              >Some fractals, or using a higher number of iterations, may cause your browser to
              become unresponsive.</span
            >
          </div>
          <div class="section" role="region" aria-labelledby="section-navigation-title">
            <button class="section-header" data-section="navigation">
              <svg
                class="section-icon"
                width="18"
                height="18"
                viewBox="0 0 100 100"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
                aria-hidden="true"
                role="img"
              >
                <path d="M21 32C9.459 32 0 41.43 0 52.94c0 4.46 1.424 8.605 3.835 12.012l14.603 25.244c2.045 2.672 3.405 2.165 5.106-.14l16.106-27.41c.325-.59.58-1.216.803-1.856A20.668 20.668 0 0 0 42 52.94C42 41.43 32.544 32 21 32zm0 9.812c6.216 0 11.16 4.931 11.16 11.129c0 6.198-4.944 11.127-11.16 11.127c-6.215 0-11.16-4.93-11.16-11.127c0-6.198 4.945-11.129 11.16-11.129z" />
                <path d="M88.209 37.412c-2.247.05-4.5.145-6.757.312l.348 5.532a126.32 126.32 0 0 1 6.513-.303zm-11.975.82c-3.47.431-6.97 1.045-10.43 2.032l1.303 5.361c3.144-.896 6.402-1.475 9.711-1.886zM60.623 42.12a24.52 24.52 0 0 0-3.004 1.583l-.004.005l-.006.002c-1.375.866-2.824 1.965-4.007 3.562c-.857 1.157-1.558 2.62-1.722 4.35l5.095.565c.038-.406.246-.942.62-1.446h.002v-.002c.603-.816 1.507-1.557 2.582-2.235l.004-.002a19.64 19.64 0 0 1 2.388-1.256zM58 54.655l-3.303 4.235c.783.716 1.604 1.266 2.397 1.726l.01.005l.01.006c2.632 1.497 5.346 2.342 7.862 3.144l1.446-5.318c-2.515-.802-4.886-1.576-6.918-2.73c-.582-.338-1.092-.691-1.504-1.068zm13.335 5.294l-1.412 5.327l.668.208l.82.262c2.714.883 5.314 1.826 7.638 3.131l2.358-4.92c-2.81-1.579-5.727-2.611-8.538-3.525l-.008-.002l-.842-.269zm14.867 7.7l-3.623 3.92c.856.927 1.497 2.042 1.809 3.194l.002.006l.002.009c.372 1.345.373 2.927.082 4.525l5.024 1.072c.41-2.256.476-4.733-.198-7.178c-.587-2.162-1.707-4.04-3.098-5.548zM82.72 82.643a11.84 11.84 0 0 1-1.826 1.572h-.002c-1.8 1.266-3.888 2.22-6.106 3.04l1.654 5.244c2.426-.897 4.917-1.997 7.245-3.635l.006-.005l.003-.002a16.95 16.95 0 0 0 2.639-2.287zm-12.64 6.089c-3.213.864-6.497 1.522-9.821 2.08l.784 5.479c3.421-.575 6.856-1.262 10.27-2.18zm-14.822 2.836c-3.346.457-6.71.83-10.084 1.148l.442 5.522c3.426-.322 6.858-.701 10.285-1.17zm-15.155 1.583c-3.381.268-6.77.486-10.162.67l.256 5.536c3.425-.185 6.853-.406 10.28-.678zm-15.259.92c-2.033.095-4.071.173-6.114.245l.168 5.541a560.1 560.1 0 0 0 6.166-.246z" fill-rule="evenodd" />
              </svg>
              <span
                id="section-navigation-title"
                class="section-title"
                role="heading"
                aria-level="2"
              >
                Getting Started
              </span>
              <svg
                class="chevron"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M6 9l6 6 6-6" />
              </svg>
            </button>
            <div class="section-content active">
              <div class="control">
                <div class="control-label">
                  What is a fractal (<a
                    href="https://en.wiktionary.org/wiki/ELI5"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="eli5-link"
                    >ELI5</a
                  >)
                </div>
                <p class="navigation-description">
                  A fractal is a shape or pattern that repeats itself at every size. When you zoom
                  in, you keep finding smaller versions of the same pattern, almost like the shape
                  goes on forever. It is a never ending pattern that keeps looking similar no matter
                  how close you get.
                </p>
              </div>
              <div class="control">
                <div class="control-label">Key points</div>
                <ul class="navigation-list">
                  <li>A fractal repeats its pattern again and again.</li>
                  <li>Zooming in reveals smaller versions of the same shape.</li>
                  <li>The pattern can go on forever in theory.</li>
                  <li>Examples in nature include trees, ferns and coastlines.</li>
                </ul>
                <p class="navigation-description">
                  For more detailed information on fractals view the
                  <a
                    href="https://en.wikipedia.org/wiki/Fractal"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="eli5-link"
                    >Fractals Wikipedia page</a
                  >.
                </p>
              </div>
              <div class="control">
                <div class="control-label">Fractal Wallpapers</div>
                <p class="navigation-description">
                  You can use this application to generate custom fractal wallpapers: explore with
                  the controls below until you find a fractal view you like, switch to fullscreen
                  mode, then use the screenshot button to download a full-size PNG that you can set
                  as your wallpaper.
                </p>
              </div>
              <div class="control">
                <div class="control-label">Pan & Zoom Controls</div>
                <ul class="navigation-list">
                  <li><strong>Pan</strong>: Click and drag on the fractal (mouse left button)</li>
                  <li>
                    <strong>Select Area</strong>: Hold <strong>Shift</strong> and drag to draw a
                    selection box, then release to zoom to that area
                  </li>
                  <li>
                    <strong>Double-Click Zoom</strong>: Double-click anywhere on the fractal to zoom
                    in around that point
                  </li>
                  <li>
                    <strong>Precise Coordinate Zoom</strong>: Hold <strong>Ctrl</strong> to show
                    live coordinates under the cursor, then single-click to zoom into that exact
                    point
                  </li>
                  <li>
                    <strong>Scroll Wheel Zoom</strong>: Use the mouse wheel to zoom in and out
                    smoothly around the cursor
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="section" role="region" aria-labelledby="section-settings-title">
            <button class="section-header" data-section="settings">
              <svg
                class="section-icon"
                width="18"
                height="18"
                viewBox="0 0 389.663 389.663"
                fill="currentColor"
              >
                <path
                  d="M194.832,132.997c-34.1,0-61.842,27.74-61.842,61.838c0,34.1,27.742,61.841,61.842,61.841
                  c34.099,0,61.841-27.741,61.841-61.841C256.674,160.737,228.932,132.997,194.832,132.997z M194.832,226.444
                  c-17.429,0-31.608-14.182-31.608-31.61c0-17.428,14.18-31.605,31.608-31.605c17.429,0,31.607,14.178,31.607,31.605
                  C226.439,212.264,212.262,226.444,194.832,226.444z"
                />
                <path
                  d="M385.23,150.784c-2.816-2.812-6.714-4.427-10.688-4.427l-49.715,0.015l-3.799-9.194l35.149-35.155
                  c5.892-5.894,5.892-15.483,0-21.377l-47.166-47.162c-2.688-2.691-6.586-4.235-10.688-4.235c-4.103,0-7.996,1.544-10.687,4.235
                  L252.48,68.639l-9.188-3.797V15.116C243.292,6.781,236.511,0,228.177,0h-66.694c-8.335,0-15.116,6.78-15.116,15.115v49.716
                  l-9.194,3.801l-35.151-35.135c-2.855-2.854-6.65-4.426-10.686-4.426c-4.036,0-7.832,1.572-10.688,4.427L33.476,80.67
                  c-2.813,2.814-4.427,6.711-4.427,10.688c0,3.984,1.613,7.882,4.427,10.693l35.151,35.127l-3.811,9.188l-49.697,0.005
                  C6.781,146.372,0,153.153,0,161.488v66.708c0,4.035,1.573,7.832,4.431,10.689c2.817,2.815,6.713,4.432,10.688,4.432l49.708-0.021
                  l3.799,9.195l-35.133,35.149c-5.894,5.896-5.894,15.484,0,21.378l47.161,47.172c2.692,2.69,6.591,4.233,10.693,4.233
                  c4.105,0,8.002-1.543,10.69-4.233l35.136-35.162l9.186,3.815l0.008,49.691c0,8.338,6.781,15.121,15.116,15.121l66.708,0.006h0.162
                  c8.336,0,15.116-6.781,15.116-15.117c0-0.721-0.049-1.444-0.147-2.151l-0.015-0.207l-0.013-47.355l9.195-3.801l35.149,35.139
                  c2.855,2.857,6.65,4.432,10.688,4.432c4.035,0,7.83-1.573,10.686-4.432l47.172-47.166c2.855-2.854,4.429-6.649,4.429-10.688
                  c0-4.045-1.572-7.847-4.429-10.699l-35.157-35.125l3.809-9.195h49.707c8.336,0,15.119-6.78,15.119-15.114v-66.708
                  C389.662,157.438,388.088,153.641,385.23,150.784z M359.428,213.063h-44.696c-6.134,0-11.615,3.662-13.966,9.328l-11.534,27.865
                  c-2.351,5.672-1.062,12.141,3.274,16.482l31.609,31.58l-25.789,25.789l-31.605-31.603c-2.854-2.853-6.649-4.422-10.69-4.422
                  c-1.992,0-3.938,0.388-5.785,1.147l-27.854,11.537c-5.666,2.349-9.327,7.832-9.327,13.972l0.008,44.688l-36.468-0.01
                  l-0.008-44.686c0-6.136-3.661-11.615-9.328-13.966l-27.856-11.536c-1.854-0.768-3.806-1.155-5.802-1.155
                  c-4.036,0-7.829,1.571-10.677,4.43l-31.586,31.615L65.559,298.33l31.592-31.604c4.339-4.343,5.625-10.81,3.275-16.478
                  L88.89,222.393c-2.352-5.666-7.833-9.328-13.965-9.328l-44.688,0.01v-36.466l44.688-0.01c6.134,0,11.615-3.662,13.965-9.328
                  l11.536-27.854c2.349-5.676,1.063-12.146-3.275-16.482L65.548,91.359l25.79-25.796l31.599,31.582
                  c2.856,2.857,6.658,4.43,10.704,4.43c1.988,0,3.928-0.385,5.764-1.144l27.861-11.524c5.671-2.351,9.336-7.834,9.336-13.97V30.231
                  h36.459v44.705c0,6.137,3.662,11.618,9.328,13.965l27.855,11.534c1.848,0.766,3.795,1.153,5.789,1.153
                  c4.039,0,7.832-1.572,10.684-4.429l31.607-31.617l25.789,25.789l-31.609,31.607c-4.336,4.339-5.621,10.806-3.274,16.478
                  l11.534,27.858c2.351,5.669,7.832,9.332,13.966,9.332l44.696-0.01L359.428,213.063L359.428,213.063z"
                />
              </svg>
              <span id="section-settings-title" class="section-title" role="heading" aria-level="2">
                Settings
              </span>
              <svg
                class="chevron"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M6 9l6 6 6-6" />
              </svg>
            </button>
            <div class="section-content active">
              <div class="control">
                <label class="checkbox-label">
                  <input type="checkbox" id="auto-render" class="styled-checkbox" />
                  <div class="checkbox-content">
                    <span class="checkbox-text">Auto-Render on Change</span>
                    <span class="checkbox-description"
                      >Automatically update the fractal when settings change</span
                    >
                  </div>
                </label>
              </div>

              <div class="control">
                <label class="control-label">Coordinates</label>
                <div class="coordinate-display">
                  <div class="coordinate-row">
                    <span class="coordinate-label">Zoom:</span>
                    <span class="coordinate-value" id="coord-zoom">1.0</span>
                  </div>
                  <div class="coordinate-row">
                    <span class="coordinate-label">Offset X:</span>
                    <span class="coordinate-value" id="coord-offset-x">0.0</span>
                  </div>
                  <div class="coordinate-row">
                    <span class="coordinate-label">Offset Y:</span>
                    <span class="coordinate-value" id="coord-offset-y">0.0</span>
                  </div>
                  <button
                    class="copy-coords-btn"
                    id="copy-coords-btn"
                    title="Copy coordinates to clipboard"
                  >
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                    Copy Coordinates
                  </button>
                  <div class="control-description">
                    Copy these coordinates to set initial render position
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="section" role="region" aria-labelledby="section-fractal-title">
            <button class="section-header" data-section="fractal">
              <svg
                class="section-icon"
                width="18"
                height="18"
                viewBox="144 144 512 512"
                fill="currentColor"
              >
                <g>
                  <path d="m542.2 565.88h21.965l-10.953-21.965z" />
                  <path d="m592 565.88-10.941-21.965-11.02 21.965z" />
                  <path d="m578.12 541.68h-21.973l10.953 21.961z" />
                  <path d="m605.95 593.73-11.016-21.969-10.945 21.969z" />
                  <path d="m578.12 538.05-11.02-21.98-10.953 21.98z" />
                  <path d="m483.59 460.41-10.957 21.977h21.961z" />
                  <path d="m497.54 488.26-11.004 21.949h21.965z" />
                  <path d="m458.7 510.21h21.965l-10.953-21.949z" />
                  <path d="m494.6 486.01h-21.961l10.957 21.969z" />
                  <path d="m564.16 510.21-10.953-21.949-11.012 21.949z" />
                  <path d="m355.42 541.68h-21.961l11.008 21.961z" />
                  <path d="m358.35 543.92-10.945 21.965h21.961z" />
                  <path d="m486.54 454.54h21.965l-10.961-21.961z" />
                  <path d="m319.55 565.88h21.98l-11.008-21.965z" />
                  <path d="m263.89 621.56h21.973l-11.02-21.965z" />
                  <path d="m271.91 593.73-10.953-21.969-11.012 21.969z" />
                  <path d="m249.95 597.36 11.012 21.961 10.953-21.961z" />
                  <path d="m236.06 621.56h21.961l-11.012-21.965z" />
                  <path d="m305.62 597.36 11 21.961 10.973-21.961z" />
                  <path d="m333.46 538.05h21.961l-10.953-21.98z" />
                  <path d="m319.55 621.56h21.973l-11-21.965z" />
                  <path d="m327.6 593.73-10.973-21.969-11.012 21.969z" />
                  <path d="m291.74 621.56h21.941l-10.992-21.965z" />
                  <path d="m247.01 488.26-10.949 21.949h21.961z" />
                  <path d="m233.12 516.07-11.008 21.98h21.957z" />
                  <path d="m271.91 486.01h-21.965l11.012 21.969z" />
                  <path d="m260.96 460.41-11.012 21.977h21.965z" />
                  <path d="m244.07 541.68h-21.957l11.008 21.961z" />
                  <path d="m263.89 510.21h21.973l-11.02-21.949z" />
                  <path d="m194.28 597.36 11.008 21.961 10.965-21.961z" />
                  <path d="m383.27 593.73-10.965-21.969-11.012 21.969z" />
                  <path d="m208.22 621.56h21.973l-11.016-21.965z" />
                  <path d="m258.02 565.88-11.012-21.965-10.949 21.965z" />
                  <path d="m180.4 621.56h21.949l-11.012-21.957z" />
                  <path d="m219.18 543.92-10.957 21.965h21.973z" />
                  <path d="m205.29 571.76-11.008 21.969h21.973z" />
                  <path d="m550.27 593.73-11.012-21.969-10.949 21.969z" />
                  <path d="m514.38 621.56h21.945l-10.949-21.965z" />
                  <path d="m528.31 597.36 10.949 21.961 11.012-21.961z" />
                  <path d="m472.64 597.36 10.957 21.961 11.004-21.961z" />
                  <path d="m486.54 621.56h21.965l-10.961-21.965z" />
                  <path d="m570.04 621.56h21.961l-10.941-21.965z" />
                  <path d="m347.4 621.56h21.961l-11.016-21.965z" />
                  <path d="m583.99 597.36 10.945 21.961 11.016-21.961z" />
                  <path d="m597.87 621.56h21.977l-10.961-21.965z" />
                  <path d="m458.7 621.56h21.965l-10.953-21.965z" />
                  <path d="m542.2 621.56h21.965l-10.953-21.965z" />
                  <path d="m469.71 543.92-11.012 21.965h21.965z" />
                  <path d="m430.86 565.88h21.973l-10.965-21.965z" />
                  <path d="m466.77 541.68h-21.973l10.965 21.961z" />
                  <path d="m375.23 621.56h21.93l-10.961-21.957z" />
                  <path d="m361.29 597.36 11.012 21.961 10.965-21.961z" />
                  <path d="m416.97 597.36 10.941 21.961 11.016-21.961z" />
                  <path d="m494.6 593.73-11.004-21.969-10.957 21.969z" />
                  <path d="m430.86 621.56h21.973l-10.965-21.965z" />
                  <path d="m444.8 538.05h21.973l-11.008-21.98z" />
                  <path d="m403.03 621.56h21.957l-10.949-21.965z" />
                  <path d="m438.93 593.73-11.016-21.969-10.941 21.969z" />
                  <path d="m305.61 482.38h21.984l-10.973-21.977z" />
                  <path d="m480.66 343.22-10.953-21.969-11.012 21.969z" />
                  <path d="m452.83 287.55-10.965-21.973-11.008 21.973z" />
                  <path d="m494.6 371.06-11.004-21.969-10.957 21.969z" />
                  <path d="m466.77 315.39-11.008-21.969-10.965 21.969z" />
                  <path d="m469.71 376.93-11.012 21.969h21.965z" />
                  <path d="m494.6 374.69h-21.961l10.957 21.969z" />
                  <path d="m424.99 231.88-10.949-21.973-11.008 21.973z" />
                  <path d="m400.09 182.1-10.969 21.945h21.973z" />
                  <path d="m411.1 207.68h-21.973l10.969 21.973z" />
                  <path d="m466.77 319.02h-21.973l10.965 21.973z" />
                  <path d="m403.03 287.55h21.957l-10.949-21.973z" />
                  <path d="m438.93 259.72-11.016-21.961-10.941 21.961z" />
                  <path d="m438.93 263.34h-21.957l10.941 21.977z" />
                  <path d="m525.38 488.26-10.996 21.949h21.945z" />
                  <path d="m550.27 482.38-11.012-21.977-10.949 21.977z" />
                  <path d="m522.44 426.71-11-21.949-10.965 21.949z" />
                  <path d="m550.27 486.01h-21.961l10.949 21.969z" />
                  <path d="m536.32 454.54-10.949-21.961-10.996 21.961z" />
                  <path d="m522.44 430.34h-21.965l10.965 21.957z" />
                  <path d="m386.2 209.92-10.969 21.965h21.93z" />
                  <path d="m430.86 343.22h21.973l-10.965-21.969z" />
                  <path d="m441.86 376.93-11.008 21.969h21.973z" />
                  <path d="m427.91 349.09-10.941 21.969h21.957z" />
                  <path d="m508.5 398.9-10.961-21.969-11.004 21.969z" />
                  <path d="m403.03 398.9h21.957l-10.949-21.969z" />
                  <path d="m438.93 374.69h-21.957l10.941 21.969z" />
                  <path d="m319.55 398.9h21.98l-11.008-21.969z" />
                  <path d="m316.62 349.09-11.012 21.969h21.984z" />
                  <path d="m288.81 404.77-11.02 21.949h21.965z" />
                  <path d="m302.69 376.93-10.949 21.969h21.953z" />
                  <path d="m327.6 374.69h-21.984l11.012 21.969z" />
                  <path d="m330.53 488.26-10.973 21.949h21.973z" />
                  <path d="m274.85 432.58-10.953 21.961h21.973z" />
                  <path d="m327.6 486.01h-21.973l11 21.969z" />
                  <path d="m299.75 430.34h-21.965l11.02 21.957z" />
                  <path d="m330.53 321.25-10.973 21.969h21.98z" />
                  <path d="m313.68 454.54-10.992-21.961-10.949 21.961z" />
                  <path d="m291.74 510.21h21.941l-10.992-21.949z" />
                  <path d="m383.27 374.69h-21.977l11.012 21.969z" />
                  <path d="m355.42 319.02h-21.961l11.008 21.973z" />
                  <path d="m358.35 265.58-10.945 21.973h21.961z" />
                  <path d="m375.23 287.55h21.93l-10.961-21.969z" />
                  <path d="m372.3 237.75-11.012 21.969h21.977z" />
                  <path d="m383.27 263.34h-21.977l11.012 21.977z" />
                  <path d="m386.2 376.93-10.969 21.965h21.93z" />
                  <path d="m344.47 293.42-11.008 21.969h21.961z" />
                  <path d="m372.3 349.09-11.012 21.969h21.977z" />
                  <path d="m347.4 343.22h21.961l-11.016-21.969z" />
                  <path d="m347.4 398.9h21.961l-11.016-21.969z" />
                </g>
              </svg>
              <span id="section-fractal-title" class="section-title" role="heading" aria-level="2">
                Fractal
              </span>
              <svg
                class="chevron"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M6 9l6 6 6-6" />
              </svg>
            </button>
            <div class="section-content active">
              <div class="control">
                <label for="fractal-type">Type</label>
                <select id="fractal-type" class="styled-select">
                  <optgroup label="Mandelbrot Family">
                    <option value="mandelbrot" selected>Mandelbrot Set</option>
                    <option value="celtic-mandelbrot">Celtic Mandelbrot</option>
                    <option value="multibrot">Multibrot Set</option>
                    <option value="mutant-mandelbrot">Mutant Mandelbrot</option>
                    <option value="phoenix-mandelbrot">Phoenix Mandelbrot</option>
                    <option value="burning-ship">Burning Ship</option>
                    <option value="tricorn">Tricorn</option>
                    <option value="nebulabrot">Nebulabrot</option>
                    <option value="buddhabrot">Buddhabrot</option>
                  </optgroup>
                  <optgroup label="Julia Sets">
                    <option value="julia">Julia Set</option>
                    <option value="julia-snakes">Julia Snakes</option>
                    <option value="multibrot-julia">Multibrot Julia Sets</option>
                    <option value="burning-ship-julia">Burning Ship Julia Set</option>
                    <option value="tricorn-julia">Tricorn Julia Set</option>
                    <option value="phoenix-julia">Phoenix Julia Set</option>
                    <option value="lambda-julia">Lambda Julia Set</option>
                    <option value="hybrid-julia">Hybrid Julia Set</option>
                    <option value="pickover-stalks">Pickover Stalks</option>
                    <option value="biomorphs">Biomorphs</option>
                  </optgroup>
                  <optgroup label="Sierpinski Family">
                    <option value="sierpinski">Sierpinski Triangle</option>
                    <option value="sierpinski-arrowhead">Sierpinski Arrowhead Curve</option>
                    <option value="sierpinski-carpet">Sierpinski Carpet</option>
                    <option value="sierpinski-gasket">Generalised Sierpinski Gasket</option>
                    <option value="sierpinski-hexagon">Sierpinski Hexagon</option>
                    <option value="sierpinski-lsystem">Sierpinski L-System</option>
                    <option value="sierpinski-pentagon">Sierpinski Pentagon</option>
                    <option value="sierpinski-tetrahedron">Sierpinski Tetrahedron (2D Projection)</option>
                    <option value="menger-carpet">Menger Carpet</option>
                    <option value="quadrilateral-subdivision">Quadrilateral Subdivision</option>
                    <option value="recursive-polygon-splitting">Recursive Polygon Splitting</option>
                    <option value="triangular-subdivision">Triangular Subdivision</option>
                  </optgroup>
                  <optgroup label="Koch Family">
                    <option value="fractal-islands">Fractal Islands</option>
                    <option value="koch">Koch Snowflake</option>
                    <option value="quadratic-koch">Quadratic Koch Island</option>
                  </optgroup>
                  <optgroup label="Cantor Family">
                    <option value="cantor">Cantor Set</option>
                    <option value="cantor-dust-base-expansion">Cantor Dust (Base Expansion)</option>
                    <option value="cantor-dust-circular">Cantor Dust (Circular)</option>
                    <option value="fat-cantor">Fat Cantor Set</option>
                    <option value="smith-volterra-cantor">Smith-Volterra-Cantor Set</option>
                    <option value="random-cantor">Randomised Cantor Set</option>
                  </optgroup>
                  <optgroup label="Dragon Curves">
                    <option value="binary-dragon">Binary Dragon</option>
                    <option value="dragon-lsystem">Dragon L-System</option>
                    <option value="folded-paper-dragon">Folded Paper Dragon</option>
                    <option value="heighway-dragon">Heighway Dragon</option>
                    <option value="levy-dragon">Lévy Dragon</option>
                    <option value="terdragon">Terdragon</option>
                    <option value="twindragon">Twindragon</option>
                  </optgroup>
                  <optgroup label="Space-Filling Curves">
                    <option value="gosper-curve">Gosper Curve</option>
                    <option value="hilbert-curve">Hilbert Curve</option>
                    <option value="levy-c-curve">Lévy C Curve</option>
                    <option value="moore-curve">Moore Curve</option>
                    <option value="peano-curve">Peano Curve</option>
                    <option value="sierpinski-curve">Sierpiński Curve</option>
                  </optgroup>
                  <optgroup label="Self-Similar Curves">
                    <option value="de-rham-curve">De Rham Curve</option>
                  </optgroup>
                  <optgroup label="Nowhere Differentiable Functions">
                    <option value="weierstrass">Weierstrass Function</option>
                    <option value="takagi">Takagi Function</option>
                    <option value="blancmange">Blancmange Curve</option>
                  </optgroup>
                  <optgroup label="Other Escape-Time Fractals">
                    <option value="buffalo">Buffalo</option>
                    <option value="popcorn">Popcorn</option>
                    <option value="spider-set">Spider Set</option>
                    <option value="magnet">Magnet Fractal</option>
                  </optgroup>
                  <optgroup label="Fractal Dimension Plots">
                    <option value="fractal-dimension-plot">Fractal Dimension Plot</option>
                  </optgroup>
                  <optgroup label="Root-Finding Fractals">
                    <option value="newton">Newton Fractal</option>
                    <option value="halley">Halley Fractal</option>
                    <option value="nova">Nova Fractal</option>
                  </optgroup>
                  <optgroup label="Plant Family">
                    <option value="plant">Plant</option>
                    <option value="barnsley-fern">Barnsley Fern</option>
                    <option value="fractal-tree">Fractal Tree</option>
                  </optgroup>
                  <optgroup label="Tree Family">
                    <option value="pythagoras-tree">Pythagoras Tree</option>
                    <option value="pythagoras-tree-wide">Pythagoras Tree (Wide)</option>
                    <option value="pythagoras-tree-narrow">Pythagoras Tree (Narrow)</option>
                    <option value="binary-fractal-tree">Binary Fractal Tree</option>
                    <option value="ternary-fractal-tree">Ternary Fractal Tree</option>
                    <option value="quaternary-fractal-tree">Quaternary Fractal Tree</option>
                    <option value="lsystem-tree-oak">Oak Tree (L-System)</option>
                    <option value="lsystem-tree-pine">Pine Tree (L-System)</option>
                    <option value="fractal-canopy">Fractal Canopy</option>
                  </optgroup>
                  <optgroup label="Tilings">
                    <option value="domino-substitution">Domino Substitution</option>
                    <option value="pinwheel-tiling">Pinwheel Tiling</option>
                    <option value="snowflake-tiling">Snowflake Tiling</option>
                    <option value="amman-tiling">Amman Tiling</option>
                    <option value="penrose-substitution">Penrose Substitution</option>
                    <option value="rauzy">Rauzy</option>
                    <option value="chair-tiling">Chair Tiling</option>
                    <option value="rhombic-tiling">Rhombic Tiling</option>
                    <option value="aperiodic-tilings">Aperiodic Tilings</option>
                    <option value="substitution-tilings">Substitution Tilings</option>
                  </optgroup>
                  <optgroup label="Attractor Family">
                    <option value="lorenz-attractor">Lorenz Attractor</option>
                    <option value="rossler-attractor">Rössler Attractor</option>
                    <option value="lyapunov">Lyapunov Fractal</option>
                    <option value="chua-attractor">Chua Attractor</option>
                    <option value="ifs-spiral">IFS Spiral Attractor</option>
                    <option value="ifs-maple">IFS Maple Leaf Attractor</option>
                    <option value="ifs-tree">IFS Tree Attractor</option>
                  </optgroup>
                  <optgroup label="Noise Family">
                    <option value="perlin-noise">Perlin Noise</option>
                    <option value="simplex-noise">Simplex Noise</option>
                    <option value="fractional-brownian-motion">Fractional Brownian Motion</option>
                    <option value="random-midpoint-displacement">
                      Random Midpoint Displacement
                    </option>
                  </optgroup>
                  <optgroup label="Physics Family">
                    <option value="diffusion-limited-aggregation">
                      Diffusion Limited Aggregation
                    </option>
                    <option value="percolation-cluster">Percolation Cluster</option>
                    <option value="levy-flights">Lévy Flights</option>
                  </optgroup>
                  <optgroup label="Geometric Family">
                    <option value="apollonian-gasket">Apollonian Gasket</option>
                    <option value="carpenter-square">Carpenter Square</option>
                    <option value="cross">Cross Fractal</option>
                    <option value="box-variants">Box Fractal Variants</option>
                    <option value="minkowski-sausage">Minkowski Sausage</option>
                    <option value="cesaro">Cesàro Fractal</option>
                    <option value="recursive-circle-removal">Recursive Circle Removal</option>
                    <option value="rose">Rose Window</option>
                    <option value="menger-sponge">Menger Sponge</option>
                  </optgroup>
                  <optgroup label="Other Fractals">
                    <option value="h-tree">H-Tree</option>
                    <option value="h-tree-generalized">Generalized H-Tree</option>
                    <option value="vicsek">Vicsek Snowflake</option>
                    <option value="fractal-flame">Fractal Flame</option>
                  </optgroup>
                </select>
              </div>
            </div>
          </div>

          <div class="section" role="region" aria-labelledby="section-math-info-title">
            <button class="section-header" data-section="math-info">
              <svg
                class="section-icon"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M12 6.90909C10.8999 5.50893 9.20406 4.10877 5.00119 4.00602C4.72513 3.99928 4.5 4.22351 4.5 4.49965C4.5 6.54813 4.5 14.3034 4.5 16.597C4.5 16.8731 4.72515 17.09 5.00114 17.099C9.20405 17.2364 10.8999 19.0998 12 20.5M12 6.90909C13.1001 5.50893 14.7959 4.10877 18.9988 4.00602C19.2749 3.99928 19.5 4.21847 19.5 4.49461C19.5 6.78447 19.5 14.3064 19.5 16.5963C19.5 16.8724 19.2749 17.09 18.9989 17.099C14.796 17.2364 13.1001 19.0998 12 20.5M12 6.90909L12 20.5" />
                <path d="M19.2353 6H21.5C21.7761 6 22 6.22386 22 6.5V19.539C22 19.9436 21.5233 20.2124 21.1535 20.0481C20.3584 19.6948 19.0315 19.2632 17.2941 19.2632C14.3529 19.2632 12 21 12 21C12 21 9.64706 19.2632 6.70588 19.2632C4.96845 19.2632 3.64156 19.6948 2.84647 20.0481C2.47668 20.2124 2 19.9436 2 19.539V6.5C2 6.22386 2.22386 6 2.5 6H4.76471" />
              </svg>
              <span
                id="section-math-info-title"
                class="section-title"
                role="heading"
                aria-level="2"
              >
                Mathematical Information
              </span>
              <svg
                class="chevron"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M6 9l6 6 6-6" />
              </svg>
            </button>
            <div class="section-content" id="math-info-content">
              <div class="math-info-loading">Select a fractal to view mathematical information</div>
            </div>
          </div>

          <div class="section" role="region" aria-labelledby="section-iterations-title">
            <button class="section-header" data-section="iterations">
              <svg
                class="section-icon"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path
                  d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"
                />
              </svg>
              <span
                id="section-iterations-title"
                class="section-title"
                role="heading"
                aria-level="2"
              >
                Iterations
              </span>
              <svg
                class="chevron"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M6 9l6 6 6-6" />
              </svg>
            </button>
            <div class="section-content active">
              <div class="control">
                <label for="iterations">
                  <span>Count</span>
                  <span id="iterations-value" class="value">125</span>
                </label>
                <input
                  type="range"
                  id="iterations"
                  min="10"
                  max="400"
                  step="5"
                  value="125"
                  class="styled-slider"
                />
              </div>
            </div>
          </div>

          <div class="section" role="region" aria-labelledby="section-color-title">
            <button class="section-header" data-section="color">
              <svg
                class="section-icon"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <circle cx="13.5" cy="6.5" r=".5" fill="currentColor" />
                <circle cx="17.5" cy="10.5" r=".5" fill="currentColor" />
                <circle cx="8.5" cy="7.5" r=".5" fill="currentColor" />
                <circle cx="13.5" cy="13.5" r=".5" fill="currentColor" />
                <path
                  d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"
                />
              </svg>
              <span id="section-color-title" class="section-title" role="heading" aria-level="2">
                Color Scheme
              </span>
              <svg
                class="chevron"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M6 9l6 6 6-6" />
              </svg>
            </button>
            <div class="section-content active">
              <div class="control">
                <label for="color-scheme">Theme</label>
                <select id="color-scheme" class="styled-select">
                  <option value="classic">Classic</option>
                  <option value="fire">Fire</option>
                  <option value="ocean">Ocean</option>
                  <option value="rainbow">Rainbow</option>
                  <option value="rainbow-pastel">Rainbow Pastel</option>
                  <option value="rainbow-dark">Rainbow Dark</option>
                  <option value="rainbow-vibrant">Rainbow Vibrant</option>
                  <option value="rainbow-double">Rainbow Double</option>
                  <option value="rainbow-shifted">Rainbow Shifted</option>
                  <option value="monochrome">Monochrome</option>
                  <option value="forest">Forest</option>
                  <option value="sunset">Sunset</option>
                  <option value="purple">Purple</option>
                  <option value="cyan">Cyan</option>
                  <option value="gold">Gold</option>
                  <option value="ice">Ice</option>
                  <option value="neon">Neon</option>
                  <option value="cosmic">Cosmic</option>
                  <option value="aurora">Aurora</option>
                  <option value="coral">Coral</option>
                  <option value="autumn">Autumn</option>
                  <option value="midnight">Midnight</option>
                  <option value="emerald">Emerald</option>
                  <option value="rosegold">Rose Gold</option>
                  <option value="electric">Electric</option>
                  <option value="vintage">Vintage</option>
                  <option value="tropical">Tropical</option>
                  <option value="galaxy">Galaxy</option>
                  <option value="lava">Lava</option>
                  <option value="arctic">Arctic</option>
                  <option value="sakura">Sakura</option>
                  <option value="volcanic">Volcanic</option>
                  <option value="mint">Mint</option>
                  <option value="sunrise">Sunrise</option>
                  <option value="steel">Steel</option>
                  <option value="prism">Prism</option>
                  <option value="mystic">Mystic</option>
                  <option value="amber">Amber</option>
                </select>
              </div>
            </div>
          </div>

          <div
            class="section"
            id="julia-controls"
            role="region"
            aria-labelledby="section-julia-title"
          >
            <button class="section-header" data-section="julia">
              <svg
                class="section-icon"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <circle cx="12" cy="12" r="10" />
                <circle cx="12" cy="12" r="6" />
                <circle cx="12" cy="12" r="2" />
              </svg>
              <span id="section-julia-title" class="section-title" role="heading" aria-level="2">
                Julia Parameters
              </span>
              <svg
                class="chevron"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M6 9l6 6 6-6" />
              </svg>
            </button>
            <div class="section-content active">
              <div class="control">
                <label for="julia-c-real">
                  <span>C (Real)</span>
                  <span id="julia-c-real-value" class="value">-0.7269</span>
                </label>
                <input
                  type="range"
                  id="julia-c-real"
                  min="-2"
                  max="2"
                  step="0.01"
                  value="-0.7269"
                  disabled
                  class="styled-slider"
                />
              </div>
              <div class="control">
                <label for="julia-c-imag">
                  <span>C (Imaginary)</span>
                  <span id="julia-c-imag-value" class="value">0.1889</span>
                </label>
                <input
                  type="range"
                  id="julia-c-imag"
                  min="-2"
                  max="2"
                  step="0.01"
                  value="0.1889"
                  disabled
                  class="styled-slider"
                />
              </div>
            </div>
          </div>

          <div class="section" id="2d-controls" role="region" aria-labelledby="section-scale-title">
            <button class="section-header" data-section="scale">
              <svg
                class="section-icon"
                width="18"
                height="18"
                viewBox="144 144 512 512"
                fill="currentColor"
              >
                <defs>
                  <clipPath id="scale-icon-clip">
                    <path d="m148.09 148.09h503.81v503.81h-503.81z" />
                  </clipPath>
                </defs>
                <g clip-path="url(#scale-icon-clip)">
                  <path
                    d="m624.84 148.09h-449.69c-7.1719 0.011719-14.051 2.8633-19.121 7.9375-5.0742 5.0703-7.9258 11.949-7.9375 19.121v449.69c0.011719 7.1719 2.8633 14.051 7.9375 19.121 5.0703 5.0742 11.949 7.9297 19.121 7.9375h449.69c7.1719-0.007813 14.051-2.8633 19.121-7.9375 5.0742-5.0703 7.9297-11.949 7.9375-19.121v-449.69c-0.007813-7.1719-2.8633-14.051-7.9375-19.121-5.0703-5.0742-11.949-7.9258-19.121-7.9375zm12.301 476.75c-0.011719 6.7891-5.5117 12.289-12.301 12.301h-449.69c-6.7891-0.011719-12.289-5.5117-12.297-12.301v-449.69c0.007812-6.7891 5.5078-12.289 12.297-12.297h449.69c6.7891 0.007812 12.289 5.5078 12.301 12.297z"
                  />
                </g>
                <path
                  d="m194.83 280.93c1.9609 0 3.8359-0.77734 5.2188-2.1602 1.3867-1.3867 2.1641-3.2617 2.1641-5.2188v-68.879c0-1.3594 1.1016-2.4609 2.4609-2.4609h68.879c4.0742 0 7.3789-3.3047 7.3789-7.3828 0-4.0742-3.3047-7.3789-7.3789-7.3789h-68.879c-4.5664 0.007813-8.9453 1.8203-12.172 5.0508-3.2305 3.2266-5.043 7.6055-5.0508 12.172v68.879c0 4.0742 3.3047 7.3789 7.3789 7.3789z"
                />
                <path
                  d="m605.16 519.06c-4.0781 0-7.3828 3.3047-7.3828 7.3789v68.883c0 0.65234-0.25781 1.2773-0.71875 1.7383s-1.0859 0.71875-1.7383 0.71875h-68.883c-4.0742 0-7.3789 3.3047-7.3789 7.3828 0 4.0742 3.3047 7.3789 7.3789 7.3789h68.883c4.5625-0.003907 8.9414-1.8203 12.168-5.0508 3.2305-3.2266 5.0469-7.6055 5.0508-12.168v-68.883c0-1.957-0.77734-3.832-2.1602-5.2188-1.3867-1.3828-3.2617-2.1602-5.2188-2.1602z"
                />
                <path
                  d="m421.16 361.62h-216.48c-4.5664 0.007812-8.9453 1.8242-12.172 5.0508-3.2305 3.2266-5.043 7.6055-5.0508 12.172v216.48c0.007813 4.5625 1.8203 8.9414 5.0508 12.168 3.2266 3.2305 7.6055 5.0469 12.172 5.0508h216.48c4.5625-0.003907 8.9414-1.8203 12.168-5.0508 3.2305-3.2266 5.0469-7.6055 5.0508-12.168v-216.48c-0.003906-4.5664-1.8203-8.9453-5.0508-12.172-3.2266-3.2266-7.6055-5.043-12.168-5.0508zm2.457 233.7c0 0.65234-0.25781 1.2773-0.71875 1.7383-0.46094 0.46094-1.0859 0.71875-1.7383 0.71875h-216.48c-1.3594 0-2.4609-1.0977-2.4609-2.457v-216.48c0-1.3594 1.1016-2.4609 2.4609-2.4609h216.48c0.65234 0 1.2773 0.25781 1.7383 0.71875 0.46094 0.46094 0.71875 1.0898 0.71875 1.7422z"
                />
                <path
                  d="m356.93 465.14c-1.375-2.9258-3.543-5.3984-6.2656-7.1406-2.7188-1.7422-5.875-2.6797-9.1055-2.6992h-0.17578c-3.1953-0.015625-6.3281 0.86719-9.0469 2.543s-4.9141 4.082-6.3359 6.9414l-20.871 41.562c-0.37109 0.72656-1.0742 1.2227-1.8828 1.3281-0.80469 0.10547-1.6133-0.19141-2.1602-0.79297l-10.098-11.387h0.003907c-3.6211-4.0742-8.957-6.1914-14.387-5.7148-5.4297 0.47656-10.312 3.4922-13.168 8.1367l-45.371 73.801c-1.4336 2.2773-1.5117 5.1562-0.19922 7.5117 1.3086 2.3516 3.793 3.8086 6.4883 3.793h177.12-0.003906c2.5352-0.003907 4.8867-1.3047 6.2383-3.4453 1.3516-2.1445 1.5117-4.8281 0.42578-7.1133zm-119.38 103.12 38.465-62.582c0.40625-0.66406 1.1055-1.0938 1.8789-1.1602 0.77734-0.070312 1.5391 0.23438 2.0547 0.81641l10.098 11.375c3.7891 4.2773 9.4531 6.3945 15.121 5.6523 5.668-0.73828 10.598-4.2422 13.16-9.3516l20.871-41.555h-0.003907c0.41016-0.85156 1.2812-1.3828 2.2266-1.3594 0.94531-0.011718 1.8047 0.53906 2.1914 1.3984l46.16 96.766z"
                />
                <path
                  d="m253.88 464.94c9.7852 0 19.172-3.8867 26.09-10.805 6.9219-6.9219 10.809-16.309 10.809-26.094 0-9.7852-3.8867-19.172-10.809-26.094-6.918-6.918-16.305-10.809-26.09-10.809-9.7891 0-19.172 3.8906-26.094 10.809-6.918 6.9219-10.809 16.309-10.809 26.094 0.011719 9.7812 3.9023 19.164 10.82 26.082s16.297 10.809 26.082 10.816zm0-59.039c5.8711 0 11.504 2.332 15.656 6.4844 4.1484 4.1523 6.4844 9.7852 6.4844 15.656 0 5.8711-2.3359 11.504-6.4844 15.656-4.1523 4.1523-9.7852 6.4844-15.656 6.4844s-11.504-2.332-15.656-6.4844c-4.1523-4.1523-6.4844-9.7852-6.4844-15.656 0.003906-5.8711 2.3398-11.5 6.4883-15.648 4.1523-4.1523 9.7812-6.4883 15.652-6.4922z"
                />
                <path
                  d="m605.16 187.45h-61.227c-4.0742 0-7.3789 3.3047-7.3789 7.3789 0 4.0781 3.3047 7.3828 7.3789 7.3828h43.406l-112.56 112.56v-43.402c0-4.0781-3.3008-7.3828-7.3789-7.3828-4.0742 0-7.3789 3.3047-7.3789 7.3828v61.223c0 4.0781 3.3047 7.3789 7.3789 7.3789h61.227c4.0742 0 7.3789-3.3008 7.3789-7.3789 0-4.0742-3.3047-7.3789-7.3789-7.3789h-43.406l112.56-112.56v43.406c0 4.0742 3.3047 7.3789 7.3828 7.3789 4.0742 0 7.3789-3.3047 7.3789-7.3789v-61.227c0-1.957-0.77734-3.832-2.1602-5.2148-1.3867-1.3867-3.2617-2.1641-5.2188-2.1641z"
                />
              </svg>
              <span id="section-scale-title" class="section-title" role="heading" aria-level="2">
                Scale
              </span>
              <svg
                class="chevron"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M6 9l6 6 6-6" />
              </svg>
            </button>
            <div class="section-content active">
              <div class="control">
                <label for="x-scale">
                  <span>X Axis</span>
                  <span id="x-scale-value" class="value">1.0</span>
                </label>
                <input
                  type="range"
                  id="x-scale"
                  min="0.1"
                  max="3"
                  step="0.1"
                  value="1.0"
                  class="styled-slider"
                  aria-label="X Axis scale"
                  aria-valuemin="0.1"
                  aria-valuemax="3"
                  aria-valuenow="1.0"
                  aria-valuetext="1.0"
                />
                <span
                  class="sr-only"
                  id="x-scale-announce"
                  aria-live="polite"
                  aria-atomic="true"
                ></span>
              </div>
              <div class="control">
                <label for="y-scale">
                  <span>Y Axis</span>
                  <span id="y-scale-value" class="value">1.0</span>
                </label>
                <input
                  type="range"
                  id="y-scale"
                  min="0.1"
                  max="3"
                  step="0.1"
                  value="1.0"
                  class="styled-slider"
                  aria-label="Y Axis scale"
                  aria-valuemin="0.1"
                  aria-valuemax="3"
                  aria-valuenow="1.0"
                  aria-valuetext="1.0"
                />
                <span
                  class="sr-only"
                  id="y-scale-announce"
                  aria-live="polite"
                  aria-atomic="true"
                ></span>
              </div>
            </div>
          </div>

          <div
            class="section"
            id="debug-section"
            role="region"
            aria-labelledby="section-debug-title"
          >
            <button class="section-header" data-section="debug">
              <svg
                class="section-icon"
                width="18"
                height="18"
                viewBox="144 144 512 512"
                fill="currentColor"
              >
                <g>
                  <path
                    d="m396.05 620.5c-79.691-2.3867-143.65-76.664-143.65-167.95 0-91.285 63.957-165.57 143.65-167.95v335.9zm7.9062-335.9c79.691 2.3867 143.65 76.664 143.65 167.95 0 91.285-63.957 165.57-143.65 167.95v-335.9zm64.641 266.47c0-9.5469-7.7383-17.289-17.285-17.289s-17.285 7.7383-17.285 17.289c0 9.5469 7.7383 17.285 17.285 17.285s17.285-7.7383 17.285-17.285zm0-197.05c0-9.5469-7.7383-17.285-17.285-17.285s-17.285 7.7383-17.285 17.285 7.7383 17.285 17.285 17.285 17.285-7.7383 17.285-17.285zm-17.285 81.238c-9.5469 0-17.285 7.7383-17.285 17.285s7.7383 17.289 17.285 17.289 17.285-7.7383 17.285-17.289c0-9.5469-7.7383-17.285-17.285-17.285zm62.27 64.77c0 9.5469-7.7383 17.285-17.285 17.285s-17.285-7.7383-17.285-17.285 7.7383-17.285 17.285-17.285 17.285 7.7383 17.285 17.285zm0-94.965c0-9.5469-7.7383-17.289-17.285-17.289s-17.285 7.7383-17.285 17.289c0 9.5469 7.7383 17.285 17.285 17.285s17.285-7.7383 17.285-17.285zm-182.18 146c0-9.5469 7.7383-17.289 17.285-17.289s17.285 7.7383 17.285 17.289c0 9.5469-7.7383 17.285-17.285 17.285s-17.285-7.7383-17.285-17.285zm0-197.05c0-9.5469 7.7383-17.285 17.285-17.285s17.285 7.7383 17.285 17.285-7.7383 17.285-17.285 17.285-17.285-7.7383-17.285-17.285zm17.285 81.238c9.5469 0 17.285 7.7383 17.285 17.285s-7.7383 17.289-17.285 17.289-17.285-7.7383-17.285-17.289c0-9.5469 7.7383-17.285 17.285-17.285zm-62.27 64.77c0 9.5469 7.7383 17.285 17.285 17.285s17.289-7.7383 17.289-17.285-7.7383-17.285-17.289-17.285c-9.5469 0-17.285 7.7383-17.285 17.285zm0-94.965c0-9.5469 7.7383-17.289 17.285-17.289s17.289 7.7383 17.289 17.289c0 9.5469-7.7383 17.285-17.289 17.285-9.5469 0-17.285-7.7383-17.285-17.285z"
                    fill-rule="evenodd"
                  />
                  <path
                    d="m348.93 230.77c0.085937 4.3477 3.6797 7.8047 8.0312 7.7227 4.3477-0.085938 7.8047-3.6797 7.7227-8.0312-0.125-6.3789-2.7305-17.305-11.766-25.844-5.8945-5.5703-14.449-10.133-26.691-11.66-4.332-0.52734-8.2734 2.5547-8.8008 6.8867-0.52734 4.332 2.5547 8.2734 6.8867 8.8008 8.4492 1.0547 14.09 3.957 17.797 7.4609 5.2422 4.957 6.7539 11.105 6.8242 14.664z"
                  />
                  <path
                    d="m435.32 230.46c-0.085937 4.3477 3.3711 7.9453 7.7227 8.0312 4.3477 0.085937 7.9453-3.3711 8.0312-7.7227 0.070313-3.5586 1.5781-9.707 6.8242-14.664 3.707-3.5039 9.3516-6.4062 17.797-7.4609 4.332-0.52734 7.418-4.4688 6.8867-8.8008-0.52734-4.332-4.4688-7.418-8.8008-6.8867-12.242 1.5312-20.797 6.0898-26.691 11.66-9.0312 8.5391-11.637 19.465-11.766 25.848z"
                  />
                  <path
                    d="m197.45 382.5c-2.7305 3.3945-2.1875 8.3594 1.2031 11.086 3.3945 2.7305 8.3594 2.1914 11.086-1.2031 0.085937-0.10938 30.418-38.512 62.68-12.172 3.3789 2.7461 8.3398 2.2344 11.086-1.1445s2.2344-8.3398-1.1445-11.086c-44.676-36.469-84.801 14.375-84.918 14.52z"
                  />
                  <path
                    d="m180.37 459.19c-2.7305 3.3945-2.1914 8.3594 1.2031 11.086 3.3945 2.7305 8.3594 2.1914 11.086-1.2031 0.085938-0.10937 30.418-38.512 62.68-12.172 3.3789 2.7461 8.3398 2.2344 11.086-1.1445s2.2344-8.3398-1.1445-11.086c-44.676-36.469-84.801 14.375-84.918 14.52z"
                  />
                  <path
                    d="m196.38 537.25c-2.7305 3.3945-2.1914 8.3594 1.2031 11.086 3.3945 2.7305 8.3594 2.1875 11.086-1.2031 0.085937-0.10938 30.418-38.512 62.684-12.172 3.3789 2.7461 8.3398 2.2344 11.086-1.1445s2.2344-8.3398-1.1445-11.086c-44.676-36.469-84.801 14.375-84.918 14.52z"
                  />
                  <path
                    d="m590.26 392.38c2.7305 3.3945 7.6953 3.9336 11.086 1.2031 3.3945-2.7305 3.9336-7.6914 1.2031-11.086-0.11719-0.14453-40.242-50.992-84.918-14.52-3.3789 2.7461-3.8906 7.7109-1.1445 11.086 2.7461 3.3789 7.7109 3.8906 11.086 1.1445 32.266-26.34 62.594 12.062 62.684 12.172z"
                  />
                  <path
                    d="m607.34 469.07c2.7305 3.3945 7.6914 3.9336 11.086 1.2031 3.3945-2.7305 3.9336-7.6914 1.2031-11.086-0.11719-0.14453-40.242-50.992-84.918-14.52-3.3789 2.7461-3.8906 7.7109-1.1445 11.086 2.7461 3.3789 7.7109 3.8906 11.086 1.1445 32.266-26.34 62.594 12.062 62.68 12.172z"
                  />
                  <path
                    d="m591.32 547.13c2.7305 3.3945 7.6953 3.9336 11.086 1.2031 3.3945-2.7305 3.9336-7.6914 1.2031-11.086-0.11719-0.14453-40.242-50.992-84.918-14.52-3.3789 2.7461-3.8906 7.7109-1.1445 11.086 2.7461 3.3789 7.7109 3.8906 11.086 1.1445 32.266-26.336 62.594 12.062 62.684 12.172z"
                  />
                  <path
                    d="m486.88 179.5c10.828 0 19.602 8.7773 19.602 19.602 0 10.824-8.7734 19.602-19.602 19.602s-19.602-8.7773-19.602-19.602c0-10.828 8.7773-19.602 19.602-19.602z"
                    fill-rule="evenodd"
                  />
                  <path
                    d="m313.12 179.5c10.824 0 19.602 8.7773 19.602 19.602 0 10.824-8.7773 19.602-19.602 19.602-10.828 0-19.602-8.7773-19.602-19.602 0-10.828 8.7773-19.602 19.602-19.602z"
                    fill-rule="evenodd"
                  />
                  <path
                    d="m482.25 303.21c1.082-45.508-35.359-84.852-82.246-84.852-15.965 0-30.719 4.4922-43.195 12.207-24.383 15.078-40.07 42.469-39.105 72.684 8.3164-5.8789 17.23-10.941 26.68-15.031 16.301-7.0586 33.676-10.988 51.434-11.52l0.23828-0.007813v-0.23828l3.9531 0.11719 3.9531-0.11719v0.23828l0.23828 0.007813c17.762 0.53125 35.133 4.4609 51.434 11.52 9.4258 4.082 18.32 9.1289 26.625 14.992z"
                    fill-rule="evenodd"
                  />
                </g>
              </svg>
              <span id="section-debug-title" class="section-title" role="heading" aria-level="2">
                Debug Info
              </span>
              <svg
                class="chevron"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M6 9l6 6 6-6" />
              </svg>
            </button>
            <div class="section-content">
              <div class="control">
                <label class="control-label">Fractal Name</label>
                <div class="debug-row">
                  <span class="debug-value" id="debug-fractal-name">-</span>
                  <button
                    class="debug-copy-btn"
                    id="debug-copy-fractal-name"
                    title="Copy fractal name"
                  >
                    <svg
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="control">
                <label class="control-label">Zoom</label>
                <div class="debug-row">
                  <span class="debug-value" id="debug-zoom">-</span>
                  <button class="debug-copy-btn" id="debug-copy-zoom" title="Copy zoom value">
                    <svg
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="control">
                <label class="control-label">Offset X</label>
                <div class="debug-row">
                  <span class="debug-value" id="debug-offset-x">-</span>
                  <button class="debug-copy-btn" id="debug-copy-offset-x" title="Copy X coordinate">
                    <svg
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="control">
                <label class="control-label">Offset Y</label>
                <div class="debug-row">
                  <span class="debug-value" id="debug-offset-y">-</span>
                  <button class="debug-copy-btn" id="debug-copy-offset-y" title="Copy Y coordinate">
                    <svg
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="control">
                <label class="control-label">Theme</label>
                <div class="debug-row">
                  <span class="debug-value" id="debug-theme">-</span>
                  <button class="debug-copy-btn" id="debug-copy-theme" title="Copy theme name">
                    <svg
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="control" style="margin-top: 12px">
                <button class="copy-coords-btn" id="debug-copy-all" title="Copy all debug info">
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                  >
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                  </svg>
                  Copy All Debug Info
                </button>
              </div>
            </div>
          </div>
        </div>
      </aside>

      <footer class="app-footer">
        <p>
          Created by
          <a href="https://nooshu.com" target="_blank" rel="noopener noreferrer">Matt Hobbs</a> with
          🤖 (AI) + ❤️, 2025.
        </p>
        <p>
          <a
            data-social="github"
            href="https://github.com/Nooshu/FractalAI"
            target="_blank"
            rel="noopener noreferrer"
            class="github-link"
          >
            <span data-social-label>Contribute</span>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path
                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
              />
            </svg>
          </a>
          <span class="footer-separator">•</span>
          <a
            data-social="mastodon"
            href="https://hachyderm.io/@TheRealNooshu"
            target="_blank"
            rel="me noopener noreferrer"
            class="github-link"
          >
            <span data-social-label>Mastodon</span>
            <svg width="16" height="16" viewBox="0 0 216.4144 232.00976" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <path fill="#2b90d9" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"/>
              <path fill="#fff" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"/>
            </svg>
          </a>
          <span class="footer-separator">•</span>
          <a
            data-social="bluesky"
            href="https://bsky.app/profile/therealnooshu.bsky.social"
            target="_blank"
            rel="noopener noreferrer"
            class="github-link"
          >
            <span data-social-label>Bluesky</span>
            <svg width="16" height="16" viewBox="0 0 600 530" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z" fill="#1185fe"/>
            </svg>
          </a>
        </p>
        <p class="footer-license">
          This work is licensed under a
          <a
            href="https://creativecommons.org/licenses/by/4.0/"
            target="_blank"
            rel="noopener noreferrer"
            >Creative Commons License (CC BY 4.0)</a
          >. v5.5.0 (<a
            href="https://github.com/Nooshu/FractalAI/commit/1d8b645"
            target="_blank"
            rel="noopener noreferrer"
            ><code>1d8b645</code></a
          >).
        </p>
        <div class="footer-share-description">
          Copy URL or seed to share this fractal setup (includes type, theme, zoom, iterations, and
          coordinates)
        </div>
        <button
          class="footer-share-btn"
          id="share-fractal-btn"
          title="Share fractal setup (copies URL with seed)"
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <circle cx="18" cy="5" r="3"></circle>
            <circle cx="6" cy="12" r="3"></circle>
            <circle cx="18" cy="19" r="3"></circle>
            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
          </svg>
          Share Fractal
        </button>
      </footer>

      <main class="canvas-area">
        <button id="show-panel-btn" class="show-panel-btn" title="Show Rendering Settings">
          <svg
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M5 12h14M12 5l7 7-7 7" />
          </svg>
        </button>

        <button id="show-right-panel-btn" class="show-right-panel-btn" title="Show Presets">
          <svg
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M5 12h14M12 5l-7 7 7 7" />
          </svg>
        </button>

        <div class="top-action-bar">
          <button id="update-fractal" class="top-action-btn" aria-label="Render fractal">
            <svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              aria-hidden="true"
            >
              <path
                d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"
              />
            </svg>
            Render
          </button>
          <button id="reset-view" class="top-action-btn" aria-label="Reset view to default">
            <svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              aria-hidden="true"
            >
              <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
              <path d="M3 3v5h5" />
            </svg>
            Reset View
          </button>
          <button id="screenshot" class="top-action-btn" aria-label="Take screenshot">
            <svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              aria-hidden="true"
            >
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
              <circle cx="8.5" cy="8.5" r="1.5"></circle>
              <polyline points="21 15 16 10 5 21"></polyline>
            </svg>
            Screenshot
          </button>
          <button id="video-export" class="top-action-btn" aria-label="Export video" title="Export fractal animation as video (requires WebCodecs API)" style="display: none;">
            <svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              aria-hidden="true"
            >
              <polygon points="23 7 16 12 23 17 23 7"></polygon>
              <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
            </svg>
            Export Video
          </button>
          <button id="fullscreen" class="top-action-btn" aria-label="Toggle fullscreen">
            <svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              aria-hidden="true"
            >
              <path
                d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
              />
            </svg>
            Fullscreen
          </button>
        </div>

        <div class="canvas-container" role="region" aria-label="Fractal canvas">
          <div id="loading-bar" class="loading-bar"></div>
          <canvas id="fractal-canvas"></canvas>
          <div id="selection-box" class="selection-box"></div>
          <div id="info-panel">
            <div id="fps">FPS: --</div>
          </div>
          <div id="fullscreen-controls" class="fullscreen-controls">
            <button
              id="fullscreen-screenshot"
              class="fullscreen-control-btn"
              title="Take Screenshot"
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <circle cx="8.5" cy="8.5" r="1.5"></circle>
                <polyline points="21 15 16 10 5 21"></polyline>
              </svg>
            </button>
            <button
              id="fullscreen-color-cycle"
              class="fullscreen-control-btn"
              title="Cycle Color Scheme"
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle>
                <circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle>
                <circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle>
                <circle cx="13.5" cy="13.5" r=".5" fill="currentColor"></circle>
                <path
                  d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"
                ></path>
              </svg>
              <canvas
                id="fullscreen-color-palette"
                class="fullscreen-color-palette"
                width="16"
                height="16"
              ></canvas>
            </button>
            <button
              id="fullscreen-auto-cycle"
              class="fullscreen-control-btn"
              title="Auto Cycle Color Schemes"
            >
              <svg
                id="fullscreen-auto-cycle-play"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <polygon points="8 6 16 12 8 18"></polygon>
              </svg>
              <svg
                id="fullscreen-auto-cycle-pause"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                style="display: none;"
              >
                <rect x="6" y="4" width="4" height="16"></rect>
                <rect x="14" y="4" width="4" height="16"></rect>
              </svg>
            </button>
            <button id="fullscreen-random" class="fullscreen-control-btn" title="Random View">
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="currentColor"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path
                  d="M12 2 L20 6 L12 10 L4 6 Z"
                  fill="currentColor"
                  opacity="0.9"
                  stroke="none"
                />
                <path
                  d="M20 6 L20 14 L12 18 L12 10 Z"
                  fill="currentColor"
                  opacity="0.6"
                  stroke="none"
                />
                <path
                  d="M4 6 L4 14 L12 18 L12 10 Z"
                  fill="currentColor"
                  opacity="0.75"
                  stroke="none"
                />
                <circle cx="12" cy="6" r="0.8" fill="rgba(0,0,0,0.3)" />
                <circle cx="9" cy="5" r="0.8" fill="rgba(0,0,0,0.3)" />
                <circle cx="15" cy="5" r="0.8" fill="rgba(0,0,0,0.3)" />
                <circle cx="9" cy="7" r="0.8" fill="rgba(0,0,0,0.3)" />
                <circle cx="15" cy="7" r="0.8" fill="rgba(0,0,0,0.3)" />
                <circle cx="16.5" cy="9" r="0.7" fill="rgba(0,0,0,0.4)" />
                <circle cx="16" cy="12" r="0.7" fill="rgba(0,0,0,0.4)" />
                <circle cx="15.5" cy="15" r="0.7" fill="rgba(0,0,0,0.4)" />
                <circle cx="8" cy="9" r="0.7" fill="rgba(0,0,0,0.4)" />
                <circle cx="8" cy="15" r="0.7" fill="rgba(0,0,0,0.4)" />
              </svg>
              <span id="fullscreen-random-number" class="fullscreen-random-number">0</span>
            </button>
            <div class="fullscreen-iterations-controls">
              <button
                id="fullscreen-iterations-up"
                class="fullscreen-control-btn"
                title="Increase Iterations"
              >
                <svg
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <line x1="12" y1="19" x2="12" y2="5"></line>
                  <polyline points="5 12 12 5 19 12"></polyline>
                </svg>
              </button>
              <span id="fullscreen-iterations-number" class="fullscreen-iterations-number"
                >125</span
              >
              <button
                id="fullscreen-iterations-down"
                class="fullscreen-control-btn"
                title="Decrease Iterations"
              >
                <svg
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <line x1="12" y1="5" x2="12" y2="19"></line>
                  <polyline points="19 12 12 19 5 12"></polyline>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </main>

      <aside class="right-panel hidden">
        <header class="panel-header">
          <h1>Presets</h1>
          <button class="right-back-btn" title="Close">
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="M5 12h14M12 5l7 7-7 7" />
            </svg>
          </button>
        </header>

        <div class="panel-content">
          <div class="section" role="region" aria-labelledby="section-exif-editor-title">
            <button class="section-header" data-section="exif-editor">
              <svg
                class="section-icon"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14,2 14,8 20,8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
                <polyline points="10,9 9,9 8,9"></polyline>
              </svg>
              <span
                id="section-exif-editor-title"
                class="section-title"
                role="heading"
                aria-level="2"
              >
                EXIF Editor
              </span>
              <svg
                class="chevron"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M6 9l6 6 6-6" />
              </svg>
            </button>
            <div class="section-content active">
              <div class="control">
                <label class="control-label">Current Fractal Data</label>
                <div class="current-fractal-info">
                  <div class="fractal-info-row">
                    <span class="info-label">Fractal:</span>
                    <span class="info-value" id="current-fractal-type">-</span>
                  </div>
                  <div class="fractal-info-row">
                    <span class="info-label">Zoom:</span>
                    <span class="info-value" id="current-zoom">-</span>
                  </div>
                  <div class="fractal-info-row">
                    <span class="info-label">Offset X:</span>
                    <span class="info-value" id="current-offset-x">-</span>
                  </div>
                  <div class="fractal-info-row">
                    <span class="info-label">Offset Y:</span>
                    <span class="info-value" id="current-offset-y">-</span>
                  </div>
                  <div class="fractal-info-row">
                    <span class="info-label">Theme:</span>
                    <span class="info-value" id="current-theme">-</span>
                  </div>
                </div>
                <button
                  class="copy-coords-btn"
                  id="use-current-data-btn"
                  title="Use current fractal data"
                >
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                  >
                    <path d="M5 12l5 5l10-10"></path>
                  </svg>
                  Use Current Data
                </button>
              </div>

              <div class="control">
                <label class="control-label">Drop Image Here</label>
                <div class="image-drop-zone" id="image-drop-zone">
                  <div class="drop-zone-content">
                    <svg
                      width="48"
                      height="48"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                      <circle cx="8.5" cy="8.5" r="1.5"></circle>
                      <polyline points="21,15 16,10 5,21"></polyline>
                    </svg>
                    <p class="drop-zone-text">Drag & drop an image here</p>
                    <p class="drop-zone-subtext">or click to select</p>
                  </div>
                  <input
                    type="file"
                    id="image-file-input"
                    accept="image/jpeg,image/jpg"
                    style="display: none"
                  />
                </div>
                <div class="image-preview" id="image-preview" style="display: none">
                  <img id="preview-image" alt="Preview" />
                  <div class="image-info">
                    <span id="image-name">No image selected</span>
                    <span id="image-size">-</span>
                  </div>
                </div>
              </div>

              <div class="control">
                <label class="control-label">EXIF Data (JSON)</label>
                <textarea
                  id="exif-json-editor"
                  class="exif-json-textarea"
                  placeholder="EXIF data will appear here..."
                  rows="8"
                ></textarea>
                <div class="control-description">
                  Edit the JSON data above to customize the fractal information that will be
                  embedded in the image.
                </div>
              </div>

              <div class="control">
                <button
                  class="copy-coords-btn"
                  id="write-exif-btn"
                  title="Write EXIF data and download image"
                  disabled
                >
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                  >
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7,10 12,15 17,10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                  </svg>
                  Write EXIF & Download
                </button>
                <button
                  class="copy-coords-btn"
                  id="clear-image-btn"
                  title="Clear image and start over"
                  style="display: none; margin-top: 8px; background: var(--bg-hover)"
                >
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                  >
                    <path d="M3 6h18"></path>
                    <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                    <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
                  </svg>
                  Clear Image
                </button>
              </div>
            </div>
          </div>

          <!-- Presets Section -->
          <div class="collapsible-section">
            <button
              class="section-header"
              data-section="presets"
              aria-expanded="false"
              aria-controls="section-presets-content"
            >
              <span id="section-presets-title" class="section-title" role="heading" aria-level="2">
                Presets
              </span>
              <svg
                class="chevron"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M6 9l6 6 6-6" />
              </svg>
            </button>
            <div class="section-content" id="section-presets-content">
              <div class="presets-container">
                <div class="presets-grid" id="presets-grid">
                  <!-- Preset images will be loaded here dynamically -->
                  <div class="preset-placeholder">
                    <div class="placeholder-content">
                      <svg
                        width="48"
                        height="48"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.5"
                      >
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                        <circle cx="8.5" cy="8.5" r="1.5" />
                        <polyline points="21,15 16,10 5,21" />
                      </svg>
                      <p>No presets available</p>
                      <small>Add preset images to static/presets/images/</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </aside>
    </div>

    <script>
      // Register Service Worker for PWA (disabled for localhost development)
      if ('serviceWorker' in navigator) {
        const isLocalhost =
          window.location.hostname === 'localhost' ||
          window.location.hostname === '127.0.0.1' ||
          window.location.hostname === '';

        if (!isLocalhost) {
          window.addEventListener('load', () => {
            navigator.serviceWorker
              .register('/sw.js')
              .then((registration) => {
                console.log('[Service Worker] Registered:', registration.scope);

                // Check for updates periodically
                setInterval(
                  () => {
                    registration.update();
                  },
                  60 * 60 * 1000
                ); // Check every hour

                // Handle updates
                registration.addEventListener('updatefound', () => {
                  const newWorker = registration.installing;
                  if (newWorker) {
                    newWorker.addEventListener('statechange', () => {
                      if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                        // New service worker available, prompt user to reload
                        if (confirm('A new version is available! Reload to update?')) {
                          newWorker.postMessage({ type: 'SKIP_WAITING' });
                          window.location.reload();
                        }
                      }
                    });
                  }
                });
              })
              .catch((error) => {
                console.error('[Service Worker] Registration failed:', error);
              });
          });
        } else {
          console.log('[Service Worker] Disabled for localhost development');

          // Unregister any existing service workers on localhost
          navigator.serviceWorker.getRegistrations().then((registrations) => {
            for (const registration of registrations) {
              registration.unregister().then((success) => {
                if (success) {
                  console.log('[Service Worker] Unregistered existing service worker');
                }
              });
            }
          });

          // Clear all caches on localhost
          if ('caches' in window) {
            caches
              .keys()
              .then((cacheNames) => {
                return Promise.all(
                  cacheNames.map((cacheName) => {
                    console.log('[Service Worker] Deleting cache:', cacheName);
                    return caches.delete(cacheName);
                  })
                );
              })
              .then(() => {
                console.log('[Service Worker] All caches cleared');
              })
              .catch((error) => {
                console.error('[Service Worker] Error clearing caches:', error);
              });
          }
        }
      }
    </script>
  </body>
</html>
