@pylonsync/create-pylon 0.19.0 → 0.20.0

package/templates/local-service/lib/hours.ts

@@ -0,0 +1,44 @@
+// Weekly hours as display rows, from `siteConfig.booking.hours` (the same
+// hours the booking grid uses), so the location block cannot disagree with the
+// grid. Consecutive days with the same hours share a row: "Tue–Wed 9 AM–6 PM".
+
+import type { DayHours } from "./site.config";
+
+const DAY = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+// Rows run Monday to Sunday, the way a shop door lists them.
+const ORDER = [1, 2, 3, 4, 5, 6, 0];
+
+export interface HoursRow {
+  days: string;
+  time: string; // "9 AM–6 PM" or "Closed"
+  closed: boolean;
+}
+
+/** "09:00" → "9 AM", "18:30" → "6:30 PM". */
+export function clock(hhmm: string): string {
+  const [h, m] = hhmm.split(":").map(Number);
+  const suffix = h >= 12 ? "PM" : "AM";
+  const h12 = h % 12 === 0 ? 12 : h % 12;
+  return m ? `${h12}:${String(m).padStart(2, "0")} ${suffix}` : `${h12} ${suffix}`;
+}
+
+export function hoursRows(hours: Record<number, DayHours>): HoursRow[] {
+  const rows: { first: number; last: number; time: string }[] = [];
+  for (const d of ORDER) {
+    const h = hours[d];
+    const time = h ? `${clock(h.open)}–${clock(h.close)}` : "Closed";
+    const prev = rows[rows.length - 1];
+    if (prev && prev.time === time) prev.last = d;
+    else rows.push({ first: d, last: d, time });
+  }
+  return rows.map((r) => ({
+    days: r.first === r.last ? DAY[r.first] : `${DAY[r.first]}–${DAY[r.last]}`,
+    time: r.time,
+    closed: r.time === "Closed",
+  }));
+}
+
+/** A Google Maps directions link for a street address. Needs no API key. */
+export function directionsUrl(address: string): string {
+  return `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(address)}`;
+}

package/templates/local-service/lib/site.config.ts

@@ -30,6 +30,7 @@ export type ServiceItem = {
   name: string;
   durationMin: number; // drives the booking slot length
   price: string; // display only, e.g. "$35"
+  priceUsd: number; // the same price as a number; the dashboard sums it
   description?: string;
 };
 
