Spaces:

jrubiosainz
/

mood_engine

Running

App Files Files Community

jrubiosainz commited on 5 days ago

Commit

85195d1

verified ·

1 Parent(s): 8c6aa6d

Initial publish: mood_engine

Browse files

Files changed (11) hide show

.gitignore +3 -0
README.md +60 -4
index.html +37 -16
mood_engine/__init__.py +0 -0
mood_engine/__pycache__/main.cpython-312.pyc +0 -0
mood_engine/main.py +202 -0
mood_engine/static/index.html +27 -0
mood_engine/static/main.js +47 -0
mood_engine/static/style.css +25 -0
pyproject.toml +29 -0
style.css +399 -16

.gitignore ADDED Viewed

	@@ -0,0 +1,3 @@

+__pycache__/
+*.egg-info/
+build/

README.md CHANGED Viewed

@@ -1,10 +1,66 @@
 ---
 title: Mood Engine
-emoji: 🐢
-colorFrom: green
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Mood Engine
+emoji: 🎭
+colorFrom: purple
+colorTo: blue
 sdk: static
 pinned: false
+short_description: "Full emotion system with personality presets"
+tags:
+  - reachy_mini
+  - reachy_mini_python_app
 ---
+# Mood Engine 🎭🤖
+Full emotion state machine for Reachy Mini with 6 base emotions, compound emotions, personality presets, micro-expressions, mood decay, and configurable web UI.
+## Emotions
+**Base:** neutral, happy, sad, curious, surprised, angry
+**Compound:** bittersweet, awestruck, nervous, frustrated, intrigued, content
+## Personality Presets
+| Personality | Style |
+|------------|-------|
+| 🐱 Shy | Subtle movements, slow transitions |
+| 🦁 Bold | Exaggerated movements, fast transitions |
+| 🐒 Playful | Bouncy movements, quick changes |
+## Features
+- Smooth emotion transitions with natural durations
+- Micro-expressions (random subtle twitches every 3-8s)
+- Mood decay toward neutral over time
+- Emotion memory (history of transitions)
+- Compound emotions via blending
+- Personality modifiers affect intensity, speed, and idle behavior
+- REST API for control
+## API (port 8042)
+```bash
+# Set emotion
+curl -X POST http://localhost:8042/emotion -H "Content-Type: application/json" -d '{"emotion": "happy", "intensity": 0.8}'
+# Set compound emotion
+curl -X POST http://localhost:8042/emotion -d '{"emotion": "awestruck"}'
+# Change personality
+curl -X POST http://localhost:8042/personality -d '{"personality": "playful"}'
+# Get current state
+curl http://localhost:8042/state
+```
+## Requirements
+- `numpy`
+## Install & Run
+```bash
+pip install .
+reachy-mini run mood_engine
+```

index.html CHANGED Viewed

@@ -1,19 +1,40 @@
 <!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
 		</div>
-	</body>
-</html>

 <!doctype html>
 <html>
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width" />
+	<title> Mood Engine </title>
+	<link rel="stylesheet" href="style.css" />
+</head>
+<body>
+	<div class="hero">
+		<div class="hero-content">
+			<div class="app-icon">🤖⚡</div>
+			<h1> Mood Engine </h1>
+			<p class="tagline">Enter your tagline here</p>
 		</div>
+	</div>
+	<div class="container">
+		<div class="main-card">
+			<div class="app-preview">
+				<div class="preview-image">
+					<div class="camera-feed">🛠️</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="footer">
+		<p>
+			🤖 Mood Engine •
+			<a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
+			<a href="https://huggingface.co/spaces/pollen-robotics/reachy-mini-landing-page#apps" target="_blank">Browse More
+				Apps</a>
+		</p>
+	</div>
+</body>
+</html>

mood_engine/__init__.py ADDED Viewed

File without changes

mood_engine/__pycache__/main.cpython-312.pyc ADDED Viewed

Binary file (10.2 kB). View file

mood_engine/main.py ADDED Viewed

	@@ -0,0 +1,202 @@

