Spaces:

MethdAI
/

receptionist-app

Running

mukul-chauhan-methdai commited on May 26

Commit

9b1f90c

1 Parent(s): 20f0740

v1 cleanup: drop fork artifacts, add MethdAI logo, fix install URLs

- Delete plan.md (internal POC doc, outdated)
- Delete index.html + style.css at repo root (marketing page from
upstream fork by Toon Beerten — not MethdAI's work)
- Add src/reachy_mini_receptionist/static/logo.png (MethdAI brand)
- Update dashboard.html to load /static/logo.png (was 404'ing on a
filename that never existed in the repo)
- README: fix install URL to spaces/MethdAI/receptionist-app, drop
GEMINI_LIVE_MODEL from optional table (no longer dashboard-exposed),
remove stale 'requires confirmation' note on register_guest

Files changed (6) hide show

README.md +4 -8
index.html +0 -141
plan.md +0 -89
src/reachy_mini_receptionist/static/dashboard.html +1 -1
src/reachy_mini_receptionist/static/logo.png +3 -0
style.css +0 -437

README.md CHANGED Viewed

@@ -40,7 +40,7 @@ A real **[Reachy Mini](https://www.pollen-robotics.com/reachy-mini/)** robot fro
 ### Option 1 — Install via the Reachy Mini Control app (recommended)
 1. Open Reachy Mini Control on your computer
-2. **Install from Hugging Face** → search `methdai/reachy_mini_receptionist` → Install
 3. Toggle the app **On**
 4. Open the dashboard at `http://<your-robot-hostname>.local:7860/dashboard`
 5. Follow the welcome banner — it tells you exactly which API keys to add and where to find them
@@ -49,11 +49,8 @@ A real **[Reachy Mini](https://www.pollen-robotics.com/reachy-mini/)** robot fro
 ```bash
 # SSH into the robot
-git clone git@github.com:methdai/reachy_mini_receptionist.git
-cd reachy_mini_receptionist
-# Install the package in editable mode
-/venvs/apps_venv/bin/pip install -e .
 # Make sure the Reachy Mini daemon is running
 sudo systemctl status reachy-mini-daemon
@@ -86,7 +83,6 @@ The welcome banner on first launch tells you which keys are missing. Click each
 |---|---|
 | `VOICE_BACKEND` | Switch between `gemini` (default) and `openai` |
 | `GEMINI_LIVE_VOICE` | Pick a voice — Puck, Charon, Kore, Aoede, etc. |
-| `GEMINI_LIVE_MODEL` | Override the default Gemini Live model |
 | `OPENAI_API_KEY` | Required only if `VOICE_BACKEND=openai` |
 | `RESEND_FROM` | Sender address — defaults to Resend's sandbox sender (delivers only to your Resend account); set to `reception@yourdomain.com` after verifying your domain at Resend |
 | `FACE_TTL_DAYS` | How long a registered face is remembered (default 90 days) |
@@ -102,7 +98,7 @@ The welcome banner on first launch tells you which keys are missing. Click each
 **Voice + tools** — Either `gemini_live.py` or `openai_realtime.py` (chosen by `VOICE_BACKEND`) handles bi-directional audio with the LLM. Tools available to the LLM:
 - `get_today_calendar` — fetch today's appointments
-- `register_guest` — save a new visitor's face under a name (requires confirmation)
 - `lookup_employee` — find a host in the directory
 - `send_email` — notify the host

 ### Option 1 — Install via the Reachy Mini Control app (recommended)
 1. Open Reachy Mini Control on your computer
+2. **Install from Hugging Face** → paste `MethdAI/receptionist-app` → Install
 3. Toggle the app **On**
 4. Open the dashboard at `http://<your-robot-hostname>.local:7860/dashboard`
 5. Follow the welcome banner — it tells you exactly which API keys to add and where to find them
 ```bash
 # SSH into the robot
+/venvs/apps_venv/bin/pip install --upgrade \
+    git+https://huggingface.co/spaces/MethdAI/receptionist-app
 # Make sure the Reachy Mini daemon is running
 sudo systemctl status reachy-mini-daemon
 |---|---|
 | `VOICE_BACKEND` | Switch between `gemini` (default) and `openai` |
 | `GEMINI_LIVE_VOICE` | Pick a voice — Puck, Charon, Kore, Aoede, etc. |
 | `OPENAI_API_KEY` | Required only if `VOICE_BACKEND=openai` |
 | `RESEND_FROM` | Sender address — defaults to Resend's sandbox sender (delivers only to your Resend account); set to `reception@yourdomain.com` after verifying your domain at Resend |
 | `FACE_TTL_DAYS` | How long a registered face is remembered (default 90 days) |
 **Voice + tools** — Either `gemini_live.py` or `openai_realtime.py` (chosen by `VOICE_BACKEND`) handles bi-directional audio with the LLM. Tools available to the LLM:
 - `get_today_calendar` — fetch today's appointments
+- `register_guest` — save a new visitor's face under a name
 - `lookup_employee` — find a host in the directory
 - `send_email` — notify the host

index.html DELETED Viewed

@@ -1,141 +0,0 @@
-<!doctype html>
-<html>
-<head>
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	<title>Reachy Mini AI Receptionist</title>
-	<link rel="preconnect" href="https://fonts.googleapis.com">
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-	<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">
-	<link rel="stylesheet" href="style.css" />
-</head>
-<body>
-	<header class="hero">
-		<div class="topline">
-			<div class="brand">
-				<span class="logo">🤖</span>
-				<span class="brand-name">Reachy Mini</span>
-			</div>
-			<div class="pill">Realtime voice · Vision aware · Expressive motion</div>
-		</div>
-		<div class="hero-grid">
-			<div class="hero-copy">
-				<p class="eyebrow">AI Receptionist</p>
-				<h1>
-					Face-aware receptionist with tool-calling automation.
-					<a class="live-demo-badge" href="#live-demo">Live demo</a>
-				</h1>
-				<p class="lede">
-					A camera-aware front-desk assistant for Reachy Mini. Greet visitors naturally, register guests, check appointments, and log handoff actions from a single dashboard.
-				</p>
-				<p class="lede">
-					Built for reception workflows: realtime face detection to know when someone is present, face recognition to personalize interactions, and structured tool calls so the AI can register guests, query appointments, and trigger handoff actions reliably.
-				</p>
-				<div class="hero-actions">
-					<a class="btn primary" href="#highlights">Explore features</a>
-					<a class="btn ghost" href="#story">See how it feels</a>
-				</div>
-				<div class="hero-badges">
-					<span>Realtime face detection</span>
-					<span>Visitor face recognition</span>
-					<span>Model tool-calling workflows</span>
-					<span>Low-latency voice + dashboard ops</span>
-				</div>
-			</div>
-			<div class="hero-visual">
-				<div class="glass-card">
-					<img src="screenshot.png" alt="Reachy Mini AI Receptionist screenshot" class="hero-gif">
-					<p class="caption">Reachy Mini can greet, identify, and assist visitors with receptionist-specific context.</p>
-					<div class="video-embed-wrapper" id="live-demo">
-						<iframe
-							src="https://www.youtube.com/embed/4U9uj5b9p2Y"
-							title="Reachy Mini AI Receptionist live demo"
-							loading="lazy"
-							allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-							allowfullscreen>
-						</iframe>
-					</div>
-					<p class="video-link"><a href="https://youtu.be/4U9uj5b9p2Y" target="_blank" rel="noopener">Watch on YouTube</a></p>
-				</div>
-			</div>
-		</div>
-	</header>
-	<section id="highlights" class="section features">
-		<div class="section-header">
-			<p class="eyebrow">What’s inside</p>
-			<h2>All-in-one receptionist layer for your robot</h2>
-			<p class="intro">
-				The app blends realtime speech, vision, and workflow tools so Reachy Mini can run a front desk flow.
-			</p>
-		</div>
-		<div class="feature-grid">
-			<div class="feature-card">
-				<span class="icon">🎤</span>
-				<h3>Natural voice chat</h3>
-				<p>Talk freely and get fast, high-quality replies powered by realtime models.</p>
-			</div>
-			<div class="feature-card">
-				<span class="icon">🎥</span>
-				<h3>Face-aware onboarding</h3>
-				<p>Recognize known visitors, register new guests, and keep the latest face context synced with the conversation.</p>
-			</div>
-			<div class="feature-card">
-				<span class="icon">💃</span>
-				<h3>Expressive motion</h3>
-				<p>Use subtle head and antenna gestures during welcome and registration interactions.</p>
-			</div>
-			<div class="feature-card">
-				<span class="icon">🧠</span>
-				<h3>Calendar-aware assistance</h3>
-				<p>Use appointment context to welcome guests on time and guide follow-up actions.</p>
-			</div>
-			<div class="feature-card">
-				<span class="icon">🌐</span>
-				<h3>Ready for your setup</h3>
-				<p>Works in console mode or web mode with dashboard APIs for quick operator visibility.</p>
-			</div>
-		</div>
-	</section>
-	<section id="story" class="section story">
-		<div class="story-grid">
-			<div class="story-card">
-				<p class="eyebrow">How it feels</p>
-				<h3>From greeting to handoff in seconds</h3>
-				<ul class="story-list">
-					<li><span>👋</span> Greet visitors naturally with low-latency voice conversation.</li>
-					<li><span>👀</span> Use camera context to identify known guests or register new ones.</li>
-					<li><span>📅</span> Check appointment context and respond with relevant timing cues.</li>
-					<li><span>📨</span> Log handoff actions in the outbox for host follow-up.</li>
-				</ul>
-			</div>
-			<div class="story-card secondary">
-				<p class="eyebrow">Where it shines</p>
-				<h3>Great for offices, demos, and guided reception flows</h3>
-				<p class="story-text">
-					Show how Reachy Mini can handle repeatable visitor workflows while staying expressive and conversational. It is ideal for front-desk demos, events, and product showcases.
-				</p>
-				<div class="chips">
-					<span class="chip">Guest recognition</span>
-					<span class="chip">Calendar check</span>
-					<span class="chip">Outbox logging</span>
-					<span class="chip">Dashboard APIs</span>
-					<span class="chip">Realtime conversation</span>
-				</div>
-			</div>
-		</div>
-	</section>
-	<footer class="footer">
-		<p>
-			Reachy Mini AI Receptionist by Toon Beerten (<a href="mailto:toon@neontreebot.be">toon@neontreebot.be</a>), based on the Reachy Mini conversation app by <a href="https://github.com/pollen-robotics" target="_blank" rel="noopener">Pollen Robotics</a>.
-			Explore more apps on <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank" rel="noopener">Hugging Face Spaces</a>.
-		</p>
-	</footer>
-</body>
-</html>

plan.md DELETED Viewed

@@ -1,89 +0,0 @@
-# Reachy Mini AI Receptionist — Plan
-## What This App Does
-An interactive AI receptionist that:
-1. Talks to visitors via OpenAI Realtime API (low-latency speech in/out).
-2. Monitors camera frames for face detection/recognition in a background worker.
-3. Stores guest face crops as PNG files in a persistent `guests/` directory.
-4. Uses a hardcoded POC calendar for appointment context.
-5. Exposes a dashboard with live video, guests, calendar, outbox, and debug logs.
-Start command:
-```bash
-python -m reachy_mini_receptionist.main
-```
----
-## Architecture
-The receptionist extends the conversation base stack and adds receptionist-specific modules:
-```text
-src/reachy_mini_receptionist/
-├── face_db.py                  # File-based face store (PNG per guest in guests/)
-├── face_recognition_worker.py  # Background detection/recognition + event emission
-├── calendar_data.py            # Hardcoded appointment data
-├── main.py                     # App entrypoint + dashboard API mounting
-└── tools/
-      ├── get_today_calendar.py
-      ├── register_guest.py
-      ├── send_email.py
-      └── check_current_face.py   # Legacy compatibility path
-```
----
-## Key Design Decisions
-### 1) Face database is file-based
-- Guests are stored as grayscale PNG crops in `guests/`.
-- `FaceDatabase` enforces capacity with FIFO-style eviction when full.
-- No SQL database is required.
-### 2) Face recognition runs in a background worker
-- `FaceRecognitionWorker` runs independently from the realtime audio loop.
-- Worker state is consumed by tools and dashboard endpoints.
-- Stable face transitions emit context events to the model.
-### 3) Calendar is static for POC
-- `calendar_data.py` returns hardcoded appointments.
-- Easy to swap later for Google/Microsoft calendar integrations.
-### 4) Dashboard API is mounted in-app
-- `GET /dashboard` serves the receptionist dashboard.
-- `GET /video_feed` streams annotated MJPEG.
-- `GET /api/guests`, `/api/calendar`, `/api/outbox`, `/api/face_status`, `/api/logs` expose app state.
-### 5) Profile is intentionally locked
-- `LOCKED_PROFILE` is set to `_reachy_mini_receptionist_locked_profile` in `config.py`.
-- Current locked tool allow-list is:
-   - `get_today_calendar`
-   - `register_guest`
-   - `send_email`
----
-## Face Context Event Behavior
-The receptionist flow is push-based:
-- Stable face transitions are emitted by `FaceRecognitionWorker`.
-- `OpenaiRealtimeHandler` injects these as context-only user items.
-- No automatic `response.create` is triggered by these face context updates.
----
-## Known Notes
-- With `--no-camera`, recognition and registration tools cannot operate.
-- Output language behavior is controlled by profile instructions.
-- If profile/tool loading fails, the app can fall back to default model behavior; monitor startup logs.

src/reachy_mini_receptionist/static/dashboard.html CHANGED Viewed

@@ -943,7 +943,7 @@
 <body>
 <header>
-  <img src="/static/methdai-logo.png" alt="MethdAI"
        class="brand-logo"
        onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';" />
   <span class="brand-logo-fallback" style="font-size:1.4rem; display:none;">🤖</span>

 <body>
 <header>
+  <img src="/static/logo.png" alt="MethdAI"
        class="brand-logo"
        onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';" />
   <span class="brand-logo-fallback" style="font-size:1.4rem; display:none;">🤖</span>

src/reachy_mini_receptionist/static/logo.png ADDED Viewed

Git LFS Details

SHA256: 5401c5baf4e2a503b752dbd7abd69998a6e403852339e2fed727971ce9f24fd5
Pointer size: 130 Bytes
Size of remote file: 18.3 kB

style.css DELETED Viewed

@@ -1,437 +0,0 @@
-:root {
-	--bg: #060c1d;
-	--panel: #0c172b;
-	--glass: rgba(17, 27, 48, 0.7);
-	--card: rgba(255, 255, 255, 0.04);
-	--accent: #7af5c4;
-	--accent-2: #f6c452;
-	--text: #e8edf7;
-	--muted: #9fb3ce;
-	--border: rgba(255, 255, 255, 0.08);
-	--shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
-	font-family: "Space Grotesk", "Manrope", system-ui, -apple-system, sans-serif;
-}
-* {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-}
-body {
-	background: radial-gradient(circle at 20% 20%, rgba(122, 245, 196, 0.12), transparent 30%),
-		radial-gradient(circle at 80% 0%, rgba(246, 196, 82, 0.14), transparent 32%),
-		radial-gradient(circle at 50% 70%, rgba(124, 142, 255, 0.1), transparent 30%),
-		var(--bg);
-	color: var(--text);
-	min-height: 100vh;
-	line-height: 1.6;
-	padding-bottom: 3rem;
-}
-a {
-	color: inherit;
-	text-decoration: none;
-}
-.hero {
-	padding: 3.5rem clamp(1.5rem, 3vw, 3rem) 2.5rem;
-	position: relative;
-	overflow: hidden;
-}
-.hero::after {
-	content: "";
-	position: absolute;
-	inset: 0;
-	background: linear-gradient(120deg, rgba(122, 245, 196, 0.12), rgba(246, 196, 82, 0.08), transparent);
-	pointer-events: none;
-}
-.topline {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	max-width: 1200px;
-	margin: 0 auto 2rem;
-	position: relative;
-	z-index: 2;
-}
-.brand {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	font-weight: 700;
-	letter-spacing: 0.5px;
-	color: var(--text);
-}
-.logo {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 2.2rem;
-	height: 2.2rem;
-	border-radius: 10px;
-	background: linear-gradient(145deg, rgba(122, 245, 196, 0.15), rgba(124, 142, 255, 0.15));
-	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
-}
-.brand-name {
-	font-size: 1.1rem;
-}
-.pill {
-	background: rgba(255, 255, 255, 0.06);
-	border: 1px solid var(--border);
-	padding: 0.6rem 1rem;
-	border-radius: 999px;
-	color: var(--muted);
-	font-size: 0.9rem;
-	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
-}
-.hero-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-	gap: clamp(1.5rem, 2.5vw, 2.5rem);
-	max-width: 1200px;
-	margin: 0 auto;
-	position: relative;
-	z-index: 2;
-	align-items: center;
-}
-.hero-copy h1 {
-	font-size: clamp(2.6rem, 4vw, 3.6rem);
-	margin-bottom: 1rem;
-	line-height: 1.1;
-	letter-spacing: -0.5px;
-}
-.live-demo-badge {
-	display: inline-flex;
-	align-items: center;
-	margin-left: 0.65rem;
-	padding: 0.2rem 0.55rem;
-	font-size: 0.34em;
-	line-height: 1;
-	letter-spacing: 0.02em;
-	font-weight: 600;
-	border-radius: 999px;
-	border: 1px solid var(--border);
-	color: var(--muted);
-	background: rgba(255, 255, 255, 0.04);
-	vertical-align: middle;
-}
-.live-demo-badge:hover {
-	color: var(--text);
-	border-color: rgba(255, 255, 255, 0.22);
-	background: rgba(255, 255, 255, 0.07);
-}
-.eyebrow {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.5rem;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-	font-size: 0.8rem;
-	color: var(--muted);
-	margin-bottom: 0.75rem;
-}
-.eyebrow::before {
-	content: "";
-	display: inline-block;
-	width: 24px;
-	height: 2px;
-	background: linear-gradient(90deg, var(--accent), var(--accent-2));
-	border-radius: 999px;
-}
-.lede {
-	font-size: 1.1rem;
-	color: var(--muted);
-	max-width: 620px;
-}
-.hero-actions {
-	display: flex;
-	gap: 1rem;
-	align-items: center;
-	margin: 1.6rem 0 1.2rem;
-	flex-wrap: wrap;
-}
-.btn {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: 0.6rem;
-	padding: 0.85rem 1.4rem;
-	border-radius: 12px;
-	font-weight: 700;
-	border: 1px solid transparent;
-	cursor: pointer;
-	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
-}
-.btn.primary {
-	background: linear-gradient(135deg, #7af5c4, #7c8eff);
-	color: #0a0f1f;
-	box-shadow: 0 15px 30px rgba(122, 245, 196, 0.25);
-}
-.btn.primary:hover {
-	transform: translateY(-2px);
-	box-shadow: 0 25px 45px rgba(122, 245, 196, 0.35);
-}
-.btn.ghost {
-	background: rgba(255, 255, 255, 0.05);
-	border-color: var(--border);
-	color: var(--text);
-}
-.btn.ghost:hover {
-	border-color: rgba(255, 255, 255, 0.3);
-	transform: translateY(-2px);
-}
-.btn.wide {
-	width: 100%;
-	justify-content: center;
-}
-.hero-badges {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.6rem;
-	color: var(--muted);
-	font-size: 0.9rem;
-}
-.hero-badges span {
-	padding: 0.5rem 0.8rem;
-	border-radius: 10px;
-	border: 1px solid var(--border);
-	background: rgba(255, 255, 255, 0.04);
-}
-.hero-visual .glass-card {
-	background: rgba(255, 255, 255, 0.03);
-	border: 1px solid var(--border);
-	border-radius: 18px;
-	padding: 1.2rem;
-	box-shadow: var(--shadow);
-	backdrop-filter: blur(10px);
-}
-.hero-gif {
-	width: 100%;
-	display: block;
-	border-radius: 14px;
-	border: 1px solid var(--border);
-	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
-}
-.caption {
-	margin-top: 0.75rem;
-	color: var(--muted);
-	font-size: 0.95rem;
-}
-.video-embed-wrapper {
-	margin-top: 0.9rem;
-	position: relative;
-	width: 100%;
-	aspect-ratio: 16 / 9;
-	border-radius: 12px;
-	overflow: hidden;
-	border: 1px solid var(--border);
-	background: rgba(0, 0, 0, 0.35);
-}
-.video-embed-wrapper iframe {
-	width: 100%;
-	height: 100%;
-	display: block;
-	border: 0;
-}
-.video-link {
-	margin-top: 0.55rem;
-	font-size: 0.85rem;
-	color: var(--muted);
-}
-.video-link a {
-	text-decoration: underline;
-	text-underline-offset: 2px;
-}
-.section {
-	max-width: 1200px;
-	margin: 0 auto;
-	padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
-}
-.section-header {
-	text-align: center;
-	max-width: 780px;
-	margin: 0 auto 2rem;
-}
-.section-header h2 {
-	font-size: clamp(2rem, 3vw, 2.6rem);
-	margin-bottom: 0.5rem;
-}
-.intro {
-	color: var(--muted);
-	font-size: 1.05rem;
-}
-.feature-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-	gap: 1rem;
-}
-.feature-card {
-	background: rgba(255, 255, 255, 0.03);
-	border: 1px solid var(--border);
-	border-radius: 16px;
-	padding: 1.25rem;
-	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
-}
-.feature-card:hover {
-	transform: translateY(-4px);
-	border-color: rgba(122, 245, 196, 0.3);
-	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
-}
-.feature-card .icon {
-	width: 48px;
-	height: 48px;
-	border-radius: 12px;
-	display: grid;
-	place-items: center;
-	background: rgba(122, 245, 196, 0.14);
-	margin-bottom: 0.8rem;
-	font-size: 1.4rem;
-}
-.feature-card h3 {
-	margin-bottom: 0.35rem;
-}
-.feature-card p {
-	color: var(--muted);
-}
-.story {
-	padding-top: 1rem;
-}
-.story-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-	gap: 1rem;
-}
-.story-card {
-	background: rgba(255, 255, 255, 0.03);
-	border: 1px solid var(--border);
-	border-radius: 18px;
-	padding: 1.5rem;
-	box-shadow: var(--shadow);
-}
-.story-card.secondary {
-	background: linear-gradient(145deg, rgba(124, 142, 255, 0.08), rgba(122, 245, 196, 0.06));
-}
-.story-card h3 {
-	margin-bottom: 0.8rem;
-}
-.story-list {
-	list-style: none;
-	display: grid;
-	gap: 0.7rem;
-	color: var(--muted);
-	font-size: 0.98rem;
-}
-.story-list li {
-	display: flex;
-	gap: 0.7rem;
-	align-items: flex-start;
-}
-.story-text {
-	color: var(--muted);
-	line-height: 1.7;
-	margin-bottom: 1rem;
-}
-.chips {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.5rem;
-}
-.chip {
-	padding: 0.45rem 0.8rem;
-	border-radius: 12px;
-	background: rgba(0, 0, 0, 0.2);
-	border: 1px solid var(--border);
-	color: var(--text);
-	font-size: 0.9rem;
-}
-.footer {
-	text-align: center;
-	color: var(--muted);
-	padding: 2rem 1.5rem 0;
-}
-.footer a {
-	color: var(--text);
-	border-bottom: 1px solid transparent;
-}
-.footer a:hover {
-	border-color: rgba(255, 255, 255, 0.5);
-}
-@media (max-width: 768px) {
-	.hero {
-		padding-top: 2.5rem;
-	}
-	.topline {
-		flex-direction: column;
-		gap: 0.8rem;
-		align-items: flex-start;
-	}
-	.hero-actions {
-		width: 100%;
-	}
-	.btn {
-		width: 100%;
-		justify-content: center;
-	}
-	.hero-badges {
-		gap: 0.4rem;
-	}
-}