diff --git a/assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp b/assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp
new file mode 100755
index 0000000..b3596f0
Binary files /dev/null and b/assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp differ
diff --git a/assets/img/c3cat-c3sign-cccamp23-transparent.webp b/assets/img/c3cat-c3sign-cccamp23-transparent.webp
new file mode 100755
index 0000000..e202ae4
Binary files /dev/null and b/assets/img/c3cat-c3sign-cccamp23-transparent.webp differ
diff --git a/assets/img/rgb-ears-39c3/10_1280.webp b/assets/img/rgb-ears-39c3/10_1280.webp
new file mode 100644
index 0000000..488859e
Binary files /dev/null and b/assets/img/rgb-ears-39c3/10_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/10_1920.webp b/assets/img/rgb-ears-39c3/10_1920.webp
new file mode 100644
index 0000000..2074cfc
Binary files /dev/null and b/assets/img/rgb-ears-39c3/10_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/10_4960.webp b/assets/img/rgb-ears-39c3/10_4960.webp
new file mode 100644
index 0000000..875002a
Binary files /dev/null and b/assets/img/rgb-ears-39c3/10_4960.webp differ
diff --git a/assets/img/rgb-ears-39c3/11_1280.webp b/assets/img/rgb-ears-39c3/11_1280.webp
new file mode 100644
index 0000000..0c2854b
Binary files /dev/null and b/assets/img/rgb-ears-39c3/11_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/11_1920.webp b/assets/img/rgb-ears-39c3/11_1920.webp
new file mode 100644
index 0000000..69d3e9e
Binary files /dev/null and b/assets/img/rgb-ears-39c3/11_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/11_5984.webp b/assets/img/rgb-ears-39c3/11_5984.webp
new file mode 100644
index 0000000..2df58c9
Binary files /dev/null and b/assets/img/rgb-ears-39c3/11_5984.webp differ
diff --git a/assets/img/rgb-ears-39c3/12_1280.webp b/assets/img/rgb-ears-39c3/12_1280.webp
new file mode 100644
index 0000000..af7f842
Binary files /dev/null and b/assets/img/rgb-ears-39c3/12_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/12_1920.webp b/assets/img/rgb-ears-39c3/12_1920.webp
new file mode 100644
index 0000000..0d082ac
Binary files /dev/null and b/assets/img/rgb-ears-39c3/12_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/12_6133.webp b/assets/img/rgb-ears-39c3/12_6133.webp
new file mode 100644
index 0000000..83fb2f2
Binary files /dev/null and b/assets/img/rgb-ears-39c3/12_6133.webp differ
diff --git a/assets/img/rgb-ears-39c3/13_1280.webp b/assets/img/rgb-ears-39c3/13_1280.webp
new file mode 100644
index 0000000..5485bcc
Binary files /dev/null and b/assets/img/rgb-ears-39c3/13_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/13_1920.webp b/assets/img/rgb-ears-39c3/13_1920.webp
new file mode 100644
index 0000000..0cb10ed
Binary files /dev/null and b/assets/img/rgb-ears-39c3/13_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/13_5888.webp b/assets/img/rgb-ears-39c3/13_5888.webp
new file mode 100644
index 0000000..3d7168e
Binary files /dev/null and b/assets/img/rgb-ears-39c3/13_5888.webp differ
diff --git a/assets/img/rgb-ears-39c3/14_1280.webp b/assets/img/rgb-ears-39c3/14_1280.webp
new file mode 100644
index 0000000..54d4ffa
Binary files /dev/null and b/assets/img/rgb-ears-39c3/14_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/14_1920.webp b/assets/img/rgb-ears-39c3/14_1920.webp
new file mode 100644
index 0000000..4b31600
Binary files /dev/null and b/assets/img/rgb-ears-39c3/14_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/14_2641.webp b/assets/img/rgb-ears-39c3/14_2641.webp
new file mode 100644
index 0000000..9820b9a
Binary files /dev/null and b/assets/img/rgb-ears-39c3/14_2641.webp differ
diff --git a/assets/img/rgb-ears-39c3/15_1280.webp b/assets/img/rgb-ears-39c3/15_1280.webp
new file mode 100644
index 0000000..42270f5
Binary files /dev/null and b/assets/img/rgb-ears-39c3/15_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/15_1920.webp b/assets/img/rgb-ears-39c3/15_1920.webp
new file mode 100644
index 0000000..5023d1f
Binary files /dev/null and b/assets/img/rgb-ears-39c3/15_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/15_2757.webp b/assets/img/rgb-ears-39c3/15_2757.webp
new file mode 100644
index 0000000..6e0be93
Binary files /dev/null and b/assets/img/rgb-ears-39c3/15_2757.webp differ
diff --git a/assets/img/rgb-ears-39c3/16_1280.webp b/assets/img/rgb-ears-39c3/16_1280.webp
new file mode 100644
index 0000000..2bed997
Binary files /dev/null and b/assets/img/rgb-ears-39c3/16_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/16_1920.webp b/assets/img/rgb-ears-39c3/16_1920.webp
new file mode 100644
index 0000000..5b52a1e
Binary files /dev/null and b/assets/img/rgb-ears-39c3/16_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/16_3064.webp b/assets/img/rgb-ears-39c3/16_3064.webp
new file mode 100644
index 0000000..0232e12
Binary files /dev/null and b/assets/img/rgb-ears-39c3/16_3064.webp differ
diff --git a/assets/img/rgb-ears-39c3/17_1280.webp b/assets/img/rgb-ears-39c3/17_1280.webp
new file mode 100644
index 0000000..1222600
Binary files /dev/null and b/assets/img/rgb-ears-39c3/17_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/17_1920.webp b/assets/img/rgb-ears-39c3/17_1920.webp
new file mode 100644
index 0000000..709c8c9
Binary files /dev/null and b/assets/img/rgb-ears-39c3/17_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/17_6477.webp b/assets/img/rgb-ears-39c3/17_6477.webp
new file mode 100644
index 0000000..305192f
Binary files /dev/null and b/assets/img/rgb-ears-39c3/17_6477.webp differ
diff --git a/assets/img/rgb-ears-39c3/18_1280.webp b/assets/img/rgb-ears-39c3/18_1280.webp
new file mode 100644
index 0000000..75022b9
Binary files /dev/null and b/assets/img/rgb-ears-39c3/18_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/18_1920.webp b/assets/img/rgb-ears-39c3/18_1920.webp
new file mode 100644
index 0000000..d1f1fef
Binary files /dev/null and b/assets/img/rgb-ears-39c3/18_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/18_7560.webp b/assets/img/rgb-ears-39c3/18_7560.webp
new file mode 100644
index 0000000..d1e9fe4
Binary files /dev/null and b/assets/img/rgb-ears-39c3/18_7560.webp differ
diff --git a/assets/img/rgb-ears-39c3/19_1280.webp b/assets/img/rgb-ears-39c3/19_1280.webp
new file mode 100644
index 0000000..ea50407
Binary files /dev/null and b/assets/img/rgb-ears-39c3/19_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/19_1920.webp b/assets/img/rgb-ears-39c3/19_1920.webp
new file mode 100644
index 0000000..344f490
Binary files /dev/null and b/assets/img/rgb-ears-39c3/19_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/19_7352.webp b/assets/img/rgb-ears-39c3/19_7352.webp
new file mode 100644
index 0000000..6f742cb
Binary files /dev/null and b/assets/img/rgb-ears-39c3/19_7352.webp differ
diff --git a/assets/img/rgb-ears-39c3/1_1280.webp b/assets/img/rgb-ears-39c3/1_1280.webp
new file mode 100644
index 0000000..0e557e8
Binary files /dev/null and b/assets/img/rgb-ears-39c3/1_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/1_1919.webp b/assets/img/rgb-ears-39c3/1_1919.webp
new file mode 100644
index 0000000..f58f366
Binary files /dev/null and b/assets/img/rgb-ears-39c3/1_1919.webp differ
diff --git a/assets/img/rgb-ears-39c3/1_6928.webp b/assets/img/rgb-ears-39c3/1_6928.webp
new file mode 100644
index 0000000..b2859b4
Binary files /dev/null and b/assets/img/rgb-ears-39c3/1_6928.webp differ
diff --git a/assets/img/rgb-ears-39c3/20_1280.webp b/assets/img/rgb-ears-39c3/20_1280.webp
new file mode 100644
index 0000000..7bd104d
Binary files /dev/null and b/assets/img/rgb-ears-39c3/20_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/20_1919.webp b/assets/img/rgb-ears-39c3/20_1919.webp
new file mode 100644
index 0000000..baef409
Binary files /dev/null and b/assets/img/rgb-ears-39c3/20_1919.webp differ
diff --git a/assets/img/rgb-ears-39c3/20_5944.webp b/assets/img/rgb-ears-39c3/20_5944.webp
new file mode 100644
index 0000000..344f1a0
Binary files /dev/null and b/assets/img/rgb-ears-39c3/20_5944.webp differ
diff --git a/assets/img/rgb-ears-39c3/21_1280.webp b/assets/img/rgb-ears-39c3/21_1280.webp
new file mode 100644
index 0000000..0e20b88
Binary files /dev/null and b/assets/img/rgb-ears-39c3/21_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/21_1920.webp b/assets/img/rgb-ears-39c3/21_1920.webp
new file mode 100644
index 0000000..72b89f0
Binary files /dev/null and b/assets/img/rgb-ears-39c3/21_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/21_7960.webp b/assets/img/rgb-ears-39c3/21_7960.webp
new file mode 100644
index 0000000..0bf6f08
Binary files /dev/null and b/assets/img/rgb-ears-39c3/21_7960.webp differ
diff --git a/assets/img/rgb-ears-39c3/22_1280.webp b/assets/img/rgb-ears-39c3/22_1280.webp
new file mode 100644
index 0000000..e2a21d9
Binary files /dev/null and b/assets/img/rgb-ears-39c3/22_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/22_1920.webp b/assets/img/rgb-ears-39c3/22_1920.webp
new file mode 100644
index 0000000..08c2020
Binary files /dev/null and b/assets/img/rgb-ears-39c3/22_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/22_6845.webp b/assets/img/rgb-ears-39c3/22_6845.webp
new file mode 100644
index 0000000..8168b27
Binary files /dev/null and b/assets/img/rgb-ears-39c3/22_6845.webp differ
diff --git a/assets/img/rgb-ears-39c3/2_1280.webp b/assets/img/rgb-ears-39c3/2_1280.webp
new file mode 100644
index 0000000..5bfa017
Binary files /dev/null and b/assets/img/rgb-ears-39c3/2_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/2_1920.webp b/assets/img/rgb-ears-39c3/2_1920.webp
new file mode 100644
index 0000000..05a0690
Binary files /dev/null and b/assets/img/rgb-ears-39c3/2_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/2_3032.webp b/assets/img/rgb-ears-39c3/2_3032.webp
new file mode 100644
index 0000000..639ff06
Binary files /dev/null and b/assets/img/rgb-ears-39c3/2_3032.webp differ
diff --git a/assets/img/rgb-ears-39c3/3_1280.webp b/assets/img/rgb-ears-39c3/3_1280.webp
new file mode 100644
index 0000000..553c27f
Binary files /dev/null and b/assets/img/rgb-ears-39c3/3_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/3_1920.webp b/assets/img/rgb-ears-39c3/3_1920.webp
new file mode 100644
index 0000000..5acef26
Binary files /dev/null and b/assets/img/rgb-ears-39c3/3_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/3_3273.webp b/assets/img/rgb-ears-39c3/3_3273.webp
new file mode 100644
index 0000000..037e098
Binary files /dev/null and b/assets/img/rgb-ears-39c3/3_3273.webp differ
diff --git a/assets/img/rgb-ears-39c3/4_1280.webp b/assets/img/rgb-ears-39c3/4_1280.webp
new file mode 100644
index 0000000..9e9a332
Binary files /dev/null and b/assets/img/rgb-ears-39c3/4_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/4_1920.webp b/assets/img/rgb-ears-39c3/4_1920.webp
new file mode 100644
index 0000000..e65b6ac
Binary files /dev/null and b/assets/img/rgb-ears-39c3/4_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/4_3336.webp b/assets/img/rgb-ears-39c3/4_3336.webp
new file mode 100644
index 0000000..3be5c58
Binary files /dev/null and b/assets/img/rgb-ears-39c3/4_3336.webp differ
diff --git a/assets/img/rgb-ears-39c3/5_1280.webp b/assets/img/rgb-ears-39c3/5_1280.webp
new file mode 100644
index 0000000..5944437
Binary files /dev/null and b/assets/img/rgb-ears-39c3/5_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/5_1920.webp b/assets/img/rgb-ears-39c3/5_1920.webp
new file mode 100644
index 0000000..8bb2a12
Binary files /dev/null and b/assets/img/rgb-ears-39c3/5_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/5_3200.webp b/assets/img/rgb-ears-39c3/5_3200.webp
new file mode 100644
index 0000000..8f74c57
Binary files /dev/null and b/assets/img/rgb-ears-39c3/5_3200.webp differ
diff --git a/assets/img/rgb-ears-39c3/6_1280.webp b/assets/img/rgb-ears-39c3/6_1280.webp
new file mode 100644
index 0000000..3b93e80
Binary files /dev/null and b/assets/img/rgb-ears-39c3/6_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/6_1920.webp b/assets/img/rgb-ears-39c3/6_1920.webp
new file mode 100644
index 0000000..7dd5f5b
Binary files /dev/null and b/assets/img/rgb-ears-39c3/6_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/6_6480.webp b/assets/img/rgb-ears-39c3/6_6480.webp
new file mode 100644
index 0000000..80fe215
Binary files /dev/null and b/assets/img/rgb-ears-39c3/6_6480.webp differ
diff --git a/assets/img/rgb-ears-39c3/7_1280.webp b/assets/img/rgb-ears-39c3/7_1280.webp
new file mode 100644
index 0000000..b50b0a6
Binary files /dev/null and b/assets/img/rgb-ears-39c3/7_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/7_1920.webp b/assets/img/rgb-ears-39c3/7_1920.webp
new file mode 100644
index 0000000..9bf7de5
Binary files /dev/null and b/assets/img/rgb-ears-39c3/7_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/7_5976.webp b/assets/img/rgb-ears-39c3/7_5976.webp
new file mode 100644
index 0000000..df141ba
Binary files /dev/null and b/assets/img/rgb-ears-39c3/7_5976.webp differ
diff --git a/assets/img/rgb-ears-39c3/8_1280.webp b/assets/img/rgb-ears-39c3/8_1280.webp
new file mode 100644
index 0000000..917de84
Binary files /dev/null and b/assets/img/rgb-ears-39c3/8_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/8_1920.webp b/assets/img/rgb-ears-39c3/8_1920.webp
new file mode 100644
index 0000000..b855932
Binary files /dev/null and b/assets/img/rgb-ears-39c3/8_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/8_5904.webp b/assets/img/rgb-ears-39c3/8_5904.webp
new file mode 100644
index 0000000..83b1ba8
Binary files /dev/null and b/assets/img/rgb-ears-39c3/8_5904.webp differ
diff --git a/assets/img/rgb-ears-39c3/9_1280.webp b/assets/img/rgb-ears-39c3/9_1280.webp
new file mode 100644
index 0000000..2347bba
Binary files /dev/null and b/assets/img/rgb-ears-39c3/9_1280.webp differ
diff --git a/assets/img/rgb-ears-39c3/9_1920.webp b/assets/img/rgb-ears-39c3/9_1920.webp
new file mode 100644
index 0000000..5392c71
Binary files /dev/null and b/assets/img/rgb-ears-39c3/9_1920.webp differ
diff --git a/assets/img/rgb-ears-39c3/9_4695.webp b/assets/img/rgb-ears-39c3/9_4695.webp
new file mode 100644
index 0000000..13d6c22
Binary files /dev/null and b/assets/img/rgb-ears-39c3/9_4695.webp differ
diff --git a/index.html b/index.html
index 21f85df..eb2f384 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,16 @@
             }
           }
         }
