style(html_examples): clean htmx-like shell with no low-level plumbing

- Move CSS out of app_shell.heml into app.css served by the app.
- Remove direct hemx::advanced::Effect import from example code; rely on IntoEffect.
- Update README to not mention raw Effect:: APIs.
- Keep generated resources and tiny runtime behavior only.

req: examples/001
req: htmx_equivalents/001
req: htmx_equivalents/002

examples/html_examples/templates/app.css

@@ -0,0 +1,124 @@
+:root {
+  --bg: #f5f5f5;
+  --surface: #ffffff;
+  --ink: #222222;
+  --muted: #666666;
+  --border: #d4d4d4;
+  --accent: #3465a4;
+  --accent-hover: #29528a;
+  --danger: #c0392b;
+  --danger-hover: #a93226;
+  --radius: 6px;
+  --space: 1.25rem;
+  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  padding: var(--space);
+  font-family: var(--font-body);
+  background: var(--bg);
+  color: var(--ink);
+  line-height: 1.55;
+}
+main {
+  max-width: 820px;
+  margin: 0 auto;
+}
+header {
+  margin-bottom: calc(var(--space) * 1.5);
+}
+header p:first-child {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.75rem;
+  color: var(--muted);
+  margin: 0 0 0.25rem;
+}
+h1 {
+  font-family: var(--font-mono);
+  font-size: 1.75rem;
+  margin: 0 0 0.5rem;
+}
+header p:last-child {
+  color: var(--muted);
+  margin: 0;
+}
+section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: calc(var(--space) * 1.25);
+  margin-bottom: var(--space);
+}
+section h2 {
+  font-family: var(--font-mono);
+  font-size: 1.15rem;
+  margin: 0 0 var(--space);
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+p { margin: 0 0 var(--space); }
+form { margin: 0 0 var(--space); }
+label { font-weight: 500; }
+article label { display: block; margin-bottom: 0.75rem; }
+article label input { display: block; width: 100%; margin-top: 0.3rem; }
+input, select, button {
+  font: inherit;
+  padding: 0.45rem 0.65rem;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+}
+input, select { width: 100%; max-width: 360px; }
+input:focus, select:focus, button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+button {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+  cursor: pointer;
+  font-weight: 500;
+}
+button:hover {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+}
+[data-hemx-handle="delete_row"] button,
+[data-hemx-handle*="delete"] button,
+.danger {
+  background: var(--danger);
+  border-color: var(--danger);
+}
+[data-hemx-handle="delete_row"] button:hover,
+[data-hemx-handle*="delete"] button:hover,
+.danger:hover {
+  background: var(--danger-hover);
+  border-color: var(--danger-hover);
+}
+td form { display: inline-block; margin-right: 0.4rem; }
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--space) 0;
+}
+th, td {
+  text-align: left;
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+th { font-weight: 600; color: var(--muted); }
+ul { padding-left: 1.25rem; margin: 0 0 var(--space); }
+progress {
+  width: 100%;
+  height: 1rem;
+  accent-color: var(--accent);
+}
+[data-hemx-error-for] {
+  color: var(--danger);
+  font-size: 0.9rem;
+  margin: 0.25rem 0 0;
+}
+.htmx-indicator { opacity: 0.5; }