diff --git a/index.css b/index.css
new file mode 100644
index 0000000..ab36374
--- /dev/null
+++ b/index.css
@@ -0,0 +1,265 @@
+@charset "UTF-8";
+
+@import url("https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&family=Geologica:wght@100..900&family=Oswald:wght@200..700");
+
+@layers system demonstration;
+
+@layer system {
+  section#wrap {
+    --wrap-padding: 1rem;
+    --image-diameter: 120px;
+    --gap: 1rem;
+    --columns: 4;
+    position: relative;
+    min-width: 300px;
+    width: calc(
+      var(--image-diameter, 120px) * var(--columns, 4) + var(--gap, 1rem) *
+        (var(--columns, 4) - 1)
+    );
+    height: min-content;
+    padding: var(--wrap-padding, 1rem);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    overflow: hidden;
+    border-radius: 0.75rem;
+    border: 2px solid var(--background-color-inverted);
+
+    > label[for="images"]:has(> input#images),
+    > button#reset {
+      width: max-content;
+      padding: 0.4rem 0.8rem;
+      display: flex;
+      cursor: pointer;
+      border-radius: 0.75rem;
+      border: 2px solid var(--section-background-color-inverted) !important;
+      background-color: var(--section-background-color) !important;
+
+      &:hover {
+        filter: brightness(1.2);
+      }
+
+      &:active {
+        /* filter: invert(1); no need to invert borders */
+
+        color: var(--text-color-inverted);
+        background-color: var(--section-background-color-inverted);
+      }
+
+      > input#images {
+        display: none;
+      }
+    }
+
+    > button#reset {
+      position: absolute;
+      top: var(--wrap-padding, 1rem);
+      right: var(--wrap-padding, 1rem);
+      font-family: "Geologica", sans-serif;
+      font-size: medium;
+      color: var(--text-color);
+    }
+
+    > span#order {
+      margin-top: auto;
+    }
+
+    > label#loader {
+      display: none;
+      cursor: pointer;
+
+      &:hover {
+        background-color: hsl(
+          from var(--section-background-color-inverted) h s 20%
+        );
+      }
+
+      &:active {
+        background-color: hsl(
+          from var(--section-background-color-inverted) h s 10%
+        );
+      }
+    }
+
+    &:not(:has(> div#gallery *)) {
+      > div#gallery {
+        display: none;
+      }
+
+      > label#loader {
+        width: 100%;
+        height: 140px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 0.75rem;
+        border: 2px dashed var(--section-background-color-inverted);
+      }
+    }
+
+    > div#gallery {
+      width: 100%;
+      display: flex;
+      flex-flow: row wrap;
+      gap: var(--gap, 1rem);
+      border-radius: 0.75rem;
+      overflow: hidden;
+
+      > div.image {
+        position: relative;
+        width: var(--image-diameter, 120px);
+        height: var(--image-diameter, 120px);
+        cursor: grab;
+        overflow: hidden;
+        border-radius: 0.75rem;
+
+        &:hover {
+          &:not(:has(> button:hover)) {
+            filter: brightness(1.2) contrast(1.1);
+          }
+
+          > button.delete {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+
+        &:active:not(:has(> button:active)) {
+          cursor: grabbing !important;
+          filter: brightness(0.8) contrast(1.2);
+        }
+
+        &.target {
+          filter: sepia(1) contrast(1.4) brightness(0.7);
+        }
+
+        > button.delete {
+          position: absolute;
+          top: 5%;
+          right: 5%;
+          display: none;
+          padding: 9px 12px;
+          cursor: pointer;
+          border-radius: 0.75rem;
+          background-color: var(--section-background-color) !important;
+
+          &:hover {
+            filter: brightness(1.2) contrast(1.1);
+          }
+
+          &:active {
+            filter: brightness(0.8) contrast(1.2);
+          }
+
+          > i.icon {
+            color: var(--red, red);
+          }
+        }
+
+        > img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+  }
+}
+
+@layer demonstration {
+  @layer icons {
+    @layer trash {
+      i.icon.trash {
+        box-sizing: border-box;
+        position: relative;
+        display: block;
+        width: 10px;
+        height: 12px;
+        border: 2px solid transparent;
+        box-shadow: 0 0 0 2px, inset -2px 0 0, inset 2px 0 0;
+        border-bottom-left-radius: 1px;
+        border-bottom-right-radius: 1px;
+        margin-top: 4px;
+      }
+
+      i.icon.trash.small {
+        height: 9px;
+      }
+
+      i.icon.trash::after,
+      i.icon.trash::before {
+        content: "";
+        display: block;
+        box-sizing: border-box;
+        position: absolute;
+      }
+
+      i.icon.trash::after {
+        background: currentColor;
+        border-radius: 3px;
+        width: 16px;
+        height: 2px;
+        top: -4px;
+        left: -5px;
+      }
+
+      i.icon.trash::before {
+        width: 10px;
+        height: 4px;
+        border: 2px solid;
+        border-bottom: transparent;
+        border-top-left-radius: 2px;
+        border-top-right-radius: 2px;
+        top: -7px;
+        left: -2px;
+      }
+    }
+  }
+
+  :root {
+    @layer colorscheme {
+      --text-color: #fff;
+      --text-color-inverted: #000;
+      --section-background-color-inverted: #fff;
+      --section-background-color: #000;
+      --background-color: #000;
+      --background-color-inverted: #fff;
+
+      --red: red;
+    }
+
+    @layer localization {
+      /* --localization-empty: "Empty"; */
+    }
+
+    font-family: "Geologica", sans-serif;
+    color: var(--text-color);
+  }
+
+  .unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  body {
+    margin: unset;
+    width: 100vw;
+    height: 100vh;
+    padding-top: 20vh;
+    display: flex;
+    justify-content: center;
+    overflow-x: hidden;
+    background-color: var(--background-color);
+  }
+
+  button {
+    background: unset;
+    border: unset;
+  }
+}