1 files changed, 38 insertions, 83 deletions
diff --git a/src/css/style.css b/src/css/style.css
index 5076da9..48d964e 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1352,108 +1352,63 @@ button:disabled {
     margin-bottom: 0;
 }
 
-/* demo page */
-
-.demo-page .demo-section {
-    margin-bottom: var(--space-xl);
-}
-
-.demo-page .component-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
-    gap: var(--space-md);
-    margin: var(--space-md) 0;
-}
+/* fairy dust */
 
-.demo-page .component-box {
-    border: var(--border-width) solid var(--border);
-    padding: var(--space-md);
-    background: var(--surface);
-    box-shadow: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark),
-        var(--shadow-box);
+.fairy-dust {
+    position: fixed;
+    pointer-events: none;
+    z-index: 9001;
+    line-height: 1;
+    animation: fairy-float 0.8s ease-out forwards;
+    will-change: transform, opacity;
 }
 
-.demo-page .component-box > :last-child {
-    margin-bottom: 0;
+@keyframes fairy-float {
+    0% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(40px) scale(0.5);
+    }
 }
 
-.demo-page .component-label {
-    display: block;
-    font-size: 0.75rem;
-    color: var(--muted);
-    margin-bottom: var(--space-xs);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
+/* code editor */
 
-.demo-page .button-row {
+.editor-controls {
     display: flex;
+    align-items: center;
     gap: var(--space-sm);
-    flex-wrap: wrap;
-    margin: var(--space-md) 0;
-}
-
-.demo-page .form-group {
     margin-bottom: var(--space-md);
 }
 
-.demo-page code {
-    background: var(--bg);
-    padding: 0.25rem 0.5rem;
-    border: 1px solid var(--border-light);
-    font-size: 0.875rem;
-    font-family: var(--font-mono);
+.editor-controls label {
+    margin: 0;
+    font-weight: 600;
 }
 
-.demo-page pre code {
-    background: transparent;
-    border: none;
-    padding: 0;
+.editor-controls select {
+    flex: 0 0 auto;
+    width: auto;
+    min-width: 150px;
 }
 
-.demo-page .color-swatch {
-    display: inline-block;
-    width: 40px;
-    height: 40px;
+.code-editor-container {
     border: var(--border-width) solid var(--border);
-    margin-right: var(--space-sm);
-    vertical-align: middle;
+    border-radius: var(--border-radius);
+    overflow: hidden;
     box-shadow: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark),
-        var(--shadow-sm);
-}
-
-.demo-page .demo-swatch-row {
-    display: flex;
-    align-items: center;
-}
-
-.demo-page .demo-inline-label {
-    display: inline;
-    margin: 0;
-}
-
-.demo-page .demo-example-box {
-    max-width: 400px;
+        var(--shadow-box);
+    background: var(--surface);
 }
 
-/* fairy dust */
-
-.fairy-dust {
-    position: fixed;
-    pointer-events: none;
-    z-index: 9001;
-    line-height: 1;
-    animation: fairy-float 0.8s ease-out forwards;
-    will-change: transform, opacity;
+.code-editor-container .cm-editor {
+    min-height: 300px;
+    max-height: 500px;
+    font-size: 0.875rem;
 }
 
-@keyframes fairy-float {
-    0% {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-    100% {
-        opacity: 0;
-        transform: translateY(40px) scale(0.5);
-    }
+.code-editor-container .cm-scroller {
+    overflow: auto;
 }