diff --git a/index.html b/index.html
index 1ed0fe7..05564c5 100644
--- a/index.html
+++ b/index.html
@@ -10,104 +10,7 @@
-
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..9d883d2
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,96 @@
+#vis {
+ width: 100%;
+ height: 100%;
+ padding: 1rem;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+.container {
+ display: grid;
+ grid-template-columns: var(--snippet-width, 1fr) 5px var(--editor-width, 1fr) 5px var(--preview-width, 2fr);
+ height: 100vh;
+ background-color: #e0e0e0;
+}
+
+.panel {
+ background: white;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+}
+
+.panel-header {
+ padding: 1rem;
+ border-bottom: 1px solid #e0e0e0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: #f5f5f5;
+}
+
+.resize-handle {
+ background-color: #e0e0e0;
+ cursor: col-resize;
+ transition: background-color 0.2s;
+}
+
+.resize-handle:hover,
+.resize-handle.active {
+ background-color: #2196F3;
+}
+
+.button {
+ padding: 0.5rem 1rem;
+ background: #4CAF50;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+}
+
+.button:hover {
+ background: #45a049;
+}
+
+.button:disabled {
+ background: #cccccc;
+ cursor: not-allowed;
+}
+
+.snippet-list {
+ padding: 1rem;
+ flex-grow: 1;
+}
+
+.snippet-item {
+ padding: 0.75rem;
+ margin: 0.5rem 0;
+ background: #f5f5f5;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 0.2s;
+}
+
+.snippet-item:hover {
+ background: #eeeeee;
+}
+
+.snippet-item.active {
+ background: #e3f2fd;
+ border-left: 4px solid #2196F3;
+}
+
+#monaco-editor {
+ height: 100%;
+ flex-grow: 1;
+}
+
+.preview-panel>*:not(.panel-header) {
+ padding: 1rem;
+}
\ No newline at end of file