+"""Mood Engine — Full emotion state machine with personality presets and micro-expressions."""
+import threading
+import time
+import enum
+import math
+from dataclasses import dataclass, field
+from typing import Optional
+import numpy as np
+from reachy_mini import ReachyMini, ReachyMiniApp
+from reachy_mini.utils import create_head_pose
+from pydantic import BaseModel
+class Emotion(str, enum.Enum):
+    NEUTRAL = "neutral"
+    HAPPY = "happy"
+    SAD = "sad"
+    CURIOUS = "curious"
+    SURPRISED = "surprised"
+    ANGRY = "angry"
+class Personality(str, enum.Enum):
+    SHY = "shy"
+    BOLD = "bold"
+    PLAYFUL = "playful"
+# Emotion poses: (yaw, pitch, roll, ant_l_deg, ant_r_deg)
+EMOTION_POSES = {
+    Emotion.NEUTRAL: (0, 0, 0, 0, 0),
+    Emotion.HAPPY: (0, -5, 0, 25, 25),
+    Emotion.SAD: (0, 10, 0, -15, -15),
+    Emotion.CURIOUS: (12, -8, 10, 20, 5),
+    Emotion.SURPRISED: (0, -12, 0, 35, 35),
+    Emotion.ANGRY: (0, 5, 0, -20, -20),
+}
+# Personality modifiers
+PERSONALITY_MODS = {
+    Personality.SHY: {"intensity": 0.5, "transition_speed": 0.5, "idle_amplitude": 0.3},
+    Personality.BOLD: {"intensity": 1.5, "transition_speed": 1.5, "idle_amplitude": 1.2},
+    Personality.PLAYFUL: {"intensity": 1.2, "transition_speed": 2.0, "idle_amplitude": 1.5},
+}
+# Transition speeds between emotions (seconds)
+TRANSITION_DURATIONS = {
+    (Emotion.NEUTRAL, Emotion.SURPRISED): 0.15,
+    (Emotion.HAPPY, Emotion.SURPRISED): 0.2,
+    (Emotion.NEUTRAL, Emotion.CURIOUS): 0.4,
+    (Emotion.SAD, Emotion.ANGRY): 0.4,
+    (Emotion.ANGRY, Emotion.SAD): 0.8,
+}
+DEFAULT_TRANSITION = 0.6
+# Compound emotions
+COMPOUND_EMOTIONS = {
+    "bittersweet": (Emotion.HAPPY, Emotion.SAD, 0.6),
+    "awestruck": (Emotion.SURPRISED, Emotion.HAPPY, 0.7),
+    "nervous": (Emotion.SURPRISED, Emotion.SAD, 0.5),
+    "frustrated": (Emotion.ANGRY, Emotion.SAD, 0.6),
+    "intrigued": (Emotion.CURIOUS, Emotion.SURPRISED, 0.5),
+    "content": (Emotion.HAPPY, Emotion.NEUTRAL, 0.4),
+}
+class MoodEngine(ReachyMiniApp):
+    custom_app_url: str | None = "http://0.0.0.0:8042"
+    request_media_backend: str | None = "gstreamer_no_video"
+    def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
+        # State
+        current_emotion = Emotion.NEUTRAL
+        target_emotion = Emotion.NEUTRAL
+        personality = Personality.PLAYFUL
+        intensity = 0.7
+        transition_start = time.time()
+        transition_duration = 0.6
+        emotion_memory: list[tuple[Emotion, float]] = []  # (emotion, timestamp)
+        mood_decay_rate = 0.01  # intensity decay per second toward neutral
+        # Current interpolated pose
+        current_pose = np.array(EMOTION_POSES[Emotion.NEUTRAL], dtype=float)
+        target_pose = current_pose.copy()
+        # Micro-expression state
+        micro_timer = time.time() + np.random.uniform(3, 8)
+        micro_active = False
+        micro_pose_offset = np.zeros(5)
+        micro_end = 0.0
+        # Settings API
+        class EmotionRequest(BaseModel):
+            emotion: str
+            intensity: float = 0.7
+        class PersonalityRequest(BaseModel):
+            personality: str
+        @self.settings_app.post("/emotion")
+        def set_emotion(req: EmotionRequest):
+            nonlocal target_emotion, intensity, transition_start, transition_duration, target_pose
+            try:
+                target_emotion = Emotion(req.emotion)
+            except ValueError:
+                # Check compound emotions
+                if req.emotion in COMPOUND_EMOTIONS:
+                    e1, e2, blend = COMPOUND_EMOTIONS[req.emotion]
+                    p1 = np.array(EMOTION_POSES[e1], dtype=float)
+                    p2 = np.array(EMOTION_POSES[e2], dtype=float)
+                    target_pose = p1 * blend + p2 * (1 - blend)
+                    target_emotion = e1  # Primary
+                    intensity = req.intensity
+                    transition_start = time.time()
+                    mods = PERSONALITY_MODS[personality]
+                    transition_duration = DEFAULT_TRANSITION / mods["transition_speed"]
+                    return {"status": "compound", "emotion": req.emotion}
+                return {"error": f"Unknown emotion: {req.emotion}"}
+            intensity = req.intensity
+            transition_start = time.time()
+            mods = PERSONALITY_MODS[personality]
+            dur = TRANSITION_DURATIONS.get(
+                (current_emotion, target_emotion), DEFAULT_TRANSITION
+            )
+            transition_duration = dur / mods["transition_speed"]
+            target_pose = np.array(EMOTION_POSES[target_emotion], dtype=float) * intensity * mods["intensity"]
+            emotion_memory.append((target_emotion, time.time()))
+            return {"status": "ok", "emotion": target_emotion.value, "duration": transition_duration}
+        @self.settings_app.post("/personality")
+        def set_personality(req: PersonalityRequest):
+            nonlocal personality
+            try:
+                personality = Personality(req.personality)
+                return {"status": "ok", "personality": personality.value}
+            except ValueError:
+                return {"error": f"Unknown: {req.personality}. Use: shy, bold, playful"}
+        @self.settings_app.get("/state")
+        def get_state():
+            return {
+                "emotion": current_emotion.value,
+                "target": target_emotion.value,
+                "intensity": round(intensity, 3),
+                "personality": personality.value,
+                "memory_size": len(emotion_memory),
+            }
+        # Main loop
+        while not stop_event.is_set():
+            t = time.time()
+            mods = PERSONALITY_MODS[personality]
+            # Smooth transition
+            elapsed = t - transition_start
+            alpha = min(1.0, elapsed / transition_duration) if transition_duration > 0 else 1.0
+            # Ease-in-out
+            alpha = 0.5 * (1 - math.cos(math.pi * alpha))
+            current_pose = current_pose + (target_pose - current_pose) * min(alpha, 0.1)
+            if alpha >= 0.99:
+                current_emotion = target_emotion
+            # Mood decay toward neutral
+            if intensity > 0.1 and (t - transition_start) > 10:
+                intensity = max(0.1, intensity - mood_decay_rate * 0.02)
+                target_pose = np.array(EMOTION_POSES[target_emotion], dtype=float) * intensity * mods["intensity"]
+            # Micro-expressions
+            if not micro_active and t > micro_timer:
+                micro_active = True
+                micro_end = t + np.random.uniform(0.1, 0.3)
+                # Small random twitch
+                micro_pose_offset = np.random.uniform(-3, 3, 5) * mods["idle_amplitude"] * 0.3
+            if micro_active and t > micro_end:
+                micro_active = False
+                micro_pose_offset = np.zeros(5)
+                micro_timer = t + np.random.uniform(3, 8)
+            # Idle breathing overlay
+            breath = 2.0 * mods["idle_amplitude"] * np.sin(2 * np.pi * 0.15 * t)
+            idle_offset = np.array([0, breath, 0, 0, 0])
+            # Final pose
+            final = current_pose + micro_pose_offset + idle_offset
+            head = create_head_pose(yaw=final[0], pitch=final[1], roll=final[2], degrees=True)
+            antennas = np.deg2rad(np.array([final[3], final[4]]))
+            reachy_mini.set_target(head=head, antennas=antennas)
+            time.sleep(0.02)
+if __name__ == "__main__":
+    app = MoodEngine()
+    try:
+        app.wrapped_run()
+    except KeyboardInterrupt:
+        app.stop()

