Feat: website WIP and new words

website/public/style.css

@@ -1,6 +1,15 @@
 @font-face {
-    font-family: 'CozetteVector';
-    src: url('/CozetteVector.ttf') format('truetype');
+    font-family: 'Space Mono';
+    src: url('/SpaceMono-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Space Mono';
+    src: url('/SpaceMono-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-display: swap;
 }
 
 :root {
@@ -20,14 +29,28 @@
 }
 
 body {
-    font-family: 'CozetteVector', monospace;
+    font-family: 'Space Mono', monospace;
     background: var(--bg);
     color: var(--text);
     max-width: 800px;
     margin: 0 auto;
     padding: 1rem;
     line-height: 1.3;
-    font-size: 0.9rem;
+    font-size: clamp(0.9rem, 0.75rem + 0.75vw, 1.15rem);
+}
+
+header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+}
+
+.icon {
+    width: 4rem;
+    height: 4rem;
+    image-rendering: pixelated;
+    flex-shrink: 0;
 }
 
 h1 {
@@ -35,11 +58,18 @@ h1 {
     margin: 0;
 }
 
+.subtitle {
+    color: var(--text-muted);
+    margin: 0;
+}
+
 h2 {
     color: var(--text);
-    margin-top: 1rem;
-    margin-bottom: 0.25rem;
-    font-size: 1rem;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-size: 1.15rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--text-muted);
 }
 
 p { margin: 0.25rem 0; }
@@ -59,11 +89,47 @@ ul {
 
 li { margin: 0.1rem 0; }
 
-pre {
+.examples-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+    margin: 0.5rem 0 2rem;
+}
+
+.example-cell {
+    aspect-ratio: 1;
+    overflow: hidden;
     background: var(--surface);
-    padding: 0.5rem;
-    overflow-x: auto;
-    margin: 0.25rem 0;
+    cursor: pointer;
+}
+
+.example-cell video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.example-cell.expanded {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 100;
+    background: rgba(0, 0, 0, 0.9);
+    aspect-ratio: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.example-cell.expanded video {
+    width: auto;
+    height: auto;
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain;
 }
 
 .downloads-table {
@@ -91,69 +157,34 @@ pre {
 }
 
 .note {
-    color: var(--text-muted);
+    color: var(--text-dim);
     font-size: 0.8rem;
-    font-style: italic;
+    background: var(--surface);
+    padding: 0.5rem 0.75rem;
+    margin-top: 0.75rem;
+}
+
+.note::before {
+    content: '→ ';
 }
 
 .note a {
     color: var(--text-muted);
 }
 
-.support {
-    background: var(--surface);
-    padding: 0.5rem;
-    margin: 0.5rem 0;
+.colophon {
+    margin-top: 3rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--text-muted);
+    color: var(--text-muted);
+}
+
+.colophon a {
     color: var(--text-dim);
 }
 
-.support a {
-    color: var(--text);
-}
-
-#kofi-modal {
-    background: var(--bg);
-    color: var(--text);
-    border: 1px solid var(--text-muted);
-    border-radius: 0;
-    padding: 1rem;
-    max-width: 420px;
-    width: 90vw;
-}
-
-#kofi-modal::backdrop {
-    background: rgba(0, 0, 0, 0.7);
-}
-
-#kofi-modal p {
-    margin-bottom: 0.5rem;
-}
-
-#kofi-frame {
-    border: none;
-    width: 100%;
-    height: 570px;
-}
-
-#kofi-close {
-    font-family: 'CozetteVector', monospace;
-    background: none;
-    color: var(--text-muted);
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    font-size: inherit;
-    text-decoration: underline;
-    display: block;
-    margin: 0.5rem auto 0;
-}
-
-#kofi-close:hover {
-    color: var(--text);
-}
-
 #theme-toggle {
-    font-family: 'CozetteVector', monospace;
+    font-family: 'Space Mono', monospace;
     background: none;
     color: var(--text-muted);
     border: none;