feat: integration screen

web/src/assets/main.css

@@ -105,6 +105,8 @@
 	--text-xl--line-height: 28px;
 	--text-2xl: 1.75rem;
 	--text-2xl--line-height: 36px;
+	--text-code: 0.75rem;
+	--text-code--line-height: 19px;
 
 	--breakpoint-xs: 22.5rem;
 	--breakpoint-sm: 40rem;
@@ -112,8 +114,7 @@
 	--breakpoint-lg: 64rem;
 	--breakpoint-xl: 80rem;
 
-	--shadow-popover:
-		0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);
+	--shadow-popover: 0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);
 	--shadow-modal: 0 16px 48px rgb(17 17 17 / 0.18);
 
 	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
@@ -358,3 +359,19 @@ body {
 		animation-iteration-count: infinite !important;
 	}
 }
+
+.shiki-block :where(pre.shiki) {
+	margin: 0;
+	padding: 0;
+	background-color: transparent !important;
+}
+
+.shiki-block :where(pre.shiki),
+.shiki-block :where(pre.shiki span) {
+	color: var(--shiki-light);
+}
+
+.dark .shiki-block :where(pre.shiki),
+.dark .shiki-block :where(pre.shiki span) {
+	color: var(--shiki-dark);
+}