PWA

src/styles/site.css

@@ -13,3 +13,4 @@
 @import "./site/13-responsive.css";
 @import "./site/14-animations.css";
 @import "./site/15-reading-series.css";
+@import "./site/16-pwa.css";

src/styles/site/16-pwa.css

@@ -0,0 +1,47 @@
+.pwa-toast {
+  position: fixed;
+  right: max(18px, var(--page-gutter));
+  bottom: 24px;
+  z-index: 34;
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 14px;
+  width: min(560px, calc(100vw - 32px));
+  border: 1px solid rgba(255, 255, 255, 0.68);
+  border-radius: 14px;
+  padding: 14px;
+  color: #27313a;
+  background: rgba(255, 253, 248, 0.94);
+  box-shadow: 0 22px 60px rgba(44, 55, 63, 0.24);
+  backdrop-filter: blur(20px) saturate(165%);
+  -webkit-backdrop-filter: blur(20px) saturate(165%);
+  animation: pwa-toast-in 0.3s ease both;
+}
+
+.pwa-toast[hidden] { display: none; }
+.pwa-toast-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: #fff; background: #3eb8be; }
+.pwa-toast-copy { min-width: 0; }
+.pwa-toast-copy strong, .pwa-toast-copy p { margin: 0; }
+.pwa-toast-copy p { color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
+.pwa-toast-actions { display: flex; gap: 7px; }
+.pwa-toast button { border: 1px solid rgba(15, 118, 110, 0.18); border-radius: 999px; padding: 7px 12px; color: var(--accent); font: inherit; font-size: 0.84rem; font-weight: 800; background: rgba(236, 253, 245, 0.72); cursor: pointer; }
+.pwa-toast .pwa-toast-primary { color: #fff; background: #3eb8be; }
+
+:root[data-theme='dark'] .pwa-toast { border-color: rgba(139, 224, 213, 0.22); color: #edf7f5; background: rgba(13, 23, 29, 0.94); }
+
+@keyframes pwa-toast-in {
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 720px) {
+  .pwa-toast { right: 16px; bottom: 16px; grid-template-columns: 40px minmax(0, 1fr); }
+  .pwa-toast-icon { width: 40px; height: 40px; }
+  .pwa-toast-actions { grid-column: 1 / -1; }
+  .pwa-toast button { flex: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pwa-toast { animation: none; }
+}