@@ -65,8 +66,9 @@ export type LocalServiceConfig = BaseConfig & {
   location: {
     headline: string;
     address: string;
+    // A Google Maps embed URL (Share → Embed a map → the iframe's src). When
+    // empty, the page shows the weekly hours board beside the address.
     mapEmbedUrl?: string;
-    hoursText: string;
     phone: string;
     email: string;
   };
@@ -108,7 +110,7 @@ export const siteConfig: LocalServiceConfig = {
       "A neighborhood barbershop on Lower Greenville since 2014. Walk in or book a chair online. The calendar updates as chairs fill.",
     ctaLabel: "Book a chair",
     quickFacts: {
-      hours: "Tue–Sat, 9–6",
+      hours: "Tue–Sat from 9 AM",
       area: "Lower Greenville, Dallas",
       phone: "(214) 555-0148",
     },
@@ -122,6 +124,7 @@ export const siteConfig: LocalServiceConfig = {
         name: "Haircut",
         durationMin: 45,
         price: "$35",
+        priceUsd: 35,
         description: "Consultation, cut, and a clean finish. The classic.",
       },
       {
@@ -129,6 +132,7 @@ export const siteConfig: LocalServiceConfig = {
         name: "Beard trim",
         durationMin: 20,
         price: "$18",
+        priceUsd: 18,
         description: "Shape-up, line work, and hot-towel finish.",
       },
       {
@@ -136,6 +140,7 @@ export const siteConfig: LocalServiceConfig = {
         name: "Cut + beard",
         durationMin: 60,
         price: "$48",
+        priceUsd: 48,
         description: "The full sit-down. Haircut and beard, start to finish.",
       },
       {
@@ -143,6 +148,7 @@ export const siteConfig: LocalServiceConfig = {
         name: "Kids' cut",
         durationMin: 30,
         price: "$22",
+        priceUsd: 22,
         description: "For the under-12s. Patient barbers, no rush.",
       },
     ],
@@ -197,7 +203,6 @@ export const siteConfig: LocalServiceConfig = {
     headline: "Find us",
     address: "1845 Greenville Ave, Dallas, TX 75206",
     mapEmbedUrl: "",
-    hoursText: "Tue–Wed 9–6 · Thu–Fri 9–7 · Sat 9–4 · Sun–Mon closed",
     phone: "(214) 555-0148",
     email: "hello@northgatebarbers.example",
   },

package/templates/local-service/lib/slots.ts

@@ -21,6 +21,8 @@ export interface Slot {
   endsAt: string;
   /** False when the slot is in the past (within lead time) or overlaps a booking. */
   available: boolean;
+  /** Why it is unavailable: "past" (too soon to book) or "taken" (booked). */
+  state: "open" | "past" | "taken";
 }
 
 /** Half-open interval overlap: [aStart,aEnd) intersects [bStart,bEnd). */
@@ -75,6 +77,7 @@ export function slotsForDay(opts: {
       startsAt: new Date(s).toISOString(),
       endsAt: new Date(e).toISOString(),
       available: !past && !taken,
+      state: past ? "past" : taken ? "taken" : "open",
     });
   }
   return slots;

package/templates/local-service/tests/booking.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, test } from "bun:test";
+import { demoBookings, demoDataEnabled } from "../lib/demo";
+import { clock, directionsUrl, hoursRows } from "../lib/hours";
+import { rangesOverlap, slotsForDay, weekdayOf } from "../lib/slots";
+import { siteConfig } from "../lib/site.config";
+
+describe("slotsForDay state", () => {
+  const base = {
+    dayISODate: "2026-09-29",
+    open: "09:00",
+    close: "11:00",
+    slotMinutes: 30,
+    durationMin: 30,
+    leadTimeHours: 0,
+  };
+  test("marks booked times taken and early times past", () => {
+    const nine = new Date(2026, 8, 29, 9, 0).getTime();
+    const slots = slotsForDay({
+      ...base,
+      nowMs: nine + 31 * 60_000,
+      busy: [
+        {
+          startsAt: new Date(nine + 60 * 60_000).toISOString(),
+          endsAt: new Date(nine + 90 * 60_000).toISOString(),
+        },
+      ],
+    });
+    expect(slots.map((s) => s.state)).toEqual(["past", "past", "taken", "open"]);
+    expect(slots.filter((s) => s.available)).toHaveLength(1);
+  });
+});
+
+describe("hoursRows", () => {
+  test("groups days with the same hours and lists closed days", () => {
+    expect(hoursRows(siteConfig.booking.hours)).toEqual([
+      { days: "Mon", time: "Closed", closed: true },
+      { days: "Tue–Wed", time: "9 AM–6 PM", closed: false },
+      { days: "Thu–Fri", time: "9 AM–7 PM", closed: false },
+      { days: "Sat", time: "9 AM–4 PM", closed: false },
+      { days: "Sun", time: "Closed", closed: true },
+    ]);
+  });
+  test("clock formats noon, midnight, and half hours", () => {
+    expect(clock("12:00")).toBe("12 PM");
+    expect(clock("00:00")).toBe("12 AM");
+    expect(clock("17:30")).toBe("5:30 PM");
+  });
+  test("directions link encodes the address", () => {
+    expect(directionsUrl("1845 Greenville Ave, Dallas")).toBe(
+      "https://www.google.com/maps/dir/?api=1&destination=1845%20Greenville%20Ave%2C%20Dallas",
+    );
+  });
+});
+
+describe("demo data", () => {
+  test("only under `pylon dev` unless PYLON_DEMO_DATA says otherwise", () => {
+    expect(demoDataEnabled({ PYLON_DEV_MODE: "1", PYLON_DEV_WATCH_DIR: "/src/app" })).toBe(true);
+    // The Docker base image turns dev mode on by default; without `pylon dev` it must not seed.
+    expect(demoDataEnabled({ PYLON_DEV_MODE: "true" })).toBe(false);
+    expect(demoDataEnabled({ PYLON_DEV_MODE: "false" })).toBe(false);
+    expect(demoDataEnabled({})).toBe(false);
+    expect(demoDataEnabled({ PYLON_DEV_MODE: "1", PYLON_DEV_WATCH_DIR: "/src/app", PYLON_DEMO_DATA: "0" })).toBe(false);
+  });
+
+  const now = new Date(2026, 8, 26, 10, 15).getTime(); // a Saturday morning
+  const rows = demoBookings(now, siteConfig);
+
+  test("every booking sits inside opening hours on an open day", () => {
+    expect(rows.length).toBeGreaterThan(40);
+    for (const b of rows) {
+      const start = new Date(b.startsAt);
+      const key = `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, "0")}-${String(start.getDate()).padStart(2, "0")}`;
+      const hours = siteConfig.booking.hours[weekdayOf(key)];
+      expect(hours).not.toBeNull();
+      const [ch, cm] = hours!.close.split(":").map(Number);
+      const close = new Date(start);
+      close.setHours(ch, cm, 0, 0);
+      expect(Date.parse(b.endsAt)).toBeLessThanOrEqual(close.getTime());
+    }
+  });
+
+  test("active bookings never overlap, so the grid and the dashboard agree", () => {
+    const active = rows.filter((b) => b.status !== "cancelled");
+    for (let i = 0; i < active.length; i++) {
+      for (let j = i + 1; j < active.length; j++) {
+        const a = active[i];
+        const b = active[j];
+        expect(
+          rangesOverlap(Date.parse(a.startsAt), Date.parse(a.endsAt), Date.parse(b.startsAt), Date.parse(b.endsAt)),
+        ).toBe(false);
+      }
+    }
+  });
+
+  test("past bookings are confirmed; upcoming ones include some to confirm", () => {
+    const past = rows.filter((b) => Date.parse(b.endsAt) <= now);
+    const future = rows.filter((b) => Date.parse(b.endsAt) > now);
+    expect(past.every((b) => b.status === "confirmed")).toBe(true);
+    expect(future.some((b) => b.status === "pending")).toBe(true);
+    expect(rows.every((b) => Date.parse(b.createdAt) < now)).toBe(true);
+    // Phone numbers stay in the 555-0100..0199 range reserved for fiction.
+    for (const b of rows) if (b.customerPhone) expect(b.customerPhone).toMatch(/^\(214\) 555-01\d{2}$/);
+  });
+});

package/templates/marketplace/README.md

@@ -1,6 +1,6 @@
 # __APP_NAME__
 
-A polished, two-sided resale marketplace built with
+A two-sided resale marketplace built with
 [Pylon](https://pylonsync.com), with server-rendered product discovery and
 realtime offers.
 
@@ -14,29 +14,34 @@ tab.
 __RUN_DEV__
 ```
 
-Open http://localhost:4321. The grid seeds itself on first load. Open a
-second tab, post something from `/sell` in one, and watch it hit the "just
-listed" ticker in the other with no refresh. Sign in (the `/sell` form prefills
-a demo account) to list, save finds, make offers, and watch your dashboard
-update live.
+Open http://localhost:4321. On first boot the app seeds 10 listings with
+photos, a few open offers, and one sale. Open a second tab, post something
+from `/sell` in one, and watch it rise into the grid and the activity feed in
+the other with no refresh. Sign in (the form prefills a demo account) to buy,
+make offers, save listings, and answer the offers waiting on your dashboard.
 
 ## How it works
 
 - **Server-rendered for SEO + LCP.** The browse grid (`/`) and every listing
   page (`/listing/:slug`) render on the server with real rows (`serverData` +
   React 19 `use()`). View source and the products are *in the HTML*.
-- **Realtime where it matters.** The "just listed" ticker, the live offers on a
-  listing, and your `/me` dashboard all ride the sync engine: one `db.useQuery` per
-  view, no polling. The public surface connects with an anonymous **guest
-  session** (read-only); writing (list/offer/buy) requires a real sign-in.
+- **Realtime where it matters.** The browse grid (new listings, offer counts,
+  sold status), the activity feed, the offers on a listing, and your `/me`
+  dashboard all ride the sync engine: one `db.useQuery` per view, no polling.
+  The public surface connects with an anonymous **guest session**
+  (read-only); writing (list/offer/buy) requires a real sign-in.
 - **Unspoofable ownership.** `sellerId`/`buyerId` use `field.owner()`, so the
   framework stamps them from the session and rejects forged values. Listings
   and offers can be created with a plain optimistic `db.insert` and still can't
   be spoofed. The heavier logic (accept = mark sold + auto-decline the rest)
   runs in `functions/respondToOffer.ts`, where it enforces "only the seller".
-- **Commerce-ready discovery.** Browse by category, search title, description,
-  seller, or category, and sort by recency or price. The logic is pure and
+- **Discovery.** Browse by category, search title, description, seller,
+  category, or location, and sort by recency or price. The logic is pure and
   covered by tests in `tests/example.test.ts`.
+- **Demo data.** `functions/seedMarket.ts` holds the listings and
+  `functions/seedOffers.ts` the offers. Photos live in
+  `public/images/listings/` (a 1120px and a 640px WebP each). Replace both
+  with your own catalog.
 
 ## Privacy and policies
 
@@ -68,7 +73,8 @@ and shipping or pickup workflow before accepting real transactions.
 ## Rebrand it
 
 The brand ("Reprise") lives in `app/layout.tsx`; the demo catalog +
-seed account are in `functions/seedMarket.ts`. The design tokens are in
+seed accounts are in `functions/seedMarket.ts`, `functions/seedOffers.ts`,
+and `client/market.ts`. The design tokens are in
 `ui/tokens.css` + `app/globals.css`.
 
 ## Layout
@@ -79,8 +85,10 @@ app/page.tsx                   SSR discovery, search, sort, category facets
 app/listing/[id]/page.tsx      SSR listing detail (+ generateMetadata)
 app/sell/page.tsx              list an item (sign-in gated)
 app/me/page.tsx                your listings, offers, watchlist (live)
-functions/buyNow.ts, makeOffer.ts, respondToOffer.ts, seedMarket.ts
-client/*                       the realtime islands (ticker, offers, sell form…)
+functions/buyNow.ts, makeOffer.ts, respondToOffer.ts, seedMarket.ts, seedOffers.ts
+lib/catalog.ts                 categories, filtering, offer math (pure, tested)
+client/*                       the realtime islands (grid, activity feed, offers, sell form)
+public/images/listings/        seeded listing photos
 ```
 
 ## Deploy

package/templates/marketplace/app/globals.css

@@ -8,52 +8,64 @@
 @source "./";
 @source "../client";
 @source "../components";
-@source "../../_shared/src";
-
-@theme {
-  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    sans-serif;
+@source "../lib";
+
+/* Geist and Instrument Serif are declared in app.ts (`fonts: [font(...)]`);
+   the runtime defines --font-geist and --font-instrument. */
+@theme inline {
+  --font-sans: var(--font-geist, ui-sans-serif), ui-sans-serif, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-display: var(--font-instrument, "Iowan Old Style"), "Iowan Old Style",
+    Georgia, serif;
   --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+}
 
-  --color-background: oklch(0.975 0.004 85);
-  --color-foreground: oklch(0.17 0.004 85);
-  --color-card: oklch(0.995 0.002 85);
-  --color-card-foreground: oklch(0.17 0.004 85);
-  --color-popover: oklch(0.995 0.002 85);
-  --color-popover-foreground: oklch(0.17 0.004 85);
-  --color-primary: oklch(0.19 0.004 85);
-  --color-primary-foreground: oklch(0.98 0.002 85);
-  --color-secondary: oklch(0.94 0.006 85);
-  --color-secondary-foreground: oklch(0.21 0.004 85);
-  --color-muted: oklch(0.945 0.006 85);
-  --color-muted-foreground: oklch(0.48 0.008 85);
-  --color-accent: oklch(0.93 0.009 85);
-  --color-accent-foreground: oklch(0.21 0.004 85);
-  --color-destructive: oklch(0.577 0.245 27.325);
+@theme {
+  --color-background: oklch(0.967 0.007 80);
+  --color-foreground: oklch(0.2 0.008 70);
+  --color-card: oklch(0.993 0.003 80);
+  --color-card-foreground: oklch(0.2 0.008 70);
+  --color-popover: oklch(0.993 0.003 80);
+  --color-popover-foreground: oklch(0.2 0.008 70);
+  --color-primary: oklch(0.2 0.008 70);
+  --color-primary-foreground: oklch(0.98 0.004 80);
+  --color-secondary: oklch(0.93 0.009 80);
+  --color-secondary-foreground: oklch(0.22 0.008 70);
+  --color-muted: oklch(0.935 0.009 80);
+  --color-muted-foreground: oklch(0.5 0.012 70);
+  --color-accent: oklch(0.925 0.011 80);
+  --color-accent-foreground: oklch(0.22 0.008 70);
+  --color-destructive: oklch(0.56 0.2 28);
   --color-destructive-foreground: oklch(0.985 0 0);
-  --color-success: oklch(0.62 0.14 153);
-  --color-success-foreground: oklch(0.38 0.1 153);
-  --color-warning: oklch(0.72 0.14 75);
-  --color-warning-foreground: oklch(0.42 0.1 65);
-  --color-border: oklch(0.89 0.007 85);
-  --color-input: oklch(0.86 0.008 85);
-  --color-ring: oklch(0.53 0.015 85);
+  --color-success: oklch(0.6 0.12 155);
+  --color-success-foreground: oklch(0.4 0.09 155);
+  --color-warning: oklch(0.74 0.14 70);
+  --color-warning-foreground: oklch(0.46 0.1 60);
+  /* Live signal: pending offers, the live dot, "just listed". */
+  --color-signal: oklch(0.63 0.19 38);
+  --color-signal-foreground: oklch(0.5 0.17 38);
+  --color-border: oklch(0.895 0.011 80);
+  --color-input: oklch(0.87 0.012 80);
+  --color-ring: oklch(0.55 0.02 70);
 
   --radius-lg: 1rem;
   --radius-md: 0.625rem;
   --radius-sm: 0.5rem;
+
+  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 :root {
   color-scheme: light;
   --shadow-border:
-    0 0 0 1px rgb(0 0 0 / 0.06),
-    0 1px 2px -1px rgb(0 0 0 / 0.06),
-    0 8px 24px -16px rgb(41 37 33 / 0.18);
+    0 0 0 1px rgb(40 33 24 / 0.07),
+    0 1px 2px -1px rgb(40 33 24 / 0.06),
+    0 10px 28px -18px rgb(40 33 24 / 0.2);
   --shadow-border-hover:
-    0 0 0 1px rgb(0 0 0 / 0.09),
-    0 2px 4px -2px rgb(0 0 0 / 0.08),
-    0 16px 32px -18px rgb(41 37 33 / 0.24);
+    0 0 0 1px rgb(40 33 24 / 0.1),
+    0 2px 4px -2px rgb(40 33 24 / 0.08),
+    0 18px 36px -20px rgb(40 33 24 / 0.28);
+  --shadow-float: 0 1px 2px rgb(40 33 24 / 0.08), 0 8px 20px -12px rgb(40 33 24 / 0.35);
 }
 
 :root[data-theme="light"] {
@@ -62,61 +74,102 @@
 
 :root[data-theme="dark"] {
   color-scheme: dark;
-  --color-background: oklch(0.15 0.004 85);
-  --color-foreground: oklch(0.94 0.004 85);
-  --color-card: oklch(0.19 0.005 85);
-  --color-card-foreground: oklch(0.94 0.004 85);
-  --color-popover: oklch(0.19 0.005 85);
-  --color-popover-foreground: oklch(0.94 0.004 85);
-  --color-primary: oklch(0.93 0.004 85);
-  --color-primary-foreground: oklch(0.17 0.004 85);
-  --color-secondary: oklch(0.24 0.006 85);
-  --color-secondary-foreground: oklch(0.94 0.004 85);
-  --color-muted: oklch(0.23 0.006 85);
-  --color-muted-foreground: oklch(0.7 0.007 85);
-  --color-accent: oklch(0.25 0.008 85);
-  --color-accent-foreground: oklch(0.94 0.004 85);
-  --color-border: oklch(0.3 0.007 85);
-  --color-input: oklch(0.34 0.008 85);
-  --color-ring: oklch(0.68 0.01 85);
-  --color-success-foreground: oklch(0.82 0.12 153);
+  --color-background: oklch(0.165 0.006 70);
+  --color-foreground: oklch(0.94 0.006 80);
+  --color-card: oklch(0.2 0.007 70);
+  --color-card-foreground: oklch(0.94 0.006 80);
+  --color-popover: oklch(0.2 0.007 70);
+  --color-popover-foreground: oklch(0.94 0.006 80);
+  --color-primary: oklch(0.94 0.006 80);
+  --color-primary-foreground: oklch(0.18 0.006 70);
+  --color-secondary: oklch(0.25 0.008 70);
+  --color-secondary-foreground: oklch(0.94 0.006 80);
+  --color-muted: oklch(0.24 0.008 70);
+  --color-muted-foreground: oklch(0.7 0.01 75);
+  --color-accent: oklch(0.26 0.009 70);
+  --color-accent-foreground: oklch(0.94 0.006 80);
+  --color-border: oklch(0.3 0.008 70);
+  --color-input: oklch(0.34 0.009 70);
+  --color-ring: oklch(0.68 0.012 75);
+  --color-success-foreground: oklch(0.8 0.11 155);
   --color-warning-foreground: oklch(0.84 0.12 75);
+  --color-signal: oklch(0.7 0.17 42);
+  --color-signal-foreground: oklch(0.78 0.14 45);
   --shadow-border: 0 0 0 1px rgb(255 255 255 / 0.08);
   --shadow-border-hover: 0 0 0 1px rgb(255 255 255 / 0.14);
+  --shadow-float: 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 20px -12px rgb(0 0 0 / 0.6);
 }
 
-html,
-body {
-  height: 100%;
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --color-background: oklch(0.165 0.006 70);
+    --color-foreground: oklch(0.94 0.006 80);
+    --color-card: oklch(0.2 0.007 70);
+    --color-card-foreground: oklch(0.94 0.006 80);
+    --color-popover: oklch(0.2 0.007 70);
+    --color-popover-foreground: oklch(0.94 0.006 80);
+    --color-primary: oklch(0.94 0.006 80);
+    --color-primary-foreground: oklch(0.18 0.006 70);
+    --color-secondary: oklch(0.25 0.008 70);
+    --color-secondary-foreground: oklch(0.94 0.006 80);
+    --color-muted: oklch(0.24 0.008 70);
+    --color-muted-foreground: oklch(0.7 0.01 75);
+    --color-accent: oklch(0.26 0.009 70);
+    --color-accent-foreground: oklch(0.94 0.006 80);
+    --color-border: oklch(0.3 0.008 70);
+    --color-input: oklch(0.34 0.009 70);
+    --color-ring: oklch(0.68 0.012 75);
+    --color-success-foreground: oklch(0.8 0.11 155);
+    --color-warning-foreground: oklch(0.84 0.12 75);
+    --color-signal: oklch(0.7 0.17 42);
+    --color-signal-foreground: oklch(0.78 0.14 45);
+    --shadow-border: 0 0 0 1px rgb(255 255 255 / 0.08);
+    --shadow-border-hover: 0 0 0 1px rgb(255 255 255 / 0.14);
+    --shadow-float: 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 20px -12px rgb(0 0 0 / 0.6);
+  }
 }
 
-html {
-  -webkit-tap-highlight-color: rgb(23 23 23 / 0.08);
-}
+/* Base element rules sit in the base layer so utilities (text-nowrap,
+   truncate) override them. */
+@layer base {
+  html,
+  body {
+    height: 100%;
+  }
 
-h1,
-h2,
-h3 {
-  scroll-margin-top: 6rem;
-  text-wrap: balance;
-}
+  html {
+    -webkit-tap-highlight-color: rgb(23 23 23 / 0.08);
+  }
 
-button,
-a,
-input,
-select,
-textarea {
-  touch-action: manipulation;
-}
+  body {
+    font-feature-settings: "ss01", "cv11";
+  }
 
-:where(a, button, input, select, textarea):focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
-}
+  h1,
+  h2,
+  h3 {
+    scroll-margin-top: 6rem;
+    text-wrap: balance;
+  }
+
+  button,
+  a,
+  input,
+  select,
+  textarea {
+    touch-action: manipulation;
+  }
 
-p,
-li {
-  text-wrap: pretty;
+  :where(a, button, input, select, textarea):focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  p,
+  li {
+    text-wrap: pretty;
+  }
 }
 
 .hide-scrollbar {
@@ -127,54 +180,59 @@ li {
   display: none;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    color-scheme: dark;
-    --color-background: oklch(0.15 0.004 85);
-    --color-foreground: oklch(0.94 0.004 85);
-    --color-card: oklch(0.19 0.005 85);
-    --color-card-foreground: oklch(0.94 0.004 85);
-    --color-popover: oklch(0.19 0.005 85);
-    --color-popover-foreground: oklch(0.94 0.004 85);
-    --color-primary: oklch(0.93 0.004 85);
-    --color-primary-foreground: oklch(0.17 0.004 85);
-    --color-secondary: oklch(0.24 0.006 85);
-    --color-secondary-foreground: oklch(0.94 0.004 85);
-    --color-muted: oklch(0.23 0.006 85);
-    --color-muted-foreground: oklch(0.7 0.007 85);
-    --color-accent: oklch(0.25 0.008 85);
-    --color-accent-foreground: oklch(0.94 0.004 85);
-    --color-border: oklch(0.3 0.007 85);
-    --color-input: oklch(0.34 0.008 85);
-    --color-ring: oklch(0.68 0.01 85);
-    --color-success-foreground: oklch(0.82 0.12 153);
-    --color-warning-foreground: oklch(0.84 0.12 75);
-    --shadow-border: 0 0 0 1px rgb(255 255 255 / 0.08);
-    --shadow-border-hover: 0 0 0 1px rgb(255 255 255 / 0.14);
+/* A row that arrives over the sync connection rises into place. */
+@keyframes market-rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: none;
   }
 }
+.market-rise {
+  animation: market-rise 520ms var(--ease-out-soft) both;
+}
 
-/* Live "just listed" ticker. Items are doubled in the markup, so translating
-   the track by -50% loops seamlessly. */
-@keyframes market-marquee {
+/* A new offer or event gets a short signal-colored wash. */
+@keyframes market-flash {
   from {
-    transform: translateX(0);
+    background-color: color-mix(in oklch, var(--color-signal) 16%, transparent);
   }
   to {
-    transform: translateX(-50%);
+    background-color: transparent;
   }
 }
-.market-marquee {
-  animation: market-marquee 28s linear infinite;
+.market-flash {
+  animation: market-flash 2.4s var(--ease-out-soft) both;
 }
-.market-marquee:hover {
-  animation-play-state: paused;
+
+.market-rise.market-flash {
+  animation:
+    market-rise 520ms var(--ease-out-soft) both,
+    market-flash 2.4s var(--ease-out-soft) both;
 }
-@media (prefers-reduced-motion: reduce) {
-  .market-marquee {
-    animation: none;
+
+@keyframes market-ping {
+  0% {
+    transform: scale(1);
+    opacity: 0.7;
   }
-  .animate-pulse {
+  80%,
+  100% {
+    transform: scale(2.6);
+    opacity: 0;
+  }
+}
+.market-ping {
+  animation: market-ping 1.8s var(--ease-out-soft) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .market-rise,
+  .market-flash,
+  .market-ping {
     animation: none;
   }
 }