From a9b6b815e8b7e81a3039e1760dd4afe2aa4a66f1 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 20 Jan 2023 00:52:19 +0100
Subject: [PATCH] refactor: migrate Anatomy view

---
 src/views/Anatomy.vue     | 441 -------------------
 src/views/AnatomyView.vue | 892 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 892 insertions(+), 441 deletions(-)
 delete mode 100644 src/views/Anatomy.vue
 create mode 100644 src/views/AnatomyView.vue

diff --git a/src/views/Anatomy.vue b/src/views/Anatomy.vue
deleted file mode 100644
index ddc557a..0000000
--- a/src/views/Anatomy.vue
+++ /dev/null
@@ -1,441 +0,0 @@
-<template>
-  <nsfw-warning v-show="$root.isWarn">
-    <template #heading>
-      ⚠️⚠️⚠️<br />
-      Whoa, Nelly!
-    </template>
-
-    <template #message>
-      By enabling NSFW mode you confirm that you are of legal age to view adult
-      content.
-    </template>
-
-    <template #yes>Yes, show me the goods 👀</template>
-    <template #no>NO, STAHP 😱</template>
-  </nsfw-warning>
-
-  <prose>
-    <h2>Anatomy</h2>
-
-    <ref-figure dropshadow>
-      <template #img>
-        <img
-          v-if="$root.nsfw"
-          src="@/assets/refs/sebin-ref-body-NSFW.png"
-          alt="Sebin Full Body Ref"
-        />
-        <img
-          v-else
-          src="@/assets/refs/sebin-ref-body-SFW.png"
-          alt="Sebin Full Body Ref"
-        />
-      </template>
-      <template #caption>
-        <nsfw-switch
-          id="nsfw-switch"
-          v-model="$root.nsfw"
-          @change="$root.showWarning()"
-        />
-
-        <div>Sebin Full Body Reference</div>
-      </template>
-      <template #copyright>
-        <a href="https://twitter.com/draftgon">draftgon</a>
-      </template>
-    </ref-figure>
-
-    <data-table class="prose" :dataset="getSebinData.colors" />
-
-    <quick-facts>
-      <ul class="col-2">
-        <li>Bipedal plantigrade</li>
-        <li>Red and yellow scales</li>
-        <li>Yellow scales under chin, torso, underside of tail</li>
-        <li>Athletic to body builder physique</li>
-        <li>Sharp, black claws on fingers and toes</li>
-        <li>Brown blunt spikes running over back and top-side of tail</li>
-        <li>
-          Tail about {{ tailLength / 100 }} meter ({{ toImperial(tailLength) }})
-          in length
-        </li>
-      </ul>
-    </quick-facts>
-
-    <p>
-      As the offspring of a union between human and dragon, Sebin is a bipedal
-      plantigrade. The majority of his body is covered in red scales. A strip of
-      yellow scales runs from the underside of his jaw, extending down his chest
-      through his legs to the underside of the tip of his tail. The scales on
-      his chest are characterized by a special toughness to better protect vital
-      organs. He also has an athletic to muscular physique that he continuously
-      tends to keep in shape. Finger and toe tips are armed with sharp, black
-      claws, which serve him equally as tools and weapons. Brown spines run from
-      head to spine to tip of tail, though they are too blunt to pose a risk of
-      injury. His tail is about
-      {{ tailLength / 100 }} meters ({{ toImperial(tailLength) }}) in length.
-    </p>
-
-    <h3>Wings</h3>
-
-    <quick-facts>
-      <ul class="col-2">
-        <li>
-          Wingspan {{ wingspan / 100 }} meters ({{ toImperial(this.wingspan) }})
-        </li>
-        <li>Closed when on the ground</li>
-        <li>Function like a second pair of arms</li>
-        <li>Pointy talon on end of "hand"</li>
-      </ul>
-    </quick-facts>
-
-    <p>
-      Sebin's wings have a span of about {{ wingspan / 100 }} meters ({{
-        toImperial(this.wingspan)
-      }}). They function very much like a second pair of arms: two
-      interconnected limbs that form a bendable arm, at the end of which sits a
-      hand-like structure, adorned with a talon in exchange for a thumb, with a
-      sturdy membrane stretched between its long fingers. On solid ground, he
-      keeps his wings closed so as not to accidentally bump into anything with
-      them. Sebin also pays a lot of attention to his wings when working out, so
-      that they can keep carrying him reliably through the air. Though, he only
-      travels short to medium distances through the air before he has to take a
-      rest - as long as the airspace in the area has been declared open for wing
-      bearers.
-    </p>
-
-    <h3>Head</h3>
-    <ref-figure dropshadow>
-      <template #img>
-        <img
-          src="@/assets/refs/sebin-ref-expressions.png"
-          alt="Sebin's Expressions"
-        />
-      </template>
-      <template #caption>
-        <label>Sebin's Expressions</label>
-      </template>
-      <template #copyright>
-        <a href="https://twitter.com/draftgon">draftgon</a>
-      </template>
-    </ref-figure>
-
-    <quick-facts>
-      <ul class="col-2">
-        <li>Round pupils, green iris</li>
-        <li>Yellow spikes for eyebrows</li>
-        <li>Yellow spikes on cheeks</li>
-        <li>Black horns with slight curve downwards</li>
-        <li>Blue, medium long hair</li>
-        <li>Long, pointy, movable ears</li>
-        <li>Very sharp teeth</li>
-        <li>Tongue with pointy tip</li>
-      </ul>
-    </quick-facts>
-
-    <p>
-      Despite what one might expect with reptilians, Sebin's pupils are rounded
-      instead of slit-shaped. Yellow spikes running above his eyelids serve as
-      eyebrows. These spikes are also found along his jaw bone. Two pointed,
-      slightly curved, black horns protrude from his head. He usually wears his
-      medium-length, blue hair loose. His long, pointed ears are very flexible,
-      allowing him to hear sounds around him without having to turn his head.
-      They are also used for non-verbal communication, to express emotions
-      through body language. His hearing perceives a wider range of frequencies,
-      making it superior to that of a human. His jaws are equipped with
-      razor-sharp teeth that effortlessly sink into anything he manages to bite,
-      be it nourishment or adversaries. Embedded between them lies his tongue,
-      which is typically pointed for reptilians. Glands in his throat produce a
-      mixture which he uses to spit fire, which can reach up to around 100 °C
-      ({{ toFahrenheit(100) }} °F).
-    </p>
-
-    <h3>Upper Body</h3>
-    <quick-facts>
-      <ul class="col-2">
-        <li>Strong upper body</li>
-        <li>Big pecs</li>
-        <li>Defined abs</li>
-        <li>Black nipples</li>
-        <li>
-          Any muscle mass from athletic to body builder is fine, with a
-          preference towards body builder
-        </li>
-      </ul>
-    </quick-facts>
-
-    <p>
-      At the age of 17, Sebin gradually began to keep his body in shape on a
-      regular basis. His favorite exercises include weightlifting (with both
-      dumbbells and barbells), lat pulldown, leg press and cable curls. He works
-      out three days a week with one day off between training days, rotating the
-      body regions he trains each day.
-    </p>
-
-    <ref-figure polaroidBorder>
-      <template #img>
-        <img
-          src="@/assets/refs/upper-body-ref.jpg"
-          alt="Sebin's upper body closeup"
-        />
-      </template>
-      <template #caption>Sebin's upper body closeup</template>
-      <template #copyright>
-        <a href="https://twitter.com/NidtheDragon">NidtheDragon</a>
-      </template>
-    </ref-figure>
-
-    <p>
-      Sebin is very concerned with an even distribution of muscle mass, but pays
-      particular attention to his back, chest and arms. A strong chest with
-      strong arms helps to throw fire projectiles as far as possible. A strong
-      back guarantees a longer stay in the air.
-    </p>
-
-    <h3>Additional Muscle References</h3>
-
-    <ref-gallery>
-      <ref-figure polaroidBorder>
-        <template #img>
-          <img
-            src="@/assets/refs/muscle/muscle-ref12.jpg"
-            alt="Sebin flexing"
-          />
-        </template>
-        <template #caption>Sebin flexing</template>
-        <template #copyright>
-          <a href="https://twitter.com/KidRhinoBoy">Chirros</a>
-        </template>
-      </ref-figure>
-
-      <ref-figure polaroidBorder nsfw id="nsfw-switch-grisser">
-        <template #img>
-          <img src="@/assets/refs/muscle/muscle-ref1.jpg" alt="Sebin beckons" />
-        </template>
-        <template #caption>Sebin beckons</template>
-        <template #copyright>
-          <a href="https://twitter.com/GrisserArt">Grisser</a>
-        </template>
-      </ref-figure>
-
-      <ref-figure polaroidBorder>
-        <template #img>
-          <img
-            src="@/assets/refs/muscle/muscle-ref2.jpg"
-            alt="Sebin jamming out to some tunes"
-          />
-        </template>
-        <template #caption>Sebin jamming out to some tunes</template>
-        <template #copyright>
-          <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
-        </template>
-      </ref-figure>
-
-      <ref-figure polaroidBorder>
-        <template #img>
-          <img src="@/assets/refs/muscle/muscle-ref3.jpg" alt="Sebin flexing" />
-        </template>
-        <template #caption>Sebin flexing</template>
-        <template #copyright>
-          <a href="https://www.furaffinity.net/user/Marsel-Defender">
-            Marsel-Defender
-          </a>
-        </template>
-      </ref-figure>
-
-      <ref-figure polaroidBorder>
-        <template #img>
-          <img
-            src="@/assets/refs/muscle/muscle-ref4.png"
-            alt="Sebin giving you the bedroom eyes"
-          />
-        </template>
-        <template #caption>Sebin giving you the bedroom eyes</template>
-        <template #copyright>
-          <a href="https://www.furaffinity.net/user/sirboburto">SirBoburto</a>
-        </template>
-      </ref-figure>
-
-      <ref-figure polaroidBorder>
-        <template #img>
-          <img
-            src="@/assets/refs/muscle/muscle-ref5.jpg"
-            alt="Sebin bulging out"
-          />
-        </template>
-        <template #caption>Sebin bulging out</template>
-        <template #copyright>
-          <a href="https://twitter.com/MuskyMuffin">SexMuffin</a>
-        </template>
-      </ref-figure>
-
-      <ref-figure polaroidBorder nsfw id="nsfw-switch-knuxlight">
-        <template #img>
-          <img
-            src="@/assets/refs/muscle/muscle-ref6.jpg"
-            alt="Sebin showing you his rings"
-          />
-        </template>
-        <template #caption>Sebin showing you his rings</template>
-        <template #copyright>
-          <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
-        </template>
-      </ref-figure>
-
-      <ref-figure polaroidBorder>
-        <template #img>
-          <img
-            src="@/assets/refs/muscle/muscle-ref7.jpg"
-            alt="Sebin ready to throw down"
-          />
-        </template>
-        <template #caption>Sebin ready to throw down</template>
-        <template #copyright>
-          <a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
-        </template>
-      </ref-figure>
-
-      <ref-figure polaroidBorder>
-        <template #img>
-          <img
-            src="@/assets/refs/muscle/muscle-ref8.jpg"
-            alt="Sebin being high and mighty"
-          />
-        </template>
-        <template #caption>Sebin being high and mighty</template>
-        <template #copyright>
-          <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
-        </template>
-      </ref-figure>
-
-      <ref-figure polaroidBorder>
-        <template #img>
-          <img
-            src="@/assets/refs/muscle/muscle-ref9.jpg"
-            alt="Sebin getting out of the pool"
-          />
-        </template>
-        <template #caption>Sebin getting out of the pool</template>
-        <template #copyright>
-          <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
-        </template>
-      </ref-figure>
-
-      <ref-figure polaroidBorder>
-        <template #img>
-          <img
-            src="@/assets/refs/muscle/muscle-ref10.jpg"
-            alt="Sebin sporting the construction worker look"
-          />
-        </template>
-        <template #caption>
-          Sebin sporting the construction worker look
-        </template>
-        <template #copyright>
-          <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
-        </template>
-      </ref-figure>
-
-      <ref-figure polaroidBorder>
-        <template #img>
-          <img
-            src="@/assets/refs/muscle/muscle-ref11.jpg"
-            alt="Sebin lifting weights"
-          />
-        </template>
-        <template #caption>Sebin lifting weights</template>
-        <template #copyright>
-          <a href="https://www.furaffinity.net/user/Marsel-Defender">
-            Marsel-Defender
-          </a>
-        </template>
-      </ref-figure>
-    </ref-gallery>
-
-    <template v-if="$root.nsfw">
-      <h3>Penis</h3>
-      <ref-figure dropshadow>
-        <template #img>
-          <img
-            src="@/assets/refs/sebin-ref-penis.png"
-            alt="Sebin's manly parts"
-          />
-        </template>
-        <template #caption>
-          <label>Sebin's manly parts</label>
-        </template>
-        <template #copyright>
-          <a href="https://twitter.com/draftgon">draftgon</a>
-        </template>
-      </ref-figure>
-
-      <data-table :dataset="getSebinData.penis" />
-
-      <quick-facts>
-        <ul class="col-2">
-          <li>Human-shaped with ridges</li>
-          <li>Ring-like sheath surrounding shaft</li>
-          <li>
-            Extends from sheath when erect, lives inside sheath when not erect
-          </li>
-          <li>External balls</li>
-        </ul>
-      </quick-facts>
-
-      <p>
-        Despite his reptilian appearance, Sebin has nipples, a feature of the
-        human side of his family. Furthermore, his external testicles represent
-        another humanized feature. Where relatives of his ilk possess a slit in
-        which the penis lies protectively, Sebin possesses a pouch-like sheath
-        from which the tip of the penis protrudes slightly. The shape of his
-        shaft is predominantly humanoid, but it is surrounded by ridges and has
-        no equivalent of a foreskin. When aroused, the coal-black shaft swells
-        and pushes out of the sheath until fully erect, the sheath wrapping
-        around the root of the shaft like a ring. However, he can also push it
-        out in a flaccid state, e.g. when needing to pass water.
-      </p>
-    </template>
-
-    <template v-else>
-      <h3>But, wait! There's more...</h3>
-
-      <p>
-        Sebin like you haven't seen him yet! Flip the switch to reveal his
-        naughty secrets. If you dare...! Don't say I didn't warn you!!
-      </p>
-
-      <p>
-        <nsfw-switch
-          id="nsfw-switch-manlybits"
-          v-model="$root.nsfw"
-          @change="$root.showWarning()"
-        />
-      </p>
-    </template>
-  </prose>
-</template>
-
-<script>
-import Prose from "@/components/Prose.vue";
-import NsfwSwitch from "@/components/NsfwSwitch.vue";
-import NsfwWarning from "@/components/NsfwWarning.vue";
-import RefFigure from "@/components/Figure.vue";
-import QuickFacts from "@/components/QuickFacts.vue";
-import DataTable from "@/components/DataTable.vue";
-import RefGallery from "@/components/Gallery.vue";
-
-import Sebin from "@/mixins/Sebin.js";
-import Helper from "@/mixins/Helper.js";
-
-export default {
-  components: {
-    Prose,
-    NsfwSwitch,
-    NsfwWarning,
-    RefFigure,
-    QuickFacts,
-    DataTable,
-    RefGallery,
-  },
-  mixins: [Sebin, Helper],
-};
-</script>
diff --git a/src/views/AnatomyView.vue b/src/views/AnatomyView.vue
new file mode 100644
index 0000000..5292610
--- /dev/null
+++ b/src/views/AnatomyView.vue
@@ -0,0 +1,892 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import { isWarnKey, nsfwKey, showModalKey } from "@/keys";
+import type { ColorDict } from "@/interfaces";
+import { tailLength, wingspan, penis, colors } from "@/sebin";
+import { toImperial, toFahrenheit } from "@/helpers";
+import RefToggle from "@/components/RefToggle.vue";
+import RefModal from "@/components/RefModal.vue";
+import RefGallery from "@/components/RefGallery.vue";
+import RefFigure from "@/components/RefFigure.vue";
+import ColorTable from "@/components/ColorTable.vue";
+import DataTable from "@/components/DataTable.vue";
+import QuickFacts from "@/components/QuickFacts.vue";
+
+const sebinColors: ColorDict[] = [
+  { name: "Scales", value: colors.scalesPrimary },
+  { name: "Chest, Wings (front)", value: colors.scalesSecondary },
+  { name: "Hair", value: colors.hairPrimary },
+  { name: "Hair Streaks (optional)", value: colors.hairSecondary },
+  { name: "Eyes", value: colors.eyes },
+  { name: "Facial Spikes", value: colors.eyebrows },
+  { name: "Horns/Claws/Nipples", value: colors.horns },
+  { name: "Tail Spikes", value: colors.tailspikes },
+];
+
+const sebinPenisHeadings = ["Key", "Value"];
+const sebinPenisData = [
+  ["Shape", penis.shape],
+  ["Type", penis.type],
+  ["Special Traits", penis.special],
+  ["Color", colors.penis],
+  ["Length", `${penis.size} cm (${toImperial(penis.size)})`],
+  ["Girth", `${penis.girth} cm (${toImperial(penis.girth)})`],
+];
+
+const isNsfw = inject<boolean>(nsfwKey, false);
+const isWarn = inject<boolean>(isWarnKey, false);
+const showModal = inject<Function>(showModalKey, Function);
+</script>
+
+<template>
+  <RefModal v-show="isWarn">
+    <template #heading>
+      ⚠️⚠️⚠️<br />
+      Whoa, Nelly!
+    </template>
+
+    <template #message>
+      By enabling NSFW mode you confirm that you are of legal age to view adult
+      content.
+    </template>
+
+    <template #yes>Yes, show me the goods 👀</template>
+    <template #no>NO, STAHP 😱</template>
+  </RefModal>
+
+  <section>
+    <h1>{{ $route.name }}</h1>
+  </section>
+
+  <RefFigure id="sebin-fullbody-ref" dropshadow>
+    <!-- max 3360px -->
+    <template #img>
+      <picture v-if="isNsfw">
+        <source
+          srcset="
+            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&avif&quality=75&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 2240px,
+                 (min-width: 100em) 1920px,
+                 (min-width: 90em) 1600px,
+                 (min-width: 80em) 1440px,
+                 (min-width: 67.5em) 1280px,
+                 (min-width: 45em) 1080px,
+                 (min-width: 30em) 720px,
+                 480px"
+          type="image/avif"
+        />
+        <source
+          srcset="
+            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&webp&quality=100&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 2240px,
+                 (min-width: 100em) 1920px,
+                 (min-width: 90em) 1600px,
+                 (min-width: 80em) 1440px,
+                 (min-width: 67.5em) 1280px,
+                 (min-width: 45em) 1080px,
+                 (min-width: 30em) 720px,
+                 480px"
+          type="image/webp"
+        />
+        <img
+          srcset="
+            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&png&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 2240px,
+                 (min-width: 100em) 1920px,
+                 (min-width: 90em) 1600px,
+                 (min-width: 80em) 1440px,
+                 (min-width: 67.5em) 1280px,
+                 (min-width: 45em) 1080px,
+                 (min-width: 30em) 720px,
+                 480px"
+          alt="Sebin Full Body Ref"
+          loading="lazy"
+        />
+      </picture>
+      <picture v-else>
+        <source
+          srcset="
+            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&avif&quality=75&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 2240px,
+                 (min-width: 100em) 1920px,
+                 (min-width: 90em) 1600px,
+                 (min-width: 80em) 1440px,
+                 (min-width: 67.5em) 1280px,
+                 (min-width: 45em) 1080px,
+                 (min-width: 30em) 720px,
+                 480px"
+          type="image/avif"
+        />
+        <source
+          srcset="
+            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&webp&quality=100&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 2240px,
+                 (min-width: 100em) 1920px,
+                 (min-width: 90em) 1600px,
+                 (min-width: 80em) 1440px,
+                 (min-width: 67.5em) 1280px,
+                 (min-width: 45em) 1080px,
+                 (min-width: 30em) 720px,
+                 480px"
+          type="image/webp"
+        />
+        <img
+          srcset="
+            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&png&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 2240px,
+                 (min-width: 100em) 1920px,
+                 (min-width: 90em) 1600px,
+                 (min-width: 80em) 1440px,
+                 (min-width: 67.5em) 1280px,
+                 (min-width: 45em) 1080px,
+                 (min-width: 30em) 720px,
+                 480px"
+          alt="Sebin Full Body Ref"
+          loading="lazy"
+        />
+      </picture>
+    </template>
+
+    <template #caption>
+      <RefToggle
+        id="sebin-fullbody-ref"
+        v-model="isNsfw"
+        @click.prevent="showModal()"
+      >
+        <template #off>😇</template>
+        <template #on>😈</template>
+      </RefToggle>
+
+      <div>Sebin Full Body Reference</div>
+    </template>
+
+    <template #copyright>
+      <a href="https://twitter.com/Sr_Draftgon">draftgon</a>
+    </template>
+  </RefFigure>
+
+  <section>
+    <ColorTable :colors="sebinColors" />
+
+    <QuickFacts>
+      <ul class="col-2">
+        <li>Bipedal plantigrade</li>
+        <li>Red and yellow scales</li>
+        <li>Yellow scales under chin, torso, underside of tail</li>
+        <li>Athletic to body builder physique</li>
+        <li>Sharp, black claws on fingers and toes</li>
+        <li>Brown blunt spikes running over back and top-side of tail</li>
+        <li>
+          Tail about {{ tailLength / 100 }} meter ({{ toImperial(tailLength) }})
+          in length
+        </li>
+      </ul>
+    </QuickFacts>
+
+    <p>
+      As the offspring of a union between human and dragon, Sebin is a bipedal
+      plantigrade. The majority of his body is covered in red scales. A strip of
+      yellow scales runs from the underside of his jaw, extending down his chest
+      through his legs to the underside of the tip of his tail. The scales on
+      his chest are characterized by a special toughness to better protect vital
+      organs. He also has an athletic to muscular physique that he continuously
+      tends to keep in shape. Finger and toe tips are armed with sharp, black
+      claws, which serve him equally as tools and weapons. Brown spines run from
+      head to spine to tip of tail, though they are too blunt to pose a risk of
+      injury. His tail is about
+      {{ tailLength / 100 }} meters ({{ toImperial(tailLength) }}) in length.
+    </p>
+  </section>
+
+  <section>
+    <h2>Wings</h2>
+
+    <QuickFacts>
+      <ul class="col-2">
+        <li>
+          Wingspan {{ wingspan / 100 }} meters ({{ toImperial(wingspan) }})
+        </li>
+        <li>Closed when on the ground</li>
+        <li>Function like a second pair of arms</li>
+        <li>Pointy talon on end of "hand"</li>
+      </ul>
+    </QuickFacts>
+
+    <p>
+      Sebin's wings have a span of about {{ wingspan / 100 }} meters ({{
+        toImperial(wingspan)
+      }}). They function very much like a second pair of arms: two
+      interconnected limbs that form a bendable arm, at the end of which sits a
+      hand-like structure, adorned with a talon in exchange for a thumb, with a
+      sturdy membrane stretched between its long fingers. On solid ground, he
+      keeps his wings closed so as not to accidentally bump into anything with
+      them. Sebin also pays a lot of attention to his wings when working out, so
+      that they can keep carrying him reliably through the air. Though, he only
+      travels short to medium distances through the air before he has to take a
+      rest - as long as the airspace in the area has been declared open for wing
+      bearers.
+    </p>
+  </section>
+
+  <section>
+    <h2>Head</h2>
+  </section>
+
+  <RefFigure id="sebin-expressions" dropshadow>
+    <!-- max 2702px -->
+    <template #img>
+      <picture>
+        <source
+          srcset="
+            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&avif&quality=75&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 2240px,
+                 (min-width: 100em) 1920px,
+                 (min-width: 90em) 1600px,
+                 (min-width: 80em) 1440px,
+                 (min-width: 67.5em) 1280px,
+                 (min-width: 45em) 1080px,
+                 (min-width: 30em) 720px,
+                 480px"
+          type="image/avif"
+        />
+        <source
+          srcset="
+            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&webp&quality=100&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 2240px,
+                 (min-width: 100em) 1920px,
+                 (min-width: 90em) 1600px,
+                 (min-width: 80em) 1440px,
+                 (min-width: 67.5em) 1280px,
+                 (min-width: 45em) 1080px,
+                 (min-width: 30em) 720px,
+                 480px"
+          type="image/webp"
+        />
+        <img
+          srcset="
+            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&png&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 2240px,
+                 (min-width: 100em) 1920px,
+                 (min-width: 90em) 1600px,
+                 (min-width: 80em) 1440px,
+                 (min-width: 67.5em) 1280px,
+                 (min-width: 45em) 1080px,
+                 (min-width: 30em) 720px,
+                 480px"
+          alt="Sebin's Expressions"
+          loading="lazy"
+        />
+      </picture>
+    </template>
+    <template #caption>Sebin's Expressions</template>
+    <template #copyright>
+      <a href="https://twitter.com/Sr_Draftgon">draftgon</a>
+    </template>
+  </RefFigure>
+
+  <section>
+    <QuickFacts>
+      <ul class="col-2">
+        <li>Round pupils, green iris</li>
+        <li>Yellow spikes for eyebrows</li>
+        <li>Yellow spikes on cheeks</li>
+        <li>Black horns with slight curve downwards</li>
+        <li>Blue, medium long hair</li>
+        <li>Long, pointy, movable ears</li>
+        <li>Very sharp teeth</li>
+        <li>Tongue with pointy tip</li>
+      </ul>
+    </QuickFacts>
+
+    <p>
+      Despite what one might expect with reptilians, Sebin's pupils are rounded
+      instead of slit-shaped. Yellow spikes running above his eyelids serve as
+      eyebrows. These spikes are also found along his jaw bone. Two pointed,
+      slightly curved, black horns protrude from his head. He usually wears his
+      medium-length, blue hair loose. His long, pointed ears are very flexible,
+      allowing him to hear sounds around him without having to turn his head.
+      They are also used for non-verbal communication, to express emotions
+      through body language. His hearing perceives a wider range of frequencies,
+      making it superior to that of a human. His jaws are equipped with
+      razor-sharp teeth that effortlessly sink into anything he manages to bite,
+      be it nourishment or adversaries. Embedded between them lies his tongue,
+      which is typically pointed for reptilians. Glands in his throat produce a
+      mixture which he uses to spit fire, which can reach up to around 100 °C
+      ({{ toFahrenheit(100) }} °F).
+    </p>
+  </section>
+
+  <section>
+    <h2>Upper Body</h2>
+
+    <QuickFacts>
+      <ul class="col-2">
+        <li>Strong upper body</li>
+        <li>Big pecs</li>
+        <li>Defined abs</li>
+        <li>Black nipples</li>
+        <li>
+          Any muscle mass from athletic to body builder is fine, with a
+          preference towards body builder
+        </li>
+      </ul>
+    </QuickFacts>
+
+    <p>
+      At the age of 17, Sebin gradually began to keep his body in shape on a
+      regular basis. His favorite exercises include weightlifting (with both
+      dumbbells and barbells), lat pulldown, leg press and cable curls. He works
+      out three days a week with one day off between training days, rotating the
+      body regions he trains each day.
+    </p>
+  </section>
+
+  <RefFigure id="sebin-upper-body-ref" polaroidBorder>
+    <!-- max 3617px -->
+    <template #img>
+      <picture>
+        <source
+          srcset="
+            @/assets/refs/upper-body-ref.png?w=400;500;600;700;800;1000;1200;1500;1800&avif&quality=75&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+          type="image/avif"
+        />
+        <source
+          srcset="
+            @/assets/refs/upper-body-ref.png?w=400;500;600;700;800;1000;1200;1500;1800&webp&quality=100&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+          type="image/webp"
+        />
+        <img
+          srcset="
+            @/assets/refs/upper-body-ref.png?w=400;500;600;700;800;1000;1200;1500;1800&jpg&quality=95&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+          alt="Sebin's upper body closeup"
+          loading="lazy"
+        />
+      </picture>
+    </template>
+    <template #caption>Sebin's upper body closeup</template>
+    <template #copyright>
+      <a href="https://twitter.com/NidtheDragon">NidtheDragon</a>
+    </template>
+  </RefFigure>
+
+  <section>
+    <p>
+      Sebin is very concerned with an even distribution of muscle mass, but pays
+      particular attention to his back, chest and arms. A strong chest with
+      strong arms helps to throw fire projectiles as far as possible. A strong
+      back guarantees a longer stay in the air.
+    </p>
+  </section>
+
+  <section>
+    <h2>Additional Muscle References</h2>
+  </section>
+
+  <RefGallery>
+    <RefFigure id="sebin-muscle-ref12" polaroidBorder>
+      <!-- max 1964px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref12.png?w=290;640;770;900;580;1280;1540;1800;870;0&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref12.png?w=290;640;770;900;580;1280;1540;1800;870;0&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/muscle/muscle-ref12.png?w=290;640;770;900;580;1280;1540;1800;870;0&jpg&quality=95&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
+            alt="Sebin flexing"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #caption>Sebin flexing</template>
+      <template #copyright>
+        <a href="https://twitter.com/KidRhinoBoy">Chirros</a>
+      </template>
+    </RefFigure>
+    <RefFigure id="sebin-muscle-ref1" polaroidBorder nsfw>
+      <!-- max 2480px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref1.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref1.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/muscle/muscle-ref1.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&jpg&quality=95&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+            alt="Sebin beckons"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #caption>Sebin beckons</template>
+      <template #copyright>
+        <a href="https://twitter.com/GrisserArt">Grisser</a>
+      </template>
+    </RefFigure>
+    <RefFigure id="sebin-muscle-ref2" polaroidBorder>
+      <!-- max 2953px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref2.png?w=415;625;750;875;1250;1500;1750;1875;2250;2625&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref2.png?w=415;625;750;875;1250;1500;1750;1875;2250;2625&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/muscle/muscle-ref2.png?w=415;625;750;875;1250;1500;1750;1875;2250;2625&jpg&quality=95&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
+            alt="Sebin jamming out to some tunes"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #caption>Sebin jamming out to some tunes</template>
+      <template #copyright>
+        <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
+      </template>
+    </RefFigure>
+    <RefFigure id="sebin-muscle-ref3" polaroidBorder>
+      <!-- max 4961px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref3.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref3.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/muscle/muscle-ref3.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&jpg&quality=95&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+            alt="Sebin flexing"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #caption>Sebin flexing</template>
+      <template #copyright>
+        <a href="https://www.furaffinity.net/user/Marsel-Defender">
+          Marsel-Defender
+        </a>
+      </template>
+    </RefFigure>
+    <RefFigure id="sebin-muscle-ref4" polaroidBorder nsfw>
+      <!-- max 3000px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref4.png?w=400;700;840;980;800;1400;1680;1960;1200;2100;2520;0&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref4.png?w=400;700;840;980;800;1400;1680;1960;1200;2100;2520;0&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/muscle/muscle-ref4.png?w=400;700;840;980;800;1400;1680;1960;1200;2100;2520;0&jpg&quality=95&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
+            alt="Sebin soaping up"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #caption>Sebin soaping up</template>
+      <template #copyright>
+        <a href="https://twitter.com/O_reowoof">(o)reo</a>
+      </template>
+    </RefFigure>
+    <RefFigure id="sebin-muscle-ref5" polaroidBorder nsfw>
+      <!-- max 2000px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref5.jpg?w=415;525;630;735;830;1050;0&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref5.jpg?w=415;525;630;735;830;1050;0&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/muscle/muscle-ref5.jpg?w=415;525;630;735;830;1050;0&jpg&quality=95&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
+            alt="Sebin bulging out"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #caption>Sebin bulging out</template>
+      <template #copyright>
+        <a href="https://www.furaffinity.net/user/sexmuffin">SexMuffin</a>
+      </template>
+    </RefFigure>
+    <RefFigure id="sebin-muscle-ref6" polaroidBorder nsfw>
+      <!-- max 1500px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref6.png?w=400;545;655;765;800;1090;1310;1200;0&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref6.png?w=400;545;655;765;800;1090;1310;1200;0&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/muscle/muscle-ref6.png?w=400;545;655;765;800;1090;1310;1200;0&jpg&quality=95&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
+            alt="Sebin showing you his rings"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #caption>Sebin showing you his rings</template>
+      <template #copyright>
+        <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
+      </template>
+    </RefFigure>
+    <RefFigure id="sebin-muscle-ref7" polaroidBorder>
+      <!-- max 1240px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 995px, 415px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 992px, 415px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&jpg&quality=95&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 992px, 415px"
+            alt="Sebin ready to throw down"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #caption>Sebin ready to throw down</template>
+      <template #copyright>
+        <a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
+      </template>
+    </RefFigure>
+    <RefFigure id="sebin-muscle-ref8" polaroidBorder>
+      <!-- max 1245px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&jpg&quality=95&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
+            alt="Sebin looking aloof (but chill)"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #caption>Sebin looking aloof (but chill)</template>
+      <template #copyright>
+        <a href="https://twitter.com/UsurpThem">Usurp</a>
+      </template>
+    </RefFigure>
+    <RefFigure id="sebin-muscle-ref9" polaroidBorder>
+      <!-- max 2550px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;880;1120;800;1470;1760;2240;1200;2205;0&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;880;1120;800;1470;1760;2240;1200;2205;0&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;880;1120;800;1470;1760;2240;1200;2205;0&jpg&quality=95&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
+            alt="Sebin getting out of the pool"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #caption>Sebin getting out of the pool</template>
+      <template #copyright>
+        <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
+      </template>
+    </RefFigure>
+    <RefFigure id="sebin-muscle-ref10" polaroidBorder nsfw>
+      <!-- max 2421px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref10.jpg?w=380;425;510;600;760;850;1020;1200;1140;1275;1530;1800&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref10.jpg?w=380;425;510;600;760;850;1020;1200;1140;1275;1530;1800&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/muscle/muscle-ref10.jpg?w=380;425;510;600;760;850;1020;1200;1140;1275;1530;1800&jpg&quality=95&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
+            alt="Sebin getting frisky on the train"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #caption> Sebin getting frisky on the train </template>
+      <template #copyright>
+        <a href="https://twitter.com/Wintech3112">Winty</a>
+      </template>
+    </RefFigure>
+    <RefFigure id="sebin-muscle-ref11" polaroidBorder>
+      <!-- max 3184px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref11.png?w=400;545;655;765;800;1090;1210;1530;1200;1635;1965;2295&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/muscle/muscle-ref11.png?w=400;545;655;765;800;1090;1210;1530;1200;1635;1965;2295&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/muscle/muscle-ref11.png?w=400;545;655;765;800;1090;1210;1530;1200;1635;1965;2295&png&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
+            alt="Sebin getting ready to lift"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #caption>Sebin getting ready to lift</template>
+      <template #copyright>
+        <a href="https://twitter.com/EdaMonstr"> Eda </a>
+      </template>
+    </RefFigure>
+  </RefGallery>
+
+  <template v-if="isNsfw">
+    <section>
+      <h2>Penis</h2>
+    </section>
+
+    <RefFigure id="sebin-penis-ref" dropshadow>
+      <!-- max 1155px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/sebin-ref-penis.png?w=480;720;0&avif&quality=75&srcset
+            "
+            sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/sebin-ref-penis.png?w=480;720;0&webp&quality=100&srcset
+            "
+            sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
+            type="image/webp"
+          />
+          <img
+            srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&png&srcset"
+            sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
+            alt="Sebin's manly parts"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+      <template #caption>
+        <label>Sebin's manly parts</label>
+      </template>
+      <template #copyright>
+        <a href="https://twitter.com/Sr_Draftgon">draftgon</a>
+      </template>
+    </RefFigure>
+
+    <section>
+      <DataTable :headings="sebinPenisHeadings" :data="sebinPenisData" />
+
+      <QuickFacts>
+        <ul class="col-2">
+          <li>Human-shaped with ridges</li>
+          <li>Ring-like sheath surrounding shaft</li>
+          <li>
+            Extends from sheath when erect, lives inside sheath when not erect
+          </li>
+          <li>External balls</li>
+        </ul>
+      </QuickFacts>
+
+      <p>
+        Despite his reptilian appearance, Sebin has nipples, a feature of the
+        human side of his family. Furthermore, his external testicles represent
+        another humanized feature. Where relatives of his ilk possess a slit in
+        which the penis lies protectively, Sebin possesses a pouch-like sheath
+        from which the tip of the penis protrudes slightly. The shape of his
+        shaft is predominantly humanoid, but it is surrounded by ridges and has
+        no equivalent of a foreskin. When aroused, the coal-black shaft swells
+        and pushes out of the sheath until fully erect, the sheath wrapping
+        around the root of the shaft like a ring. However, he can also push it
+        out in a flaccid state, e.g. when needing to pass water.
+      </p>
+    </section>
+  </template>
+
+  <template v-else>
+    <section>
+      <h2>But, wait! There's more...</h2>
+
+      <p>
+        Sebin like you haven't seen him yet! Flip the switch to reveal his
+        naughty secrets. If you dare...! Don't say I didn't warn you!!
+      </p>
+
+      <p>
+        <RefToggle
+          id="sebin-manly-bits"
+          v-model="isNsfw"
+          @click.prevent="showModal()"
+        >
+          <template #off>😇</template>
+          <template #on>😈</template>
+        </RefToggle>
+      </p>
+    </section>
+  </template>
+</template>
+
+<style lang="scss"></style>