--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/markdown_converter/markdown_to_html.css	Sat Jan 24 21:06:42 2026 -0800
@@ -0,0 +1,133 @@
+/* markdown panel */
+#markdown {
+  flex: 1;
+  padding: 15px;
+  border: 1px solid rgba(var(--gray), 0.3);
+  border-radius: 4px;
+  background: var(--white);
+  color: rgb(var(--gray-dark));
+  overflow-y: auto;
+  font-size: 15px;
+}
+
+/* Markdown markdown styles */
+#markdown h1, #markdown h2, #markdown h3, #markdown h4, #markdown h5, #markdown h6 {
+  margin: 1em 0 0.5em 0;
+  color: rgb(var(--gray-dark));
+  line-height: 1.3;
+}
+
+#markdown h1:first-child, #markdown h2:first-child, #markdown h3:first-child {
+  margin-top: 0;
+}
+
+#markdown h1 { font-size: 1.8em; }
+#markdown h2 { font-size: 1.5em; }
+#markdown h3 { font-size: 1.25em; }
+#markdown h4 { font-size: 1.1em; }
+
+#markdown p {
+  margin: 0.8em 0;
+}
+
+#markdown ul, #markdown ol {
+  margin: 0.8em 0;
+  padding-left: 25px;
+}
+
+#markdown li {
+  margin: 0.3em 0;
+}
+
+#markdown code {
+  background: rgb(var(--gray-light));
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+  font-size: 0.9em;
+  color: var(--accent);
+}
+
+#markdown pre {
+  background: var(--black);
+  color: var(--white);
+  padding: 15px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 1em 0;
+  line-height: 1.4;
+}
+
+#markdown pre code {
+  background: none;
+  color: inherit;
+  padding: 0;
+}
+
+#markdown blockquote {
+  border-left: 4px solid var(--accent);
+  padding: 10px 15px;
+  margin: 1em 0;
+  background: rgb(var(--gray-light));
+  color: rgb(var(--gray));
+  font-style: italic;
+}
+
+#markdown a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+#markdown a:hover {
+  text-decoration: underline;
+}
+
+#markdown hr {
+  border: none;
+  border-top: 1px solid rgb(var(--gray-light));
+  margin: 1.5em 0;
+}
+
+#markdown img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
+
+#markdown strong {
+  font-weight: 600;
+}
+
+#markdown em {
+  font-style: italic;
+}
+
+#markdown del {
+  text-decoration: line-through;
+  color: rgb(var(--gray));
+}
+
+/* Mobile */
+@media (max-width: 900px) {
+  body {
+    padding: 15px;
+  }
+
+  .container {
+    grid-template-columns: 1fr;
+    height: auto;
+    gap: 15px;
+  }
+
+  .panel {
+    min-height: 350px;
+  }
+
+  textarea {
+    min-height: 300px;
+  }
+
+  #markdown {
+    min-height: 300px;
+  }
+}