mood_engine/static/index.html ADDED Viewed

	@@ -0,0 +1,27 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Reachy Mini example app template</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <h1>Reachy Mini – Control Panel</h1>
+    <div id="controls">
+        <label style="display:flex; align-items:center; gap:8px;">
+            <input type="checkbox" id="antenna-checkbox" checked>
+            Antennas
+        </label>
+        <button id="sound-btn">Play Sound</button>
+    </div>
+    <div id="status">Antennas status: running</div>
+    <script src="/static/main.js"></script>
+</body>
+</html>

mood_engine/static/main.js ADDED Viewed

	@@ -0,0 +1,47 @@

+let antennasEnabled = true;
+async function updateAntennasState(enabled) {
+    try {
+        const resp = await fetch("/antennas", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ enabled }),
+        });
+        const data = await resp.json();
+        antennasEnabled = data.antennas_enabled;
+        updateUI();
+    } catch (e) {
+        document.getElementById("status").textContent = "Backend error";
+    }
+}
+async function playSound() {
+    try {
+        await fetch("/play_sound", { method: "POST" });
+    } catch (e) {
+        console.error("Error triggering sound:", e);
+    }
+}
+function updateUI() {
+    const checkbox = document.getElementById("antenna-checkbox");
+    const status = document.getElementById("status");
+    checkbox.checked = antennasEnabled;
+    if (antennasEnabled) {
+        status.textContent = "Antennas status: running";
+    } else {
+        status.textContent = "Antennas status: stopped";
+    }
+}
+document.getElementById("antenna-checkbox").addEventListener("change", (e) => {
+    updateAntennasState(e.target.checked);
+});
+document.getElementById("sound-btn").addEventListener("click", () => {
+    playSound();
+});
+updateUI();

