Migrate styles to SCSS

src/styles/Legend.scss

@@ -0,0 +1,23 @@
+@use "shared" as *;
+
+.legend {
+  .box {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    border-radius: 4px;
+    margin-right: 8px;
+    vertical-align: middle;
+    @include shadow;
+  }
+
+  ul {
+    list-style: none;
+    margin: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+  }
+}

src/styles/QRCode.scss

@@ -0,0 +1,29 @@
+@use "shared" as *;
+
+.qr-code-container {
+  @include rounded;
+
+  background-color: $aai-orange;
+  flex-basis: 20%;
+  flex-shrink: 0;
+  padding: 16px;
+
+  color: #fff;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  p {
+    text-align: center;
+  }
+
+  img {
+    display: block;
+    margin: 0 auto;
+    background-color: #fff;
+    border-radius: 16px;
+    padding: 16px;
+    width: 50%;
+  }
+}

src/styles/_shared.scss

@@ -0,0 +1,50 @@
+$aai-blue-dark: hsl(198.5deg 83.5% 19%);
+$aai-blue-light: hsl(196.8deg 63% 55.5%);
+
+$aai-green-dark: hsl(181deg 75% 37%);
+$aai-green-light: hsl(127.5deg 100% 87.5%);
+
+$aai-grey: hsl(202.5deg 20% 76.5%);
+$aai-orange: hsl(18.6deg 100% 55.1%);
+
+@mixin rounded {
+  border-radius: 16px;
+}
+
+@mixin shadow {
+  filter: drop-shadow(0 16px 16px rgb($aai-grey, 80%));
+}
+
+@mixin no-shadow {
+  filter: none;
+}
+
+$border-radius: 16px;
+
+@mixin button {
+  @include shadow;
+
+  background-color: $aai-action-button;
+  color: #ffffff;
+
+  border-radius: $border-radius;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+
+  overflow: hidden;
+
+  &:active {
+    @include no-shadow;
+  }
+
+  span {
+    flex: 1 auto;
+    white-space: nowrap;
+    text-align: center;
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 16px;
+  }
+}

src/styles/index.scss

@@ -0,0 +1,113 @@
+@use "shared" as *;
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: only light;
+  color: #213547;
+  background-color: #ffffff;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Work Sans", sans-serif;
+  font-weight: 800;
+  margin: 0;
+}
+
+a {
+  font-weight: 500;
+  color: $aai-blue-dark;
+  text-decoration: inherit;
+}
+a:hover {
+  color: $aai-blue-light;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#root {
+  display: flex;
+  gap: 16px;
+  margin: 16px;
+  flex-direction: row;
+  align-items: start;
+}
+
+.chart-container {
+  @include rounded;
+  @include shadow;
+
+  display: flex;
+  flex-direction: column;
+
+  background-color: #ffffff;
+}
+
+.charts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 16px;
+}
+
+.question-group {
+  @include rounded;
+  @include shadow;
+
+  background-color: #ffffff;
+  padding: 16px;
+  border: 1px solid #ddd;
+
+  flex: 1 1 300px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 8px;
+}
+
+.question-group svg {
+  align-self: center;
+  margin-bottom: 16px;
+}
+
+.question-group p {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.4;
+}
+
+.question-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.question-title .material-icons {
+  vertical-align: top;
+  margin-right: 1ex;
+}