Index: src/assets/css/ward.css
===================================================================
--- src/assets/css/ward.css	(revision 303bfc4daeb122010e84e14370b612f2e7e286f4)
+++ src/assets/css/ward.css	(revision a5a62490bec7673afe4e4c5c788f48466eb96b8b)
@@ -43,2 +43,45 @@
 .note.alarm { background: rgba(239,159,39,.16); color: var(--alarm); }
 .note.unknown { background: rgba(154,167,187,.14); color: var(--dim); }
+
+/* ── De feed ──────────────────────────────────────────────────────────── */
+.cards { display: grid; gap: 12px; }
+.post { background: var(--card); border-radius: 12px; padding: 12px 14px; border: 2px solid transparent; }
+.post .avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
+.post .when { margin-left: auto; color: var(--dim); font-size: .8rem; }
+.post .cw { color: var(--alarm); font-size: .85rem; margin: 6px 0 0; }
+.post .body { margin-top: 8px; overflow-wrap: anywhere; }
+.post .body img, .post .body video { max-width: 100%; height: auto; border-radius: 8px; }
+/* Waar de boei zou landen. Zichtbaar oplichten, want mikken met een vinger
+   zonder terugkoppeling is gokken. */
+.post.hover { border-color: var(--accent); }
+
+/* ── De reddingsboei ──────────────────────────────────────────────────── */
+#buoy {
+  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom));
+  width: 76px; height: 76px; border: 0; border-radius: 50%;
+  background: transparent; font-size: 52px; line-height: 1;
+  /* Zonder dit vecht slepen met scrollen en verlies je hem halverwege. */
+  touch-action: none; cursor: grab; z-index: 50;
+}
+#buoy.dragging { cursor: grabbing; transform: scale(1.1); }
+
+dialog#help-dialog {
+  border: 0; border-radius: 16px; padding: 18px; max-width: 420px; width: calc(100% - 32px);
+  background: var(--card); color: var(--ink);
+}
+dialog#help-dialog::backdrop { background: rgba(0,0,0,.5); }
+dialog#help-dialog h2 { margin: 0 0 10px; font-size: 1.05rem; color: var(--ink); }
+dialog#help-dialog label { display: block; color: var(--dim); font-size: .85rem; margin-bottom: 4px; }
+dialog#help-dialog textarea {
+  width: 100%; border-radius: 10px; border: 1px solid #2a3342;
+  background: #131a25; color: var(--ink); padding: 8px; font: inherit;
+}
+dialog#help-dialog menu { display: flex; gap: 8px; justify-content: flex-end; margin: 14px 0 0; padding: 0; }
+dialog#help-dialog button { border: 0; border-radius: 10px; padding: 10px 14px; background: #2a3342; color: var(--ink); font: inherit; }
+dialog#help-dialog button.primary { background: var(--accent); color: #fff; font-weight: 600; }
+
+/* Voor schermlezers, niet voor het oog. */
+.sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}