WIP first start to make an app

.npmrc

@@ -0,0 +1 @@
+use-node-version=22.17.1

app/app-styles/app.css

@@ -1,51 +1,50 @@
-/* stylelint-disable import-notation, property-no-vendor-prefix, selector-class-pattern */
-@import 'mdbook.css';
-@import 'fonts.css';
-@import 'variables.css';
-@import 'chrome.css';
-
-button.reset {
-  border: none;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  overflow: visible;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
+.rfc-grid {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--spacing-2);
 }
 
-.margin-auto {
-  margin: auto;
+.rfc-card {
+  background-color: white;
+  border-radius: var(--radius);
+  width: 25%;
+  padding: var(--spacing-2);
 }
 
-.p1 {
-  padding: 0.5em;
+.rfc-card img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50px;
 }
 
-.p2 {
-  padding: 1em;
+.table {
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 2px solid var(--color-brand);
+  border-radius: var(--radius);
 }
 
-.stage-title {
-  margin-top: 0.5rem;
-  margin-bottom: 0;
+.table th,
+.table td {
+  padding: var(--spacing-1);
+  text-align: left;
+  border-left: none;
+  border-right: none;
 }
 
-ul.chapter {
-  margin-top: 0;
+/* Row borders */
+.table tr + tr td {
+  border-top: 1px solid var(--color-card-border);
 }
 
-.rfc-data-table ul {
-  padding-left: 1em;
+/* Optional: top border for the header row */
+.table thead tr th {
+  background-color: var(--color-brand);
+  border-bottom: 1px solid var(--color-card-border);
+  color: var(--color-white);
 }
 
-.svg-inline--fa {
-  display: inline-block;
-  height: 1em;
-  vertical-align: -0.125em;
+/* Optional: remove the last row bottom border if needed */
+.table tr:last-child td {
+  border-bottom: none;
 }