mood_engine/static/style.css ADDED Viewed

	@@ -0,0 +1,25 @@

+body {
+    font-family: sans-serif;
+    margin: 24px;
+}
+#sound-btn {
+    padding: 10px 20px;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 16px;
+    border-radius: 6px;
+    background-color: #3498db;
+}
+#status {
+    margin-top: 16px;
+    font-weight: bold;
+}
+#controls {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}

pyproject.toml ADDED Viewed

	@@ -0,0 +1,29 @@

+[build-system]
+requires = ["setuptools>=61.0"]
+build-backend = "setuptools.build_meta"
+[project]
+name = "mood_engine"
+version = "0.1.0"
+description = "Full emotion state machine with personality presets, micro-expressions, mood decay, and compound emotions"
+readme = "README.md"
+requires-python = ">=3.10"
+dependencies = [
+    "reachy-mini",
+    "numpy"
+]
+keywords = ["reachy-mini-app"]
+[project.entry-points."reachy_mini_apps"]
+mood_engine = "mood_engine.main:MoodEngine"
+[tool.setuptools]
+package-dir = { "" = "." }
+include-package-data = true
+[tool.setuptools.packages.find]
+where = ["."]
+[tool.setuptools.package-data]
+mood_engine = ["**/*"] # Also include all non-.py files

style.css CHANGED Viewed

@@ -1,28 +1,411 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
 	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
 	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
 body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+	line-height: 1.6;
+	color: #333;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	min-height: 100vh;
+}
+.hero {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: white;
+	padding: 4rem 2rem;
+	text-align: center;
+}
+.hero-content {
+	max-width: 800px;
+	margin: 0 auto;
 }
+.app-icon {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+	display: inline-block;
 }
