chemicalcrux
/
stroll


			
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Stroll</title>
  <link rel="stylesheet" href="style.css">
  <script src="sounds.js"></script>
  <script src="presets.js"></script>
  <script src="units.js"></script>
  <script src="recursive-macro.js"></script>
  <script src="recursive-desc.js"></script>
  <script src="game.js"></script>
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="An 18+ macro/vore text game" />
  <meta property="og:title" content="Stroll" />
  <meta property="og:description" content="An 18+ macro/vore text game" />
  <meta property="og:image" content="https://chemicalcrux.org/stroll.png" />
  <link rel="shortcut icon" href="https://chemicalcrux.org/favicon.ico" type="image/x-icon" />
</head>

<body class="light">
  <script src="darkmode.js"></script>
  <div class="game-area">
    <div class="sidebar" id="stat-container">
      <div class="stat-header-self" id="stats-self">
        <p>Stats</p>
        <div class="stat-line" id="height"></div>
        <div class="stat-line" id="mass"></div>
        <div class="stat-line" id="growth-points"></div>
        <div class="stat-line" id="arousal"></div>
        <div class="stat-line" id="edge"></div>

        <!-- external svg is such a pain in the ass -->

        <div class="meter" id="cumMeter">
          <div class="fill">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
            </svg>
          </div>
        </div>

        <div class="meter" id="femcumMeter">
          <div class="fill">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
            </svg>
          </div>
        </div>

        <div class="meter" id="milkMeter">
          <div class="fill">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
            </svg>
          </div>
        </div>

        <div class="meter" id="gasMeter">
          <div class="fill">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
            </svg>
          </div>
        </div>

        <div class="meter" id="pissMeter">
          <div class="fill">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
            </svg>
          </div>
        </div>

        <div class="meter" id="scatMeter">
          <div class="fill">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
            </svg>
          </div>
        </div>

        <div class="stat-line-hidden" id="cum"></div>
        <div class="stat-line-hidden" id="femcum"></div>
        <div class="stat-line-hidden" id="milk"></div>
        <div class="stat-line-hidden" id="gas"></div>
        <div class="stat-line-hidden" id="piss"></div>
        <div class="stat-line-hidden" id="scat"></div>
      </div>
      <div class="stat-header-self">Growth</div>
      <table id="grow-panel">
        <tr>
          <th><input autocomplete="off" class="growth-option" type="radio" name="part" checked="true" id="part-body">
            <label class="growth-label" for="part-body">Body</label></th>
          <th><button class="growth-amount" id="button-amount-1">1x</button></th>
        </tr>
        <tr>
          <th><input autocomplete="off" class="growth-option" type="radio" name="part" id="part-ass">
            <label class="growth-label" for="part-ass">Ass</label></th>
          <th><button class="growth-amount" id="button-amount-5">5x</button></th>
        </tr>
        <tr>
          <th><input autocomplete="off" class="growth-option" type="radio" name="part" id="part-dick">
            <label class="growth-label" for="part-dick">Cock</label></th>
          <th><button class="growth-amount" id="button-amount-10">10x</button></th>
        </tr>
        <tr>
          <th><input autocomplete="off" class="growth-option" type="radio" name="part" id="part-balls">
            <label class="growth-label" for="part-balls">Balls</label></th>
          <th><button class="growth-amount" id="button-amount-20">20x</button></th>
        </tr>
        <tr>
          <th><input autocomplete="off" class="growth-option" type="radio" name="part" id="part-breasts">
            <label class="growth-label" for="part-breasts">Breasts</label></th>
          <th><button class="growth-amount" id="button-amount-50">50x</button></th>
        </tr>
        <tr>
          <th><input autocomplete="off" class="growth-option" type="radio" name="part" id="part-vagina">
            <label class="growth-label" for="part-vagina">Slit</label></th>
          <th><button class="growth-amount" id="button-amount-100">100x</button></th>
        </tr>
      </table>
      <div class="stat-container">
        <button class="stat-button" id="button-look">Look Around</button>
        <button class="stat-button" id="button-arousal">Arousal On</button>
        <button class="stat-button" id="button-stroll">Status: Standing</button>
        <button class="stat-button" id="button-numbers">Numbers: Full</button>
        <button class="stat-button" id="button-units">Units: Metric</button>
        <button class="stat-button" id="button-verbose">Verbose Text</button>
        <button class="stat-button" id="button-grow-lots">SUPER BIG</button>
        <button class="stat-button" id="button-dark-mode-game">Toggle Dark Mode</button>
        <button class="stat-button" id="button-stats">Stats</button>
        <button class="stat-button" id="button-debug-log">Debug Log</button>
      </div>
    </div>
    <div id="log-area">
      <div id="log">
        <div>Welcome to Stroll 0.6.0</div>
        <div><b>This game features 18+ content</b></div>
        <div>It's a nice day for a walk</div>
        <div>&nbsp;</div>
      </div>
    </div>
    <div class="sidebar" id="action-panel">
      <div class="action-part-container">
        <button class="active action-part-button" id="action-part-body">Body</button>
        <button class="action-part-button" id="action-part-dick">Cock</button>
        <button class="action-part-button" id="action-part-vagina">Slit</button>
        <button class="action-part-button" id="action-part-breasts">Breasts</button>
        <button class="action-part-button" id="action-part-tails">Tails</button>
        <button class="action-part-button" id="action-part-souls">Souls</button>
        <button class="action-part-button" id="action-part-shoes">Shoes</button>
        <button class="action-part-button" id="action-part-waste">Waste</button>
        <button class="action-part-button" id="action-part-misc">Misc</button>
      </div>

      <div class="action-tab" id="actions-body">
        <button class="action-button" id="button-action-feed">Eat</button>
        <button class="action-button" id="button-action-chew">Chew</button>
        <button class="action-button" id="button-action-stomp">Stomp</button>
        <button class="action-button" id="button-action-flex_toes">Flex Toes</button>
        <button class="action-button" id="button-action-sit">Sit</button>
        <button class="action-button" id="button-action-anal_vore">Anal Vore</button>
        <button class="action-button" id="button-action-grind">Grind</button>
      </div>

      <div class="action-tab" id="actions-tails">
        <button class="action-button" id="button-action-tail_slap">Tail Slap</button>
        <button class="action-button" id="button-action-tail_vore_only">Tail Vore</button>
        <button class="action-button" id="button-action-tail_vore_one">Tail Vore (1)</button>
        <button class="action-button" id="button-action-tail_vore_some">Tail Vore (some)</button>
        <button class="action-button" id="button-action-tail_vore_all">Tail Vore (all!)</button>
      </div>

      <div class="action-tab" id="actions-breasts">
        <button class="action-button" id="button-action-cleavage_stuff">Stuff Cleavage</button>
        <button class="action-button" id="button-action-breast_toy">Squeeze Cleavage</button>
        <button class="action-button" id="button-action-cleavage_crush">Crush Cleavage</button>
        <button class="action-button" id="button-action-cleavage_drop">Drop Cleavage</button>
        <button class="action-button" id="button-action-cleavage_absorb">Absorb Cleavage</button>
        <button class="action-button" id="button-action-breast_crush">Breast Crush</button>
        <button class="action-button" id="button-action-breast_vore">Breast Vore</button>
        <button class="action-button" id="button-action-breast_milk">Milk Breasts</button>
      </div>

      <div class="action-tab" id="actions-vagina">
        <button class="action-button" id="button-action-unbirth">Unbirth</button>
        <button class="action-button" id="button-action-slit_toy">Finger Slit</button>
      </div>

      <div class="action-tab" id="actions-dick">
        <button class="action-button" id="button-action-sheath_stuff">Stuff Sheath</button>
        <button class="action-button" id="button-action-sheath_toy">Squeeze Sheath</button>
        <button class="action-button" id="button-action-sheath_clench">Clench Sheath</button>
        <button class="action-button" id="button-action-sheath_absorb">Absorb Sheath</button>
        <button class="action-button" id="button-action-cockslap">Cockslap</button>
        <button class="action-button" id="button-action-cock_vore">Cock Vore</button>
        <button class="action-button" id="button-action-ball_smother">Ball Smother</button>
      </div>

      <div class="action-tab" id="actions-souls">
        <button class="action-button" id="button-action-soul_vore">Soul Vore</button>
        <button class="action-button" id="button-action-soul_absorb_paw">Paws</button>
      </div>

      <div class="action-tab" id="actions-shoes">
        <button class="action-button" id="button-action-wear_shoes">Put On Shoes</button>
        <button class="action-button" id="button-action-remove_shoes">Take Off Shoes</button>
        <button class="action-button" id="button-action-wear_socks">Put On Socks</button>
        <button class="action-button" id="button-action-remove_socks">Take Off Socks</button>
        <button class="action-button" id="button-action-stuff_shoes">Stuff Shoes</button>
        <button class="action-button" id="button-action-stuff_socks">Stuff Socks</button>
        <button class="action-button" id="button-action-dump_shoes">Dump Shoes</button>
        <button class="action-button" id="button-action-dump_socks">Dump Socks</button>
      </div>

      <div class="action-tab" id="actions-waste">
        <button class="action-button" id="button-action-belch">Belch</button>
        <button class="action-button" id="button-action-fart">Fart</button>
        <button class="action-button" id="button-action-piss">Piss</button>
        <button class="action-button" id="button-action-bladder_vore">Bladder Vore</button>
        <button class="action-button" id="button-action-scat">Scat</button>
      </div>

      <div class="action-tab" id="actions-misc">
        <button class="action-button" id="button-action-pouch_stuff">Stuff Pouch</button>
        <button class="action-button" id="button-action-pouch_rub">Rub Pouch</button>
        <button class="action-button" id="button-action-pouch_eat">Eat From Pouch</button>
        <button class="action-button" id="button-action-pouch_absorb">Absorb Pouch</button>
      </div>
    </div>
  </div>
  <div class="character-build">
    <p>Welcome to Stroll 0.6.0</p>
    <p><b>This game features 18+ content</b></p>
    <p><a href="https://chemicalcrux.org/stroll">Changelog</a></p>
    <p><a href="https://t.me/joinchat/BSXHzUZmSqc-CXB1khkuYw">Telegram discussion group</a></p>
    <div><a href="https://discord.gg/7pdcVhD">Discord discussion group</a></div>

    <p>Stroll is a text-based macro game. Stomp things, eat things, abuse things - then grow larger and do it all over again. </p>

    <p>Build your Character (leave blank for reasonable normal-scale defaults)</p>
    <p>Lengths in meters, areas in square meters, masses in kilograms</p>
    <p>Click on highlight/darkened titles to enable and disabled features.</p>
    <div id="custom-species">


      <ul class="flex-outer">

        <div class="custom-category">
          <p>Reset the sheet here (saved data isn't affected)</p>

          <div>
            <button class="option-button" id="button-reset-custom">Reset</button>
          </div>
        </div>

        <div class="custom-category">
          <div>
            <button class="option-button" id="button-start">Start Game</button>
          </div>
        </div>

        <div class="custom-category">
          <button class="option-button" id="button-dark-mode-options">Toggle Dark Mode</button>
          <button class="option-button" id="button-units-options">Units: Metric</button>
        </div>

        <div class="custom-category">
          <p>You can load a preset character here...</p>
          <div>
            <select id="character-presets">
                </select>
            <button type="button" class="option-button" id="button-load-preset">Load Preset Character</button>
          </div>
        </div>

        <div class="custom-category">
          <p>Or, load/save your own character internally here! It'll be saved in your browser, so you can come back to it later.</p>
          <div>
            <button type="button" class="option-button" id="button-load-custom">Load Custom Character</button>
            <button type="button" class="option-button" id="button-save-custom">Save Custom Character</button>
          </div>
        </div>

        <div class="custom-category">
          <p>Or export/import your character to text here. Copy and paste to share!</p>
          <div class>
            <button type="button" class="option-button" id="button-export-clear">Clear Space</button>
            <button type="button" class="option-button" id="button-export-preset">Export Your Character</button>
            <button type="button" class="option-button" id="button-import-preset">Import Your Character</button>

            <p><input autocomplete="off" type="text" id="export-area" placeholder="Paste character data here..."></p>
          </div>
        </div>
      </ul>
      <form id="custom-species-form" name="custom-species-form">
        <ul class="flex-outer">
          <div class="custom-category">
            <div class="custom-header-static">Basics</div>
            <div>
              <li>
                <label for="name">Name</label>
                <input autocomplete="off" type="text" id="name" name="name" />
              </li>
              <li>
                <label for="species">Species</label>
                <input autocomplete="off" type="text" id="species" name="species" placeholder="crux" />
              </li>
              <li>
                <label for="scale" class="has-tooltip" title="How many times larger than normal you start.">Scale (?)</label>
                <input autocomplete="off" type="number" step="any" id="scale" name="scale" placeholder="1" />
                <div class="preview" id="scalePreview"></div>
              </li>
              <li>
                <label for="baseHeight">Height</label>
                <input autocomplete="off" type="number" step="any" id="baseHeight" name="baseHeight" data-unit="length" placeholder="2.26" />
                <div class="preview" id="baseHeightPreview"></div>
              </li>
              <li>
                <label for="baseMass">Weight</label>
                <input autocomplete="off" type="number" step="any" id="baseMass" name="baseMass" data-unit="mass" placeholder="135">
                <div class="preview" id="baseMassPreview"></div>
              </li>
              <li>
                <label for="basePawArea">Paw area</label>
                <input autocomplete="off" type="number" step="any" id="basePawArea" name="basePawArea" data-unit="area" placeholder="0.1">
                <div class="preview" id="basePawAreaPreview"></div>
              </li>
              <li>
                <label for="baseHandArea">Hand area</label>
                <input autocomplete="off" type="number" step="any" id="baseHandArea" name="baseHandArea" data-unit="area" placeholder="0.1">
                <div class="preview" id="baseHandAreaPreview"></div>
              </li>
              <li>
                <label for="baseAssArea">Ass area</label>
                <input autocomplete="off" type="number" step="any" id="baseAssArea" name="baseAssArea" data-unit="area" placeholder="0.4">
                <div class="preview" id="baseAssAreaPreview"></div>
              </li>
            </div>
          </div>

          <div class="custom-category">
            <div class="custom-header-static">Brutality</div>
            <div>
              <li>
                <input autocomplete="off" type="radio" name="brutality" id="brutality-0" value="0">
                <label for="brutality-0">Non-fatal</label>
              </li>
              <li>
                <input autocomplete="off" type="radio" name="brutality" checked="true" id="brutality-1" value="1">
                <label for="brutality-1">Fatal, no gore</label>
              </li>
              <li>
                <input autocomplete="off" type="radio" name="brutality" id="brutality-2" value="2">
                <label for="brutality-2">Gory</label>
              </li>
              <li>
                <input autocomplete="off" type="radio" name="brutality" id="brutality-3" value="3">
                <label for="brutality-3">Sadistic</label>
              </li>
            </div>
          </div>

          <div class="custom-category">
            <div class="custom-header-static">Victims</div>
            <div>
              <li>
                <input autocomplete="off" type="checkbox" name="victimsHuman" id="victimsHuman" />
                <label for="victimsHuman">Human prey (instead of anthros)</label>
              </li>
              <li>
                <input autocomplete="off" type="checkbox" name="victimsMilitary" id="victimsMilitary" />
                <label for="victimsMilitary">Military</label>
              </li>
              <li>
                <input autocomplete="off" type="checkbox" name="victimsMacros" id="victimsMacros" />
                <label for="victimsMacros">Smaller macros</label>
              </li>
              <li>
                <input autocomplete="off" type="checkbox" name="victimsMicros" id="victimsMicros" />
                <label for="victimsMicros">Micros</label>
              </li>
            </div>
          </div>

          <div class="custom-category">
            <div class="custom-header-static">Misc</div>
            <div>
              <li>
                <input autocomplete="off" type="checkbox" checked="true" name="sameSizeVore" id="sameSizeVore"/>
                <label class="has-tooltip" for="sameSizeVore" title="Can you eat people your own size?">Same-size predator</label>
              </li>
              <li>
                <input autocomplete="off" type="checkbox" checked="true" name="sameSizeStomp" id="sameSizeStomp"/>
                <label class="has-tooltip" for="sameSizeStomp" title="Can you stomp and sit on people your own size?">Same-size stomper</label>
              </li>
              <li>
                <label for="footType">Foot type</label>
                <select name="footType">
                    <option value="paw">Paws</option>
                    <option value="hoof">Hooves</option>
                    <option value="foot">Human</option>
                    <option value="avian">Avian</option>
                  </select>
              </li>
              <li>
                <label for="jawType">Mouth type</label>
                <select name="jawType">
                    <option value="jaw">Jaws</option>
                    <option value="beak">Beak</option>
                  </select>
              </li>
            </div>
          </div>

          <div class="custom-category">
            <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="footWear" name="footWear" />
            <label class="custom-header" for="footWear">Footwear</label>
            <div class="reveal-if-active">
              <li>
                <div class="custom-category-sub">
                  <ul class="flex-outer-sub">
                    <input autocomplete="off" class="custom-header-checkbox" type="checkbox" checked="true" id="footSockEnabled" name="footSockEnabled" />
                    <label class="custom-header" for="footSockEnabled">Socks</label>
                    <div class="reveal-if-active">
                      <li>
                        <label for="footSock">Sock type</label>
                        <select name="footSock">
                            <option value="sock">Socks</option>
                          </select>
                      </li>
                    </div>
                  </ul>
                </div>
                <div class="custom-category-sub">
                  <ul class="flex-outer-sub">
                    <input autocomplete="off" class="custom-header-checkbox" type="checkbox" checked="true" id="footShoeEnabled" name="footShoeEnabled" />
                    <label class="custom-header" for="footShoeEnabled">Shoes</label>
                    <div class="reveal-if-active">
                      <li>
                        <label for="footShoe">Shoe type</label>
                        <select name="footShoe">
                            <option value="shoe">Shoes</option>
                            <option value="boot">Boots</option>
                            <option value="trainer">Trainers</option>
                            <option value="sandal">Sandals</option>
                          </select>
                      </li>
                    </div>
                  </ul>
                </div>
              </li>
            </div>
          </div>

          <div class="custom-category">
            <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="analVore" name="analVore" />
            <label class="custom-header" for="analVore">Anal Vore</label>
            <div class="reveal-if-active">
              <li>
                <label for="baseAnalVoreDiameter">Tailhole diameter</label>
                <input autocomplete="off" type="number" step="any" id="baseAnalVoreDiameter" name="baseAnalVoreDiameter" data-unit="length" placeholder="0.1">
                <div class="preview" id="baseAnalVoreDiameterPreview"></div>
              </li>
              <li>
                <input autocomplete="off" type="checkbox" name="analVoreToStomach" id="analVoreToStomach" />
                <label class="has-tooltip" for="analVoreToStomach" title="Otherwise, bowels absorb/digest">Anal vore goes to stomach</label>
              </li>
            </div>
          </div>

          <div class="custom-category">
            <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="arousalEnabled" name="arousalEnabled" />
            <label class="custom-header" for="arousalEnabled">Arousal</label>
            <div class="reveal-if-active">
              <li>
                <label class="has-tooltip" for="arousalFactor" title="Multiplies arousal gain by this much">Arousal multiplier</label>
                <input autocomplete="off" type="number" step="any" name="arousalFactor" placeholder="1" />
              </li>
              <li>
                <label class="has-tooltip" for="edgeFactor" title="Multiplies edge gain by this much">Edge multiplier</label>
                <input autocomplete="off" type="number" step="any" name="arousalFactor" placeholder="1" />
              </li>
            </div>
          </div>

          <div class="custom-category">
            <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="hasTail" name="hasTail" />
            <label class="custom-header" for="hasTail">Tails</label>
            <div class="reveal-if-active">
              <li>
                <label for="tailCount">Tail count</label>
                <input autocomplete="off" type="number" step="any" name="tailCount" placeholder="1" />
              </li>
              <li>
                <label for="tailType">Tail type</label>
                <input autocomplete="off" type="text" name="tailType" placeholder="slinky" />
              </li>
              <li>
                <label for="baseTailLength">Tail length</label>
                <input autocomplete="off" type="number" step="any" name="baseTailLength" id="baseTailLength" data-unit="length" placeholder="1" />
                <div class="preview" id="baseTailLengthPreview"></div>
              </li>
              <li>
                <label for="baseTailDiameter">Tail diameter</label>
                <input autocomplete="off" type="number" step="any" name="baseTailDiameter" id="baseTailDiameter" data-unit="area" placeholder="0.3" />
                <div class="preview" id="baseTailDiameterPreview"></div>
              </li>
              <li>
                <div class="custom-category-sub">
                  <ul class="flex-outer-sub">
                    <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="tailMaw" name="tailMaw" />
                    <label class="custom-header" for="tailMaw">Tail Vore</label>
                    <div class="reveal-if-active">
                      <li>
                        <label for="tailStretchiness">Tail stretchiness</label>
                        <input autocomplete="off" type="number" step="any" name="tailStretchiness" placeholder="1" />
                      </li>
                    </div>
                  </ul>
                </div>
              </li>
            </div>
          </div>

          <div class="custom-category">
            <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="hasPouch" name="hasPouch" />
            <label class="custom-header" for="hasPouch">Pouch</label>
            <div class="reveal-if-active">
              <li>
                It's on :D
              </li>
            </div>
          </div>

          <div class="custom-category">
            <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="maleParts" name="maleParts" />
            <label class="custom-header" for="maleParts">Male genitals</label>
            <div class="reveal-if-active">
              <li>
                <label for="dickType">Cock type</label>
                <input autocomplete="off" type="text" id="dickType" name="dickType" placeholder="canine" />
              </li>
              <li>
                <label for="baseDickLength">Cock length</label>
                <input autocomplete="off" type="number" step="any" id="baseDickLength" name="baseDickLength" data-unit="length" placeholder="0.3" />
                <div class="preview" id="baseDickLengthPreview"></div>
              </li>
              <li>
                <label for="baseDickDiameter">Cock diameter</label>
                <input autocomplete="off" type="number" step="any" id="baseDickDiameter" name="baseDickDiameter" data-unit="length" placeholder="0.08" />
                <div class="preview" id="baseDickDiameterPreview"></div>
              </li>
              <li>
                <label for="dickStretchiness">Cock stretchiness</label>
                <input autocomplete="off" type="number" step="any" name="dickStretchiness" placeholder="1" />
              </li>
              <li>
                <label for="baseBallDiameter">Ball diameter</label>
                <input autocomplete="off" type="number" step="any" id="baseBallDiameter" name="baseBallDiameter" data-unit="length" placeholder="0.05" />
                <div class="preview" id="baseBallDiameterPreview"></div>
              </li>
              <li>
                <label for="baseCumRatio" class="has-tooltip" title="scales how much cum is released with each shot">Orgasm cum ratio</label>
                <input autocomplete="off" type="number" step="any" id="baseCumRatio" name="baseCumRatio" placeholder="1" />
                <div class="preview" id="baseCumRatioPreview"></div>
              </li>
              <li>
                <label for="baseMass">Cum production factor</label>
                <input autocomplete="off" type="number" step="any" id="cumScale" name="cumScale" placeholder="1" />
                <div class="preview" id="cumScalePreview"></div>
              </li>
              <li>
                <label for="cumStorageScale">Cum storage multiplier</label>
                <input autocomplete="off" type="number" step="any" id="cumStorageScale" name="cumStorageScale" placeholder="1" />
                <div class="preview" id="cumStorageScalePreview"></div>
              </li>
              <li>
                <label for="baseCumDigestFactor">Cum digestion factor</label>
                <input autocomplete="off" type="number" step="any" id="baseCumDigestFactor" name="baseCumDigestFactor" placeholder="1" />
                <div class="preview" id="baseCumDigestFactorPreview"></div>
              </li>
              <li>
                <input autocomplete="off" type="checkbox" id="hasSheath" name="hasSheath" checked="true" />
                <label for="hasSheath">Sheath</label>
              </li>
              <li>
                <input autocomplete="off" type="checkbox" id="cumScaleWithSize" name="cumScaleWithSize" />
                <label class="has-tooltip" for="cumScaleWithSize" title="If checked, produces more cum from the same prey as you get larger">Scale cum with size</label>
              </li>
            </div>
          </div>

          <div class="custom-category">
            <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="hasBreasts" name="hasBreasts" />
            <label class="custom-header" for="hasBreasts">Breasts</label>
            <div class="reveal-if-active">
              <li>
                <label for="baseBreastDiameter">Breast diameter</label>
                <input autocomplete="off" type="number" step="any" id="baseBreastDiameter" name="baseBreastDiameter" data-unit="length" placeholder="0.1" />
                <div class="preview" id="baseBreastDiameterPreview"></div>
              </li>
              <li>
                <div class="custom-category-sub">
                  <ul class="flex-outer-sub">
                    <input autocomplete="off" class="custom-header-checkbox" type="checkbox" checked="true" id="lactationEnabled" name="lactationEnabled" />
                    <label class="custom-header" for="lactationEnabled">Lactation</label>
                    <div class="reveal-if-active">
                      <li>
                        <label for="lactationFactor" class="has-tooltip" title="scales how much milk is released with each squeeze">Lactation ratio</label>
                        <input autocomplete="off" type="number" step="any" id="lactationFactor" name="lactationFactor" placeholder="0.25" />
                        <div class="preview" id="lactationFactorPreview"></div>
                      </li>
                      <li>
                        <label for="lactationScale">Milk production factor</label>
                        <input autocomplete="off" type="number" step="any" id="lactationScale" name="lactationScale" placeholder="1" />
                        <div class="preview" id="lactationScalePreview"></div>
                      </li>
                      <li>
                        <label for="milkStorageScale">Milk storage multiplier</label>
                        <input autocomplete="off" type="number" step="any" id="milkStorageScale" name="milkStorageScale" placeholder="1" />
                        <div class="preview" id="milkStorageScalePreview"></div>
                      </li>
                    </div>
                  </ul>
                </div>
              </li>
              <li>
                <div class="custom-category-sub">
                  <ul class="flex-outer-sub">
                    <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="breastVore" name="breastVore" />
                    <label class="custom-header" for="breastVore">Breast Vore</label>
                    <div class="reveal-if-active">
                      <li>
                        <label for="breastStretchiness">Breast stretchiness</label>
                        <input autocomplete="off" type="number" step="any" name="breastStretchiness" placeholder="1" />
                      </li>
                      <li>
                        <label for="baseMilkDigestFactor">Milk digestion factor</label>
                        <input autocomplete="off" type="number" step="any" id="baseMilkDigestFactor" name="baseMilkDigestFactor" placeholder="1" />
                <div class="preview" id="baseMilkDigestFactorPreview"></div>
                      </li>
                      <li>
                        <input autocomplete="off" type="checkbox" id="milkScaleWithSize" name="milkScaleWithSize" />
                        <label class="has-tooltip" for="milkScaleWithSize" title="If checked, produces more milk from the same prey as you get larger">Scale milk with size</label>
                      </li>
                    </div>
                  </ul>
                </div>
              </li>
            </div>
          </div>

          <div class="custom-category">
            <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="femaleParts" name="femaleParts" />
            <label class="custom-header" for="femaleParts">Female genitals</label>
            <div class="reveal-if-active">
              <li>
                <label for="baseVaginaLength">Slit length</label>
                <input autocomplete="off" type="number" step="any" id="baseVaginaLength" name="baseVaginaLength" data-unit="length" placeholder="0.1" />
                <div class="preview" id="baseVaginaLengthPreview"></div>
              </li>
              <li>
                <label for="baseVaginaWidth">Slit width</label>
                <input autocomplete="off" type="number" step="any" id="baseVaginaWidth" name="baseVaginaWidth" data-unit="length" placeholder="0.05" />
                <div class="preview" id="baseVaginaWidthPreview"></div>
              </li>
              <li>
                <label for="vaginaStretchiness">Slit stretchiness</label>
                <input autocomplete="off" type="number" step="any" name="vaginaStretchiness" placeholder="1" />
              </li>
              <li>
                <label for="baseFemcumRatio" class="has-tooltip" title="scales how much femcum is released with each shot">Orgasm femcum ratio</label>
                <input autocomplete="off" type="number" step="any" id="baseFemcumRatio" name="baseFemcumRatio" placeholder="1" />
                <div class="preview" id="baseFemcumRatioPreview"></div>
              </li>
              <li>
                <label for="femcumScale">Femcum production factor</label>
                <input autocomplete="off" type="number" step="any" id="femcumScale" name="femcumScale" placeholder="1" />
                <div class="preview" id="femcumScalePreview"></div>
              </li>
              <li>
                <label for="femcumStorageScale">Femcum storage multiplier</label>
                <input autocomplete="off" type="number" step="any" id="femcumStorageScale" name="femcumStorageScale" placeholder="1" />
                <div class="preview" id="femcumStorageScalePreview"></div>
              </li>
              <li>
                <label for="baseFemcumDigestFactor">Femcum digestion factor</label>
                <input autocomplete="off" type="number" step="any" id="baseFemcumDigestFactor" name="baseFemcumDigestFactor" placeholder="1" />
                <div class="preview" id="baseFemcumDigestFactorPreview"></div>
              </li>
              <li>
                <input autocomplete="off" type="checkbox" id="femcumScaleWithSize" name="femcumScaleWithSize" />
                <label class="has-tooltip" for="femcumScaleWithSize" title="If checked, produces more femcum from the same prey as you get larger">Scale femcum with size</label>
              </li>
            </div>
          </div>

          <div class="custom-category">
            <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="stenchEnabled" name="stenchEnabled" />
            <label class="custom-header" for="stenchEnabled">Stench</label>
            <div class="reveal-if-active">
              <li>
                <label class="has-tooltip" for="basePawStenchArea" title="How many times your paw area should be covered in stench">Paw stench area</label>
                <input autocomplete="off" type="number" step="any" id="basePawStenchArea" name="basePawStenchArea" placeholder="1" />
                <div class="preview" id="basePawStenchAreaPreview"></div>
              </li>
              <li>
                <label class="has-tooltip" for="baseAssStenchArea" title="How many times your ass area should be covered in stench">Ass stench area</label>
                <input autocomplete="off" type="number" step="any" id="baseAssStenchArea" name="baseAssStenchArea" placeholder="1" />
                <div class="preview" id="baseAssStenchAreaPreview"></div>
              </li>
            </div>
          </div>

          <div class="custom-category">
            <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="gasEnabled" name="gasEnabled" />
            <label class="custom-header" for="gasEnabled">Gas</label>
            <div class="reveal-if-active">
              <li>
                <label for="belchEnabled">Belching</label>
                <input autocomplete="off" type="checkbox" checked="true" name="belchEnabled" />
              </li>
              <li>
                <label for="fartEnabled">Farting</label>
                <input autocomplete="off" type="checkbox" name="fartEnabled" />
              </li>
              <li>
                <label for="gasScale">Gas production factor</label>
                <input autocomplete="off" type="number" step="any" id="gasScale" name="gasScale" placeholder="1" />
                <div class="preview" id="gasScalePreview"></div>
              </li>
              <li>
                <label for="gasStorageScale">Gas storage multiplier</label>
                <input autocomplete="off" type="number" step="any" id="gasStorageScale" name="gasStorageScale" placeholder="1" />
                <div class="preview" id="gasStorageScalePreview"></div>
              </li>
              <li>
                <label for="baseGasDigestFactor">Gas digestion factor</label>
                <input autocomplete="off" type="number" step="any" id="baseGasDigestFactor" name="baseGasDigestFactor" placeholder="1" />
                <div class="preview" id="baseGasDigestFactorPreview"></div>
              </li>
              <li>
                <input autocomplete="off" type="checkbox" id="gasScaleWithSize" name="gasScaleWithSize" />
                <label class="has-tooltip" for="gasScaleWithSize" title="If checked, produces more gas from the same prey as you get larger">Scale gas with size</label>
              </li>
            </div>
          </div>

          <div class="custom-category">
            <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="soulVoreEnabled" name="soulVoreEnabled" />
            <label class="custom-header" for="soulVoreEnabled">Soul Vore</label>
            <div class="reveal-if-active">
                <label>Soul destination</label>
                <li>
                  <input autocomplete="off" type="radio" name="soulVoreType" id="soulvore-release" value="release">
                  <label class="has-tooltip" for="soulvore-release">Released</label>
                </li>
                <li>
                  <input autocomplete="off" type="radio" name="soulVoreType" id="soulvore-predscape" value="predscape">
                  <label class="has-tooltip" for="soulvore-predscape" title="A sort of afterlife or 'other plane' within the predator">Predscape</label>
                </li>
                <li>
                  <input autocomplete="off" type="radio" name="soulVoreType" checked="true" id="soulvore-afterlife" value="afterlife">
                  <label for="soulvore-afterlife">Afterlife</label>
                </li>
                <li>
                  <input autocomplete="off" type="radio" name="soulVoreType" id="soulvore-body" value="body">
                  <label class="has-tooltip" for="soulvore-body" title="Trapped on the predator's body">Predator's body</label>
                </li>
                <li>
                  <input autocomplete="off" type="radio" name="soulVoreType" id="soulvore-oblivion" value="oblivion">
                  <label for="soulvore-oblivion">Oblivion</label>
                </li>
            </div>
          </div>

          <div class="custom-category">
            <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="pissEnabled" name="pissEnabled" />
            <label class="custom-header" for="pissEnabled">Watersports</label>
            <div class="reveal-if-active">
              <li>
                <label for="pissScale" >Piss production scale</label>
                <input autocomplete="off" type="number" step="any" id="pissScale" name="pissScale" placeholder="1" />
                <div class="preview" id="pissScalePreview"></div>
              </li>
              <li>
                <label for="pissStorageScale">Piss storage multiplier</label>
                <input autocomplete="off" type="number" step="any" id="pissStorageScale" name="pissStorageScale" placeholder="1" />
                <div class="preview" id="pissStorageScalePreview"></div>
              </li>
              <div class="custom-category-sub">
                <ul class="flex-outer-sub">
                  <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="bladderVore" name="bladderVore" />
                  <label class="custom-header" for="bladderVore">Bladder Vore</label>
                  <div class="reveal-if-active">
                    <li>
                      <label for="baseUrethraDiameter">Urethra diameter</label>
                      <input autocomplete="off" type="number" step="any" id="baseUrethraDiameter" name="baseUrethraDiameter" data-unit="length" placeholder="0.03" />
                      <div class="preview" id="baseUrethraDiameterPreview"></div>
                    </li>
                    <li>
                      <label for="urethraStretchiness">Urethra stretchiness</label>
                      <input autocomplete="off" type="number" step="any" id="urethraStretchiness" name="urethraStretchiness" placeholder="5" />
                      <div class="preview" id="urethraStretchinessPreview"></div>
                    </li>
                    <li>
                      <label for="basePissDigestFactor">Piss digestion factor</label>
                      <input autocomplete="off" type="number" step="any" id="basePissDigestFactor" name="basePissDigestFactor" placeholder="1" />
                      <div class="preview" id="basePissDigestFactorPreview"></div>
                    </li>
                    <li>
                      <input autocomplete="off" type="checkbox" id="pissScaleWithSize" name="pissScaleWithSize" />
                      <label class="has-tooltip" for="pissScaleWithSize" title="If checked, produces more piss from the same prey as you get larger">Scale piss with size</label>
                    </li>
                  </div>
                </ul>
              </div>
            </div>
          </div>

          <div class="custom-category">
            <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="scatEnabled" name="scatEnabled" />
            <label class="custom-header" for="scatEnabled">Scat</label>
            <div class="reveal-if-active">
              <li>
                <div>note - setting tailhole diameter requires anal vore to be enabled</div>
              </li>
              <li>
                <label for="baseScatDigestFactor">Scat digestion factor</label>
                <input autocomplete="off" type="number" step="any" id="baseScatDigestFactor" name="baseScatDigestFactor" placeholder="1" />
                <div class="preview" id="baseScatDigestFactorPreview"></div>
              </li>
              <li>
                <label class="has-tooltip" for="scatScale" title="1 = 1% fill per second">Passive scat production</label>
                <input autocomplete="off" type="number" step="any" id="scatScale" name="scatScale" placeholder="0" />
                <div class="preview" id="scatScalePreview"></div>
              </li>
              <li>
                <label for="scatStorageScale">Scat storage multiplier</label>
                <input autocomplete="off" type="number" step="any" id="scatStorageScale" name="scatStorageScale" placeholder="1" />
                <div class="preview" id="scatStorageScalePreview"></div>
              </li>
              <li>
                <input autocomplete="off" type="checkbox" id="scatScaleWithSize" name="scatScaleWithSize" />
                <label class="has-tooltip" for="scatScaleWithSize" title="If checked, produces more scat from the same prey as you get larger">Scale scat with size</label>
              </li>
            </div>
          </div>

          <div class="custom-category">
            <input autocomplete="off" class="custom-header-checkbox" type="checkbox" id="gooEnabled" name="gooEnabled" />
            <label class="custom-header" for="gooEnabled">Goo (not in yet)</label>
          </div>
        </ul>
      </form>
    </div>
  </div>
</body>

</html>