+
+        .muted {
+          color: #ebebeb;
+        }
+
+        @media (prefers-color-scheme: dark) {
+          .muted {
+            color: #2b2b2b;
+          }
+        }
       }
     </style>
   </head>
@@ -60,5 +70,10 @@
         </a>
       </ul>
     </main>
+    <footer>
+      <a href="./rgb-ears-39c3.html" class="muted">
+        RGB-Catear instructions are still available ^-^
+      </a>
+    </footer>
   </body>
 </html>
diff --git a/rgb-ears-39c3.html b/rgb-ears-39c3.html
new file mode 100755
index 0000000..ca7be85
--- /dev/null
+++ b/rgb-ears-39c3.html
@@ -0,0 +1,692 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="assets/css/style.css" />
+    <title>c3cat</title>
+
+    <style>
+    @layer per-site {
+      h1>a, h2>a, h3>a, h4>a, h5>a, h6>a {
+        text-decoration: unset;
+        padding: 0 0.2ch;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      ol.step-by-step-instructions {
+        margin-top: 1.5rem;
+
+        li {
+          margin-top: 1.5rem;
+          margin-bottom: 1.5rem;
+
+          &::marker {
+            color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
+            font-size: larger;
+          }
+
+          &>div {
+            display: flex;
+            flex-direction: row;
+            gap: 1ch;
+            justify-content: space-between;
+          }
+
+          input[type="checkbox"] {
+            margin: 4px;
+            width: 2rem;
+            height: 2rem;
+            flex-shrink: 0;
+            flex-grow: 0;
+          }
+
+          img {
+            margin-bottom: 3rem;
+          }
+        }
+      }
+
+      dl.key-value {
+        display: grid;
+        grid-template-columns: 2ch [keys] fit-content(30ch) [values] auto;
+        column-gap: 2ch;
+        row-gap: 0.2rem;
+
+        &>dt {
+          text-decoration-line: underline;
+          text-decoration-color: var(--accent-color);
+          grid-column-start: keys;
+          text-align: end;
+        }
+        &>dd {
+          margin-left: 0;
+          grid-column-start: values;
+          &::before {
+            content: "➡";
+            margin-right: 2ch;
+            color: color-mix(in hsl, var(--bg-color) 30%, var(--fg-color) 70%);
+          }
+        }
+      }
+
+      fieldset#detail-grade-picker {
+        border-color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
+        display: flex;
+        align-items: baseline;
+
+        label {
+          flex-grow: 1;
+          margin-left: 0.5ch;
+        }
+
+        input,label {
+          cursor: pointer;
+        }
+      }
+
+      /* hide items with .detail-default-hide if the corresponding .detail-show-(all|simplified|short) is not currently active */
+      body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked)) .detail-default-hide.detail-show-all {
+        display: none;
+      }
+      body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked)) .detail-default-hide.detail-show-simplified {
+        display: none;
+      }
+      body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked)) .detail-default-hide.detail-show-short {
+        display: none;
+      }
+
+      /* hide items with .detail-hide-(all|simplified|short) if the corresponding radio button is active */
+      body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked) .detail-hide-all {
+        display: none;
+      }
+      body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked) .detail-hide-simplified {
+        display: none;
+      }
+      body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked) .detail-hide-short {
+        display: none;
+      }
+    }
+    </style>
+  </head>
+  <body class="container">
+    <main>
+      <h1 class="title">39C3 RGB Catear Build Instructions</h1>
+
+      <a href="./">
+        <picture>
+          <source srcset="assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp" media="(prefers-color-scheme: dark)"/>
+          <img src="assets/img/c3cat-c3sign-cccamp23-transparent.webp" alt="C3CAT with a cat ear headband around the 'A'" class="hero-img"/>
+        </picture>
+      </a>
+
+      <section id="introduction">
+        <fieldset id="detail-grade-picker">
+          <legend>How much details do you need?</legend>
+          <input type="radio" id="detail-picker-all" name="detail-grade-picker" value="all" checked>
+          <label for="detail-picker-all">Hold my hand please &gt~&lt</label>
+
+          <input type="radio" id="detail-picker-simplified" name="detail-grade-picker" value="simplified">
+          <label for="detail-picker-simplified">I soldered before :3</label>
+
+          <input type="radio" id="detail-picker-short" name="detail-grade-picker" value="short">
+          <label for="detail-picker-short">Short</label>
+        </fieldset>
+
+        <p>
+          This guide aims to explain in simple terms how to assemble the c3cat catear build kit.
+          If you did not get a hold of one of those kits, take a look at <a href="./catear-bom.html">our BOM</a>.
+        </p>
+
+        <div class="detail-hide-short">
+          <p>
+            Inside this guide, you will find the following content
+          </p>
+          <nav>
+            <ol class="toc">
+              <li><a href="#kit-content">Kit Content</a></li>
+              <li><a href="#step-1">Flash the microcontroller</a></li>
+              <li><a href="#step-2">Solder cables to LED strip</a></li>
+              <li><a href="#step-3">Solder cables to pluggable connector</a></li>
+              <li><a href="#step-4">Solder cables to Microcontroller</a></li>
+              <li><a href="#step-5">Finalize the Assembly</a></li>
+            </ol>
+          </nav>
+        </div>
+
+
+        <p>
+          The general project assembly looks like this where each of the components must be connected via soldering points.
+        </p>
+
+        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
+          <img
+            class="hero-img detail-hide-short"
+            style="aspect-ratio: 16/10;"
+            alt="A picture of an assembled set of LED catears"
+            loading="lazy"
+            srcset="assets/img/rgb-ears-39c3/22_1280.webp 1280w,
+              assets/img/rgb-ears-39c3/22_1920.webp 1920w,
+              assets/img/rgb-ears-39c3/22_6845.webp 6845w"
+          />
+          <pre role="presentation" aria-description="ASCII drawing of the project assembly containing the parts included in the kit.">
+┌─────┐                          ╭───╮
+│ ESP ├┄┄╼ ╾┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄│   │
+└─────┘
+         ╱ ╲         ╱ ╲          ╱ ╲
+     pluggable      long         catear
+     connector      cable        & leds
+          </pre>
+          <p style="margin-bottom: 0.5ch; align-self: start;">In addition to one of our kits, you will need</p>
+          <ul style="margin-top: 0; align-self: start;">
+            <li>soldering equipment</li>
+            <li>a heatgun</li>
+            <li>striping pliers</li>
+            <li>catears</li>
+          </ul>
+        </div>
+      </section>
+
+      <section id="kit-content" class="detail-hide-short">
+        <h2>Kit Content&nbsp<a href="#kit-content">§</a></h2>
+        <p>
+          Out kits contain the following content:
+        </p>
+        <img
+          class="hero-img"
+          style="aspect-ratio: 16/10;"
+          alt="A picture of the kit content layed out on a rat mat. It contains the items listed below"
+          loading="lazy"
+          srcset="assets/img/rgb-ears-39c3/1_1280.webp 1280w,
+            assets/img/rgb-ears-39c3/1_1919.webp 1919w,
+            assets/img/rgb-ears-39c3/1_6928.webp 6982w"
+        />
+        <ul>
+          <li>A 3D printed case for the microcontroller, here shown in bright green</li>
+          <li>An ESP microcontroller</li>
+          <li>An RGB LED strip, shown at the very bottom of the picture</li>
+          <li>One pluggable connector with three separate wires connected to each end separated into two pieces and shown at the top of the pictures</li>
+          <li>One 10cm long, clear piece of heatshrink</li>
+          <li>One 10cm long, small, black piece of heatshrink</li>
+          <li>One 10cm long, large, black piece of heatshrink</li>
+          <li>One long cable</li>
+        </ul>
+      </section>
+
+
+      <section id="step-1">
+        <h2>Flash the microcontroller&nbsp<a href="#step-1">§</a></h2>
+        <p>
+          We recommend to use <a href="https://kno.wled.ge/" rel="external">WLED</a> as a firmware on all our catears.
+          It offers a wide range of features for display and animation and can be controlled comfortably from your smartphone.
+        </p>
+        <ol class="step-by-step-instructions">
+          <li class="detail-hide-short">
+            <div>
+              <label for="connect-esp">
+                Take the microcontroller out of its packaging and connect it to your computer via a USB-C.
+                It will appear on your computer as a serial device.
+
+                <p class="detail-hide-simplified">
+                  Depending on your choice of linux distribution, you may need to ensure that you have appropriate permissions to interact with the serial device.
+                  Check your distros documentation if you are unsure or things are not working as expected.
+                </p>
+              </label>
+              <input type="checkbox" id="connect-esp">
+            </div>
+          </li>
+
+          <li class="detail-hide-short">
+            <div>
+              <label for="go-to-wled-install">
+                Go to <a href="https://install.wled.me/" rel="external">WLED-Install</a> and follow the instructions there.
+
+                <span class="detail-hide-simplified"><br>
+                  If your browser supports the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API" rel="external">Web Serial API</a> (i.e. is Chromium based), you can flash the microcontroller directly from it by pressing the <q>Install</q> button.
+                </span>
+              </label>
+              <input type="checkbox" id="go-to-wled-install">
+            </div>
+          </li>
+
+          <li class="detail-hide-short">
+            <div>
+              <label for="connect-to-wled">
+                After flashing, you will be prompted to choose a WiFi connection.
+                You can skip this step in which case the controller will open its own hotspot to connect to later.
+              </label>
+              <input type="checkbox" id="connect-to-wled">
+            </div>
+          </li>
+
+          <li class="detail-default-hide detail-show-short">
+            <div>
+              <label for="flash-wled">
+                Flash WLED using the <a href="http://wled-install.github.io" rel="external">web installer</a>.
+              </label>
+              <input type="checkbox" id="flash-wled">
+            </div>
+          </li>
+        </ol>
+      </section>
+
+
+      <section id="step-2">
+        <h2>Solder cables to LED strip&nbsp<a href="#step-2">§</a></h2>
+        <p>
+          One of the most important steps is to electircally connect the microcontroller to the LED strip.
+          We will start with the LED side.
+        </p>
+        <p class="detail-hide-short detail-hide-simplified">
+          Basically, the LED strip has three connections. One for data, one for ground and one for voltage.
+          Each of these three functions requires a separately soldered connection.
+        </p>
+        <p class="detail-hide-short">
+          Make sure to <u>solder to the <b>input</b> side of the LED strip</u>.
+        </p>
+
+        <figure class="detail-hide-short detail-hide-simplified">
+          <img
+            class="hero-img"
+            style="aspect-ratio: 16/10;"
+            width=500
+            alt="A picture of the backside of an LED strip exposed. The ou label is visible on the part of it not connected to another strip segment."
+            loading="lazy"
+            srcset="assets/img/rgb-ears-39c3/2_1280.webp 1280w,
+              assets/img/rgb-ears-39c3/2_1920.webp 1920w,
+              assets/img/rgb-ears-39c3/2_3032.webp 3032w"
+          />
+          <figcaption>The <u>wrong</u> side of the LED strip demontrated by the <q>ou</q> (out) label being on the outside.</figcaption>
+        </figure>
+        <figure class="detail-hide-short detail-hide-simplified">
+          <img
+            class="hero-img"
+            style="aspect-ratio: 16/10;"
+            width=500
+            alt="A picture of the backside of an LED strip exposed. The in label is visible on the part of it not connected to another strip segment."
+            loading="lazy"
+            srcset="assets/img/rgb-ears-39c3/3_1280.webp 1280w,
+              assets/img/rgb-ears-39c3/3_1920.webp 1920w,
+              assets/img/rgb-ears-39c3/3_3273.webp 3273w"
+          />
+          <figcaption>The <u>correct</u> side of the LED strip demontrated by the <q>in</q> label being on the outside.</figcaption>
+        </figure>
+
+        <ol class="step-by-step-instructions">
+
+          <li class="detail-hide-short">
+            <div>
+              <label for="prepare-led-cable">
+                Prepare the long cable for soldering by removing its insulation.
+
+                <p class="detail-hide-simplified">
+                  Strip about 1cm of insulation from one end of the long cable using your striping pliers.<br>
+                  The three cores inside should be stripped with something softer and finer. Your fingernails are excellent for this purpose.
+                </p>
+                <img
+                  class="hero-img detail-hide-simplified"
+                  style="aspect-ratio: 16/10;"
+                  width=500
+                  alt="A picture of one end of the long wire but the insulation has been stripped off"
+                  loading="lazy"
+                  srcset="assets/img/rgb-ears-39c3/4_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/4_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/4_3336.webp 3336w"
+                />
+              </label>
+              <input type="checkbox" id="prepare-led-cable">
+            </div>
+          </li>
+
+          <li class="detail-hide-short">
+            <div>
+              <label for="expose-led-contacts">
+                <span>Expose the contacts of the LED strip.</span>
+
+                <p class="detail-hide-simplified">
+                  Peel back the protective paper from the <q>in</q> end of the LED strip.
+                  Also peel back the glue covering the protectors but only from the contacts, not from the whole strip segments.
+                </p>
+              </label>
+              <input type="checkbox" id="expose-led-contacts">
+            </div>
+          </li>
+
+          <li>
+            <div>
+              <label for="solder-to-led-strip">
+                Solder the three cable cores to their corresponding connectors on the LED strip.
+                We use these combinations:
+                <dl class="key-value" style="margin-block: 1rem;">
+                  <dt>Red</dt><dd>+5V</dd>
+                  <dt>Yellow</dt><dd>Data</dd>
+                  <dt>Black</dt><dd>Ground</dd>
+                </dl>
+                <img
+                  class="hero-img detail-hide-simplified detail-hide-short"
+                  style="aspect-ratio: 16/10;"
+                  width=500
+                  alt="A picture of the long wire soldered to the LED strip"
+                  loading="lazy"
+                  srcset="assets/img/rgb-ears-39c3/5_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/5_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/5_3200.webp 3200w"
+                />
+              </label>
+              <input type="checkbox" id="solder-to-led-strip">
+            </div>
+          </li>
+
+          <li class="detail-hide-short">
+            <div>
+              <label for="solder-heatshrink-to-led-strip">
+                Put a <u>2cm</u> piece of the <u>large black heatshrink</u> over the soldered connection.
+
+                <p class="detail-hide-simplified">
+                  You need to cut the 2cm piece off the included heatshrink yourself.
+                  To apply it, place it over the soldering point so that all bits of connective material are covered but so that you hide as few LEDs as you can manage.
+                  In that position, use your heat gun to fix everything into place.
+                </p>
+
+                <img
+                  class="hero-img detail-hide-simplified"
+                  style="aspect-ratio: 16/10;"
+                  width=500
+                  alt="A picture of the led-to-cable-connection but with a heatshrink over the soldering points"
+                  loading="lazy"
+                  srcset="assets/img/rgb-ears-39c3/12_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/12_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/12_6133.webp 6133w"
+                />
+              </label>
+              <input type="checkbox" id="solder-heatshrink-to-led-strip">
+            </div>
+          </li>
+        </ol>
+      </section>
+
+
+      <section id="step-3">
+        <h2>Solder Cable to pluggable connector&nbsp<a href="#step-3">§</a></h2>
+        <p>
+          The other side of the long cable now needs to be connected to the pluggable connector.
+        </p>
+        <ol class="step-by-step-instructions">
+
+          <li class="detail-hide-short">
+            <div>
+              <label for="prepare-led-cable2">
+                Remove the insulation from the unsoldered end of the long cable and grab the <u>male end of the plugs</u><span class="detail-hide-simplified">&nbsp(the one without the pins)</span>.
+              </label>
+              <input type="checkbox" id="prepare-led-cable2">
+            </div>
+          </li>
+
+          <li>
+            <div>
+              <label for="prepare-heatshrinks-on-connector">
+                <span>
+                Put the remainder of the large black heatshrink on the long cable.
+                Also put one equally long piece of the small black heatshrink on each of the pluggable connectors cables.
+                Do this <u>without applying heat</u>.
+                </span>
+
+                <p class="detail-hide-simplified detail-hide-short">
+                  The small heatshrinks need to be put in place now because they cannot be applied after soldering.
+                </p>
+
+                <img
+                  class="hero-img detail-hide-simplified detail-hide-short"
+                  style="aspect-ratio: 16/10;"
+                  width=500
+                  alt="A picture of the heatshrinks prepared as described"
+                  loading="lazy"
+                  srcset="assets/img/rgb-ears-39c3/9_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/9_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/9_4695.webp 4695w"
+                />
+              </label>
+              <input type="checkbox" id="prepare-heatshrinks-on-connector">
+            </div>
+          </li>
+
+          <li>
+            <div>
+              <label for="solder-to-connector">
+                Solder all the cable cores together in pairs
+                <span class="detail-hide-default detail-show-short"> and apply the prepared heatshrink afterwards.</span>.
+                We use these combinations:
+                <dl class="key-value" style="margin-top: 1ch;">
+                  <dt>Red</dt><dd>Red</dd>
+                  <dt>Black</dt><dd>Black</dd>
+                  <dt>Yellow</dt><dd>White</dd>
+                </dl>
+
+                <img
+                  class="hero-img detail-hide-simplified detail-hide-short"
+                  style="aspect-ratio: 16/10; margin-top: 1rem;"
+                  width=500
+                  alt="A picture of the pluggable connector cables soldered to the cores of the long cable"
+                  loading="lazy"
+                  srcset="assets/img/rgb-ears-39c3/10_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/10_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/10_4960.webp 4960w"
+                />
+              </label>
+              <input type="checkbox" id="solder-to-connector">
+            </div>
+          </li>
+
+          <li class="detail-hide-short">
+            <div>
+              <label for="heatshrink-to-connector-long-cable-side">
+                <span>Apply the prepared heatshrinks.</span>
+                <span class="detail-hide-short detail-hide-simplified">
+                  Make sure that you wrap each cable core in heatshrink individually <b>and then</b> put an additional heatshrink over the whole connection as a whole.
+                </span>
+
+                <img
+                  class="hero-img detail-hide-simplified detail-hide-short"
+                  style="aspect-ratio: 16/10; margin-top: 1rem;"
+                  width=500
+                  alt="A picture of the connection between long cable and plug where each core is protected by an individual heatshrink"
+                  loading="lazy"
+                  srcset="assets/img/rgb-ears-39c3/11_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/11_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/11_5984.webp 5984w"
+                />
+                <img
+                  class="hero-img detail-hide-simplified detail-hide-short"
+                  style="aspect-ratio: 16/10; margin-top: 1rem;"
+                  width=500
+                  alt="A picture of the connection between long cable and plug where the connection is protected as a whole by one heatshrink"
+                  loading="lazy"
+                  srcset="assets/img/rgb-ears-39c3/13_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/13_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/13_5888.webp 5888w"
+                />
+              </label>
+              <input type="checkbox" id="heatshrink-to-connector-long-cable-side">
+            </div>
+          </li>
+
+        </ol>
+      </section>
+
+
+      <section id="step-4">
+        <h2>Solder Pluggable Connector to Microcontroller&nbsp<a href="#step-4">§</a></h2>
+        <p>
+          Now you need to solder the other (female) part of the pluggable connector to your microcontroller.
+        </p>
+        <div style="display: flex; flex-grow: 1; flex-wrap: wrap;">
+          <img
+            class="detail-hide-short detail-hide-short detail-hide-simplified"
+            style="aspect-ratio: 1/1; flex-basis: 300px;"
+            width=300
+            alt="The front side of the included microcontroller"
+            loading="lazy"
+            srcset="assets/img/rgb-ears-39c3/14_1280.webp 1280w,
+              assets/img/rgb-ears-39c3/14_1920.webp 1920w,
+              assets/img/rgb-ears-39c3/14_2641.webp 2641w"
+          />
+          <img
+            class="detail-hide-short detail-hide-simplified"
+            style="aspect-ratio: 1/1; max-width: 300px;"
+            width=300
+            alt="The backside of the included microcontroller"
+            loading="lazy"
+            srcset="assets/img/rgb-ears-39c3/15_1280.webp 1280w,
+              assets/img/rgb-ears-39c3/15_1920.webp 1920w,
+              assets/img/rgb-ears-39c3/15_2757.webp 2757w"
+          />
+        </div>
+        <ol class="step-by-step-instructions">
+
+          <li>
+            <div>
+              <label for="solder-plug-to-esp">
+                Solder the female side of the pluggable connector to the microcontroller.
+
+                <dl class="key-value" style="margin-block: 1rem;">
+                  <dt>Red</dt><dd>5V</dd>
+                  <dt>Black</dt><dd>Ground</dd>
+                  <dt>White</dt><dd>GPIO 2</dd>
+                </dl>
+
+                <img
+                  class="detail-hide-simplified detail-hide-short"
+                  style="aspect-ratio: 16/10;"
+                  width=500
+                  alt="Picture of the cables of the pluggable connector soldered to the microcontroller"
+                  loading="lazy"
+                  srcset="assets/img/rgb-ears-39c3/16_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/16_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/16_3064.webp 3064w"
+                />
+              </label>
+              <input type="checkbox" id="solder-plug-to-esp">
+            </div>
+          </li>
+        </ol>
+      </section>
+
+
+      <section id="step-5">
+        <h2>Finalize the Assembly&nbsp<a href="#step-6">§</a></h2>
+        <ol class="step-by-step-instructions">
+
+          <li>
+            <div>
+              <label for="place-esp-in-case">
+                <span>Place the microcontroller in the included case.</span>
+
+                <img
+                  class="hero-img detail-hide-short"
+                  style="aspect-ratio: 16/10; margin-top: 1rem;"
+                  width=500
+                  alt="Picture of the microcontroller nested into the open case"
+                  loading="lazy"
+                  srcset="assets/img/rgb-ears-39c3/17_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/17_1920.webp w,
+                    assets/img/rgb-ears-39c3/17_6477.webp 6477w"
+                />
+              </label>
+              <input type="checkbox" id="place-esp-in-case">
+            </div>
+          </li>
+
+          <li>
+            <div>
+              <label for="prepare-heatshrinks-on-led-strip">
+                <span>Cut off <u>two 1cm long pieces of the clear heatshrink</u> and put them on long cable of the LED strip <b>without heating</b>.</span>
+                <img
+                  class="hero-img detail-hide-short detail-hide-simplified"
+                  style="aspect-ratio: 16/10; margin-top: 1rem;"
+                  width=500
+                  alt="Picture of the microcontroller nested into the open case"
+                  loading="lazy"
+                  srcset="assets/img/rgb-ears-39c3/19_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/19_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/19_7352.webp 7352w"
+                />
+              </label>
+              <input type="checkbox" id="prepare-heatshrinks-on-led-strip">
+            </div>
+          </li>
+
+          <li>
+            <div>
+              <label for="glue-leds-to-catears">
+                <span>Attach the LED strip onto your favourite pair of catears.</span>
+                <span class="detail-hide-short">
+                  The end of the LED strip should align with the outer corner of one of the ears.
+                  After you have aligned the first part, glue the remaining strip firmly onto the ears.
+                </span>
+
+                <p class="detail-hide-simplified detail-hide-short">
+                  The strip contains its own glue strip on the bottom.
+                  To use it, peel off the protective cover (without also removing the glue coating) and start attaching it to your catears.
+                </p>
+
+                <img
+                  class="hero-img detail-hide-short"
+                  style="aspect-ratio: 16/10;"
+                  width=500
+                  alt="Picture of one cat ear with the LED strip partially applied. The image is focused on the alignment of the LED strip with the catear."
+                  loading="lazy"
+                  srcset="assets/img/rgb-ears-39c3/20_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/20_1919.webp 1919w,
+                    assets/img/rgb-ears-39c3/20_5944.webp 5944w"
+                />
+
+              </label>
+              <input type="checkbox" id="glue-leds-to-catears">
+            </div>
+          </li>
+
+          <li>
+            <div>
+              <label for="heatshrink-fasten-led-strip"
+                <span>
+                  To secure the LED strip, pull the two 1cm pieces of clear heatshrink over the ends and apply them there.
+                  Additionally, use the larger part of the clear heatshrink to secure the long cable to one of the ear holders.
+                </span>
+                <p class="detail-hide-short">
+                  Be careful to not apply too much heat. Otherwise, the plastic of the catears themselves might start to melt.
+                </p>
+                <img
+                  class="hero-img detail-hide-short"
+                  style="aspect-ratio: 16/10; margin-top: 1rem;"
+                  width=500
+                  alt="Picture of one cat ear with the LED strip partially applied. The image is focused on the alignment of the LED strip with the catear."
+                  loading="lazy"
+                  srcset="assets/img/rgb-ears-39c3/21_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/21_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/21_7960.webp 7960w"
+                />
+              </label>
+              <input type="checkbox" id="heatshrink-fasten-led-strip">
+            </div>
+          </li>
+
+        </ol>
+
+        <p>
+          Congratulations! You now have a freely customizable pair of RGB catears :3
+        </p>
+        <p>
+          Don't feel pressured to wear cat ears &ndash; you're perfectly fine without them.<br>
+          And remember: Trans rights are human rights.
+        </p>
+      </section>
+    </main>
+    <footer>
+      <p>
+        Find us in the fediverse at <a href="https://chaos.social/@c3cat">c3cat@chaos.social</a>.
+      </p>
+    </footer>
+  </body>
+</html>