+.hero h1 {
+	font-size: 3rem;
+	font-weight: 700;
+	margin-bottom: 1rem;
+	background: linear-gradient(45deg, #fff, #f0f9ff);
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
 }
+.tagline {
+	font-size: 1.25rem;
+	opacity: 0.9;
+	max-width: 600px;
 	margin: 0 auto;
+}
+.container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 2rem;
+	position: relative;
+	z-index: 2;
+}
+.main-card {
+	background: white;
+	border-radius: 20px;
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+	margin-top: -2rem;
+	overflow: hidden;
+	margin-bottom: 3rem;
+}
+.app-preview {
+	background: linear-gradient(135deg, #1e3a8a, #3b82f6);
+	padding: 3rem;
+	color: white;
+	text-align: center;
+	position: relative;
+}
+.preview-image {
+	background: #000;
+	border-radius: 15px;
+	padding: 2rem;
+	max-width: 500px;
+	margin: 0 auto;
+	position: relative;
+	overflow: hidden;
+}
+.camera-feed {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+	opacity: 0.7;
+}
+.detection-overlay {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 100%;
+}
+.bbox {
+	background: rgba(34, 197, 94, 0.9);
+	color: white;
+	padding: 0.5rem 1rem;
+	border-radius: 8px;
+	font-size: 0.9rem;
+	font-weight: 600;
+	margin: 0.5rem;
+	display: inline-block;
+	border: 2px solid #22c55e;
+}
+.app-details {
+	padding: 3rem;
+}
+.app-details h2 {
+	font-size: 2rem;
+	color: #1e293b;
+	margin-bottom: 2rem;
+	text-align: center;
+}
+.template-info {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 2rem;
+	margin-bottom: 3rem;
+}
+.info-box {
+	background: #f0f9ff;
+	border: 2px solid #e0f2fe;
+	border-radius: 12px;
+	padding: 2rem;
+}
+.info-box h3 {
+	color: #0c4a6e;
+	margin-bottom: 1rem;
+	font-size: 1.2rem;
+}
+.info-box p {
+	color: #0369a1;
+	line-height: 1.6;
+}
+.how-to-use {
+	background: #fefce8;
+	border: 2px solid #fde047;
+	border-radius: 12px;
+	padding: 2rem;
+	margin-top: 3rem;
+}
+.how-to-use h3 {
+	color: #a16207;
+	margin-bottom: 1.5rem;
+	font-size: 1.3rem;
+	text-align: center;
+}
+.steps {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+.step {
+	display: flex;
+	align-items: flex-start;
+	gap: 1rem;
+}
+.step-number {
+	background: #eab308;
+	color: white;
+	width: 2rem;
+	height: 2rem;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: bold;
+	flex-shrink: 0;
+}
+.step h4 {
+	color: #a16207;
+	margin-bottom: 0.5rem;
+	font-size: 1.1rem;
+}
+.step p {
+	color: #ca8a04;
+}
+.download-card {
+	background: white;
+	border-radius: 20px;
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+	padding: 3rem;
+	text-align: center;
+}
+.download-card h2 {
+	font-size: 2rem;
+	color: #1e293b;
+	margin-bottom: 1rem;
+}
+.download-card>p {
+	color: #64748b;
+	font-size: 1.1rem;
+	margin-bottom: 2rem;
+}
+.dashboard-config {
+	margin-bottom: 2rem;
+	text-align: left;
+	max-width: 400px;
+	margin-left: auto;
+	margin-right: auto;
+}
+.dashboard-config label {
+	display: block;
+	color: #374151;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+}
+.dashboard-config input {
+	width: 100%;
+	padding: 0.75rem 1rem;
+	border: 2px solid #e5e7eb;
+	border-radius: 8px;
+	font-size: 0.95rem;
+	transition: border-color 0.2s;
+}
+.dashboard-config input:focus {
+	outline: none;
+	border-color: #667eea;
+}
+.install-btn {
+	background: linear-gradient(135deg, #667eea, #764ba2);
+	color: white;
+	border: none;
+	padding: 1.25rem 3rem;
 	border-radius: 16px;
+	font-size: 1.2rem;
+	font-weight: 700;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.75rem;
+	margin-bottom: 2rem;
+	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+.install-btn:hover:not(:disabled) {
+	transform: translateY(-3px);
+	box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
+}
+.install-btn:disabled {
+	opacity: 0.7;
+	cursor: not-allowed;
+	transform: none;
+}
+.manual-option {
+	background: #f8fafc;
+	border-radius: 12px;
+	padding: 2rem;
+	margin-top: 2rem;
+}
+.manual-option h3 {
+	color: #1e293b;
+	margin-bottom: 1rem;
+	font-size: 1.2rem;
+}
+.manual-option>p {
+	color: #64748b;
+	margin-bottom: 1rem;
+}
+.btn-icon {
+	font-size: 1.1rem;
+}
+.install-status {
+	padding: 1rem;
+	border-radius: 8px;
+	font-size: 0.9rem;
+	text-align: center;
+	display: none;
+	margin-top: 1rem;
+}
+.install-status.success {
+	background: #dcfce7;
+	color: #166534;
+	border: 1px solid #bbf7d0;
+}
+.install-status.error {
+	background: #fef2f2;
+	color: #dc2626;
+	border: 1px solid #fecaca;
+}
+.install-status.loading {
+	background: #dbeafe;
+	color: #1d4ed8;
+	border: 1px solid #bfdbfe;
+}
+.install-status.info {
+	background: #e0f2fe;
+	color: #0369a1;
+	border: 1px solid #7dd3fc;
+}
+.manual-install {
+	background: #1f2937;
+	border-radius: 8px;
+	padding: 1rem;
+	margin-bottom: 1rem;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+.manual-install code {
+	color: #10b981;
+	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+	font-size: 0.85rem;
+	flex: 1;
+	overflow-x: auto;
+}
+.copy-btn {
+	background: #374151;
+	color: white;
+	border: none;
+	padding: 0.5rem 1rem;
+	border-radius: 6px;
+	font-size: 0.8rem;
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+.copy-btn:hover {
+	background: #4b5563;
+}
+.manual-steps {
+	color: #6b7280;
+	font-size: 0.9rem;
+	line-height: 1.8;
+}
+.footer {
+	text-align: center;
+	padding: 2rem;
+	color: white;
+	opacity: 0.8;
+}
+.footer a {
+	color: white;
+	text-decoration: none;
+	font-weight: 600;
 }
+.footer a:hover {
+	text-decoration: underline;
 }
+/* Responsive Design */
+@media (max-width: 768px) {
+	.hero {
+		padding: 2rem 1rem;
+	}
+	.hero h1 {
+		font-size: 2rem;
+	}
+	.container {
+		padding: 0 1rem;
+	}
+	.app-details,
+	.download-card {
+		padding: 2rem;
+	}
+	.features-grid {
+		grid-template-columns: 1fr;
+	}
+	.download-options {
+		grid-template-columns: 1fr;
+	}
+}