1 files changed, 87 insertions, 0 deletions
diff --git a/src/css/style.css b/src/css/style.css
index 97b14f3..3f8e8f5 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1234,8 +1234,95 @@ 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(300px, 1fr));
+    gap: var(--space-md);
+    margin: var(--space-md) 0;
+}
+
+.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);
+}
+
+.demo-page .component-box > :last-child {
+    margin-bottom: 0;
+}
+
+.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;
+}
+
+.demo-page .button-row {
+    display: flex;
+    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);
+}
+
+.demo-page .color-swatch {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    border: var(--border-width) solid var(--border);
+    margin-right: var(--space-sm);
+    vertical-align: middle;
+    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;
+}
+
 /* 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;
+}
+
 @keyframes fairy-float {
     0% {
         opacity: 1;