<Inventory/> component, basic markup + styles, balance (with <Numput>)

style/_inventory.scss

@@ -0,0 +1,107 @@
+.inventories {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: stretch;
+    height: 100%;
+
+    > hr {
+        width: 2px;
+        height: 100%;
+        background: crimson;
+        opacity: 0.448;
+    }
+}
+
+section.inventory {
+    width: 45%;
+    display: flex;
+    flex-direction: column;
+
+    &:first-of-type {
+        h3 {
+            text-align: right;
+        }
+    }
+    &:last-of-type {
+
+    }
+
+    h3 {
+        text-transform: lowercase;
+        font-size: 1.3em;
+        margin-bottom: 10px;
+        font-weight: 900;
+        &::first-letter {
+            text-decoration: underline crimson;
+        }
+    }
+
+    .balance {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+
+        > div {
+            width: 28%;
+            height: 35px;
+            font-weight: 300;
+            display: flex;
+            gap: 7px;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .platinum, .gold, .electrum, .silver, .copper {
+            position: relative;
+            &::before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 2;
+                width: 15px;
+                height: 15px;
+                content: "";
+                display: block;
+                background-position: center center;
+                background-size: cover;
+            }
+        }
+
+        .platinum::before {
+            background-image: url("/assets/platinum.webp");
+        }
+        .gold::before {
+            background-image: url("/assets/gold.webp");
+        }
+        .electrum::before {
+            background-image: url("/assets/electrum.webp");
+        }
+        .silver::before {
+            background-image: url("/assets/silver.webp");
+        }
+        .copper::before {
+            background-image: url("/assets/copper.webp");
+        }
+    }
+
+    input {
+        color: white;
+        width: 100%;
+        text-align: right;
+        background-color: #131313;
+        padding: 2px 12px 0px 6px;
+        font-size: 18px;
+        vertical-align: bottom;
+        line-height: 20px;
+        border-bottom: 2px solid;
+        border-bottom-color: hsla(from crimson h s l / 0.5);
+        mask: linear-gradient(135deg,#0000 5px,#000 0);
+
+        &:focus, &:hover, &:active {
+            cursor: crosshair;
+            border-bottom-color: crimson;
+            transition: border-bottom-color .2s;
+        }
+    }
+
+}

style/main.scss

@@ -5,6 +5,7 @@
 @use 'header';
 @use 'sidebar';
 @use 'nav';
+@use 'inventory';
 @use 'vars';