feat: polish object archive ui

docs/03-dev-schedule.md

@@ -137,12 +137,14 @@ Right:  Secret Diary
 Bottom: Share Card + Trace
 ```
 
-- [ ] 自定义 CSS
-- [ ] 自定义 hero section
-- [ ] 隐藏 Gradio 默认风格
-- [ ] 加 typewriter animation
-- [ ] 做英文主文案 + 中文辅助
-- [ ] 做 6 个示例卡片
+- [x] 自定义 CSS
+- [x] 自定义 hero section
+- [x] 隐藏 Gradio 默认风格
+- [x] 加 typewriter / archive reveal 视觉感
+- [x] 做英文主文案 + 中文辅助
+- [x] 做 6 个示例卡片
+
+完成记录：Phase 2 UI 已完成为 mock runtime archive dashboard。仍未接入真实 VLM、llama.cpp、LoRA 或 Hugging Face Space；`UI 参考/` 仅作为本地视觉参考，不入库。
 
 ---
 

docs/INITIAL_STAGE_REPORT.md

@@ -86,7 +86,7 @@ OK
 ## Current Limitations
 
 - The app still uses mock model outputs.
-- UI polish remains intentionally unfinished.
+- Phase 2 UI polish is complete, but it still runs on the mock runtime.
 - Sample traces are mock traces, not real model traces.
 - Remote repo and hosted Space are not created yet.
 

docs/PHASE2_UI_REPORT.md

@@ -0,0 +1,44 @@
+# Phase 2 UI Report
+
+## Scope
+
+Phase 2 polishes the mock MVP into an archive-style Gradio interface while preserving the current deterministic pipeline.
+
+Completed:
+
+- archive dashboard layout: Object Intake, Object File, Secret Diary, Share Card, Object Chat, and Trace
+- English-first / Chinese-second UI hierarchy
+- dark paper archive styling with amber highlights and museum-label panels
+- segmented personality mode control
+- six visible example object cards that trigger stable mock generation
+- empty states for Object File, Diary, Share Card, and Trace
+- UI error fallback that exposes the exception type and message without hiding generation context
+- screenshot-friendly share card rendering
+- mobile single-column layout for narrow screens
+
+Not included:
+
+- real MiniCPM-V or other VLM integration
+- real llama.cpp / llama-cpp-python text runtime
+- LoRA fine-tuning
+- Hugging Face Space deployment
+- GitHub remote creation
+- external image assets or production dependencies
+
+## Reference Boundary
+
+The local `UI 参考/` images were used only for visual direction: archive panels, dark paper texture, amber linework, example cards, and museum-label hierarchy.
+
+`UI 参考/` remains ignored by Git and must not be committed.
+
+## Runtime Boundary
+
+The app still runs on the mock runtime. The UI calls the existing `src/pipeline.py` boundary and does not change model behavior.
+
+## Verification Targets
+
+- desktop preview at 1440x1000
+- mobile preview at 390x844
+- six example object cards generate object JSON, persona JSON, diary, share card, and trace
+- manual description plus personality mode still generates successfully
+- chat shows "Wake an object first. / 请先唤醒一个物品。" before generation

docs/README.md

@@ -21,5 +21,6 @@ This folder contains the planning source of truth for Objectverse Diary.
 - `DATASET.md`: SFT preview schema, generation workflow, curation checklist, and publishing notes.
 - `FAILURES.md`: failure record template and anticipated non-UI fallback cases.
 - `INITIAL_STAGE_REPORT.md`: local initial-stage completion evidence and acceptance commands.
+- `PHASE2_UI_REPORT.md`: archive UI completion scope, runtime boundary, and verification targets.
 - `EXTERNAL_SETUP.md`: GitHub and Hugging Face Space setup notes requiring confirmation.
 - `SUBMISSION_GUIDE.md`: final submission checklist.

src/examples.py

@@ -2,37 +2,58 @@
 
 EXAMPLE_OBJECTS = [
     {
+        "archive_id": "OVD-001",
         "label": "Coffee mug / 咖啡杯",
         "description": "old white coffee mug on a developer desk",
         "mode": "Cynical",
+        "tags": "Everyday · Warmth",
     },
     {
+        "archive_id": "OVD-002",
         "label": "Mechanical keyboard / 机械键盘",
         "description": "dusty black mechanical keyboard in an office",
         "mode": "Philosopher",
+        "tags": "Work · Habit",
     },
     {
+        "archive_id": "OVD-003",
         "label": "Running shoe / 跑鞋",
         "description": "worn running shoe near the bedroom door",
         "mode": "Lonely",
+        "tags": "Journey · Wear",
     },
     {
+        "archive_id": "OVD-004",
         "label": "Desk lamp / 台灯",
         "description": "metal desk lamp over late night notes",
         "mode": "Dramatic",
+        "tags": "Night · Focus",
     },
     {
+        "archive_id": "OVD-005",
         "label": "Water bottle / 水瓶",
         "description": "clear plastic water bottle on a kitchen counter",
         "mode": "Romantic",
+        "tags": "Routine · Clear",
     },
     {
+        "archive_id": "OVD-006",
         "label": "Notebook / 笔记本",
         "description": "old notebook of abandoned project ideas",
         "mode": "Cynical",
+        "tags": "Memory · Drafts",
     },
 ]
 
 
 def gradio_examples() -> list[list[str]]:
     return [[item["description"]] for item in EXAMPLE_OBJECTS]
+
+
+def example_button_label(index: int) -> str:
+    item = EXAMPLE_OBJECTS[index]
+    return (
+        f"{item['archive_id']}\n"
+        f"{item['label']}\n"
+        f"{item['mode']} · {item['tags']}"
+    )

src/renderer/share_card.py

@@ -13,10 +13,16 @@ def render_share_card(persona: PersonaEnvelope, diary: DiaryEntry) -> str:
     tags = "".join(f"<span>{escape(tag)}</span>" for tag in p.tags)
     return f"""
     <article class="{CARD_WRAPPER_CLASS}">
-      <div class="card-kicker">Objectverse Diary / 万物日记</div>
-      <h2>{escape(p.character_name)}</h2>
+      <header class="card-header">
+        <div>
+          <div class="card-kicker">Objectverse Diary / 万物日记</div>
+          <h2>{escape(p.character_name)}</h2>
+        </div>
+        <span class="card-stamp">OBJECT FILE</span>
+      </header>
       <p class="card-object">{escape(p.object_name)} · {escape(p.mood)}</p>
       <p class="card-quote">{escape(diary.english)}</p>
+      <p class="card-cn">{escape(diary.chinese)}</p>
       <div class="card-tags">{tags}</div>
     </article>
     """

src/ui/layout.py

@@ -1,39 +1,100 @@
-"""Gradio layout for the initial mock MVP."""
+"""Gradio layout for the mock Objectverse archive UI."""
 
 from __future__ import annotations
 
+from html import escape
 from pathlib import Path
 from typing import Any
 
 import gradio as gr
 
 from src.config import APP_TITLE, DEFAULT_MODE, PERSONALITY_MODES
-from src.examples import gradio_examples
+from src.examples import EXAMPLE_OBJECTS, example_button_label
 from src.models.llama_cpp_runner import reply_as_object
+from src.models.schema import GenerationResult
 from src.pipeline import format_diary_markdown, generate_object_diary
 from src.renderer.share_card import render_share_card
 from src.ui import copy
 
+CHAT_EMPTY_MESSAGE = "Wake an object first. / 请先唤醒一个物品。"
+
+OBJECT_FILE_EMPTY = """
+<div class="archive-empty">
+  <span class="archive-label">Object File / 物品档案</span>
+  <h3>No object awake yet.</h3>
+  <p>Upload or describe an everyday object to open its secret archive. / 上传或描述一个日常物品后打开秘密档案。</p>
+</div>
+"""
+
+DIARY_EMPTY = """
+### Secret Diary / 秘密日记
+
+Wake an object to open its diary. / 唤醒物品后阅读它的日记。
+"""
+
+SHARE_CARD_EMPTY = """
+<div class="objectverse-placeholder">
+  <span>Share Card / 分享卡片</span>
+  <strong>Waiting for an object file.</strong>
+  <p>A screenshot-friendly archive card will appear here. / 可截图分享的档案卡片会显示在这里。</p>
+</div>
+"""
+
+TRACE_EMPTY = """
+<div class="archive-empty compact">
+  <span class="archive-label">Trace / 模型轨迹</span>
+  <p>No trace saved yet. / 尚未保存 trace。</p>
+</div>
+"""
+
+GenerationUiResult = tuple[
+    str,
+    dict[str, Any],
+    dict[str, Any],
+    str,
+    str,
+    str,
+    dict[str, Any],
+    str,
+    dict[str, Any] | None,
+    list[dict[str, str]],
+]
+
 
 def build_app() -> gr.Blocks:
     css = Path("src/ui/styles.css").read_text(encoding="utf-8")
 
-    with gr.Blocks(css=css, title=APP_TITLE) as demo:
+    with gr.Blocks(head=f"<style>{css}</style>", title=APP_TITLE, fill_width=True) as demo:
         gr.HTML(
             f"""
             <section id="objectverse-hero">
-              <h1>{APP_TITLE}</h1>
-              <p>Every object has a secret life.<br><span>每个物品都有秘密人生。</span></p>
+              <div class="hero-mark">
+                <span>OVD</span>
+                <small>000827</small>
+              </div>
+              <div class="hero-copy">
+                <p class="hero-kicker">Local small-model object archive<br><span>本地小模型物品档案</span></p>
+                <h1>{APP_TITLE}</h1>
+                <p>Every object has a secret life.<br><span>每个物品都有秘密人生。</span></p>
+              </div>
+              <div class="hero-badges" aria-label="Project constraints">
+                <span>Small Models</span>
+                <span>Local-First</span>
+                <span>No Cloud APIs</span>
+              </div>
             </section>
-            """
+            """,
+            padding=False,
         )
 
         result_state = gr.State()
 
-        with gr.Row():
-            with gr.Column(scale=4, elem_classes=["archive-panel"]):
+        with gr.Row(elem_id="archive-main-grid", elem_classes=["archive-grid"]):
+            with gr.Column(scale=4, elem_classes=["archive-panel", "intake-panel"]):
+                gr.HTML(_panel_header("01", "Object Intake", "物品接收", "Upload, describe, or pick a sample."), padding=False)
                 image_input = gr.Image(
                     label=copy.UPLOAD_LABEL,
+                    show_label=False,
                     type="filepath",
                     sources=["upload"],
                     elem_id="object-upload",
@@ -42,63 +103,102 @@ def build_app() -> gr.Blocks:
                     label=copy.DESCRIPTION_LABEL,
                     placeholder=copy.DESCRIPTION_PLACEHOLDER,
                     lines=3,
+                    max_lines=5,
                     elem_id="object-description",
                 )
-                mode_input = gr.Dropdown(
+                mode_input = gr.Radio(
                     label=copy.MODE_LABEL,
                     choices=PERSONALITY_MODES,
                     value=DEFAULT_MODE,
                     elem_id="personality-mode",
+                    elem_classes=["mode-switch"],
                 )
-                generate_button = gr.Button(copy.GENERATE_LABEL, variant="primary")
-                gr.Examples(
-                    examples=gradio_examples(),
-                    inputs=[description_input],
-                    label=copy.EXAMPLES_LABEL,
-                    examples_per_page=6,
-                    elem_id="object-examples",
+                generate_button = gr.Button(copy.GENERATE_LABEL, variant="primary", elem_id="wake-button")
+
+                gr.HTML(
+                    """
+                    <div class="example-section-title">
+                      <span>Example Objects / 示例物品</span>
+                      <small>Click a file to generate instantly.</small>
+                    </div>
+                    """,
+                    padding=False,
                 )
+                example_buttons: list[gr.Button] = []
+                for index in range(len(EXAMPLE_OBJECTS)):
+                    example_buttons.append(
+                        gr.Button(
+                            example_button_label(index),
+                            elem_classes=["example-card"],
+                            variant="secondary",
+                        )
+                    )
 
-            with gr.Column(scale=6, elem_classes=["archive-panel"]):
-                object_json = gr.JSON(label=copy.OBJECT_JSON_LABEL)
-                persona_json = gr.JSON(label=copy.PERSONA_JSON_LABEL)
+            with gr.Column(scale=4, elem_classes=["archive-panel", "file-panel"]):
+                gr.HTML(_panel_header("02", "Object File", "物品档案", "Structured mock understanding and persona."), padding=False)
+                object_file_summary = gr.HTML(value=OBJECT_FILE_EMPTY, elem_id="object-file-summary", padding=False)
+                with gr.Accordion("Raw object understanding JSON / 原始物品识别 JSON", open=False):
+                    object_json = gr.JSON(value={}, label=copy.OBJECT_JSON_LABEL)
+                with gr.Accordion("Raw persona JSON / 原始人格 JSON", open=False):
+                    persona_json = gr.JSON(value={}, label=copy.PERSONA_JSON_LABEL)
 
-        with gr.Row():
-            with gr.Column(scale=6, elem_classes=["archive-panel"]):
+            with gr.Column(scale=4, elem_classes=["archive-panel", "diary-panel"]):
+                gr.HTML(_panel_header("03", "Secret Diary", "秘密日记", "A private note written by the object."), padding=False)
                 diary_output = gr.Markdown(
-                    value="### Secret Diary / 秘密日记\n\nWake an object to open its file. / 唤醒物品后打开档案。",
+                    value=DIARY_EMPTY,
                     label=copy.DIARY_LABEL,
                     elem_id="diary-output",
                 )
-            with gr.Column(scale=6, elem_classes=["archive-panel"]):
-                share_card = gr.HTML(
-                    value='<div class="objectverse-placeholder">Share card will appear here. / 分享卡片会显示在这里。</div>',
-                    label=copy.SHARE_CARD_LABEL,
-                )
 
-        with gr.Row():
-            with gr.Column(scale=6, elem_classes=["archive-panel"]):
-                chatbot = gr.Chatbot(label=copy.CHAT_LABEL, type="messages")
+        with gr.Row(elem_id="archive-bottom-grid", elem_classes=["archive-grid", "bottom-grid"]):
+            with gr.Column(scale=5, elem_classes=["archive-panel", "share-panel"]):
+                gr.HTML(_panel_header("04", "Share Card", "分享卡片", "Fixed-width card for screenshots."), padding=False)
+                share_card = gr.HTML(value=SHARE_CARD_EMPTY, label=copy.SHARE_CARD_LABEL, padding=False)
+
+            with gr.Column(scale=4, elem_classes=["archive-panel", "chat-panel"]):
+                gr.HTML(_panel_header("05", "Object Chat", "物品对话", "Ask after the object wakes up."), padding=False)
+                chatbot = gr.Chatbot(
+                    value=_empty_chat_history(),
+                    label=copy.CHAT_LABEL,
+                    type="messages",
+                    height=300,
+                    allow_tags=False,
+                )
                 chat_input = gr.Textbox(placeholder=copy.CHAT_INPUT_PLACEHOLDER, show_label=False)
-                chat_button = gr.Button(copy.CHAT_BUTTON_LABEL)
-            with gr.Column(scale=6, elem_classes=["archive-panel"]):
-                trace_json = gr.JSON(label=copy.TRACE_JSON_LABEL)
+                chat_button = gr.Button(copy.CHAT_BUTTON_LABEL, elem_classes=["quiet-button"])
+
+            with gr.Column(scale=3, elem_classes=["archive-panel", "trace-panel"]):
+                gr.HTML(_panel_header("06", "Trace", "模型轨迹", "Saved JSON record for reproducibility."), padding=False)
+                trace_summary = gr.HTML(value=TRACE_EMPTY, elem_id="trace-summary", padding=False)
+                trace_json = gr.JSON(value={}, label=copy.TRACE_JSON_LABEL)
                 trace_path = gr.Textbox(label=copy.TRACE_PATH_LABEL, interactive=False)
 
+        manual_outputs = [
+            object_file_summary,
+            object_json,
+            persona_json,
+            diary_output,
+            share_card,
+            trace_summary,
+            trace_json,
+            trace_path,
+            result_state,
+            chatbot,
+        ]
+
         generate_button.click(
             fn=generate_object_file,
             inputs=[image_input, description_input, mode_input],
-            outputs=[
-                object_json,
-                persona_json,
-                diary_output,
-                share_card,
-                trace_json,
-                trace_path,
-                result_state,
-                chatbot,
-            ],
+            outputs=manual_outputs,
         )
+
+        for index, button in enumerate(example_buttons):
+            button.click(
+                fn=_example_handler(index),
+                inputs=[],
+                outputs=[description_input, mode_input, *manual_outputs],
+            )
+
         chat_button.click(
             fn=chat_with_object,
             inputs=[chat_input, chatbot, result_state],
@@ -113,36 +213,161 @@ def build_app() -> gr.Blocks:
     return demo
 
 
+def _panel_header(index: str, title: str, chinese: str, note: str) -> str:
+    return f"""
+    <header class="panel-header">
+      <span>{escape(index)}</span>
+      <div>
+        <h2>{escape(title)} <small>{escape(chinese)}</small></h2>
+        <p>{escape(note)}</p>
+      </div>
+    </header>
+    """
+
+
+def _example_handler(index: int):
+    def load_example() -> tuple[Any, ...]:
+        item = EXAMPLE_OBJECTS[index]
+        result = generate_object_file(None, item["description"], item["mode"])
+        return item["description"], item["mode"], *result
+
+    return load_example
+
+
 def generate_object_file(
     image_path: str | None,
     description: str,
     mode: str,
-) -> tuple[dict[str, Any], dict[str, Any], str, str, dict[str, Any], str, dict[str, Any], list[dict[str, str]]]:
-    result = generate_object_diary(image_path, description, mode)
+) -> GenerationUiResult:
+    try:
+        result = generate_object_diary(image_path, description, mode)
+    except Exception as exc:  # pragma: no cover - exercised manually by UI failure paths.
+        return _generation_error(exc, description, mode)
+
+    object_payload = result.object_understanding.model_dump(mode="json")
+    persona_payload = result.persona.model_dump(mode="json")
     return (
-        result.object_understanding.model_dump(mode="json"),
-        result.persona.model_dump(mode="json"),
+        _render_object_file(result),
+        object_payload,
+        persona_payload,
         format_diary_markdown(result.diary.title, result.diary.english, result.diary.chinese),
         render_share_card(result.persona, result.diary),
+        _render_trace_summary(result),
         result.trace.model_dump(mode="json"),
         result.trace_path,
         result.model_dump(mode="json"),
-        [],
+        _awake_chat_history(result),
     )
 
 
+def _render_object_file(result: GenerationResult) -> str:
+    obj = result.object_understanding.object
+    persona = result.persona.persona
+    features = "".join(f"<li>{escape(feature)}</li>" for feature in obj.visible_features)
+    tags = "".join(f"<span>{escape(tag)}</span>" for tag in persona.tags)
+    confidence = f"{obj.confidence:.0%}"
+    return f"""
+    <article class="object-file-card">
+      <div class="file-meta">
+        <span>Confidence {escape(confidence)}</span>
+        <span>{escape(result.trace.mode)}</span>
+      </div>
+      <h3>{escape(persona.character_name)}</h3>
+      <p class="object-name">{escape(obj.name)} / {escape(persona.object_name)}</p>
+      <dl>
+        <div>
+          <dt>Mood</dt>
+          <dd>{escape(persona.mood)}</dd>
+        </div>
+        <div>
+          <dt>Secret fear</dt>
+          <dd>{escape(persona.secret_fear)}</dd>
+        </div>
+        <div>
+          <dt>Core memory</dt>
+          <dd>{escape(persona.core_memory)}</dd>
+        </div>
+      </dl>
+      <div class="feature-list">
+        <strong>Visible features / 可见特征</strong>
+        <ul>{features}</ul>
+      </div>
+      <p class="complaint">{escape(persona.complaint)}</p>
+      <div class="file-tags">{tags}</div>
+    </article>
+    """
+
+
+def _render_trace_summary(result: GenerationResult) -> str:
+    return f"""
+    <div class="trace-card">
+      <span class="archive-label">Trace saved / Trace 已保存</span>
+      <strong>{escape(result.trace.trace_id)}</strong>
+      <p>{escape(result.trace.model_runtime["vision"])} · {escape(result.trace.model_runtime["text"])}</p>
+    </div>
+    """
+
+
+def _generation_error(exc: Exception, description: str, mode: str) -> GenerationUiResult:
+    error_type = type(exc).__name__
+    error_message = str(exc) or "Unknown generation error"
+    error_payload = {
+        "error": error_type,
+        "message": error_message,
+        "input": {"description": description, "mode": mode},
+    }
+    error_html = f"""
+    <div class="archive-error">
+      <span>Generation failed / 生成失败</span>
+      <strong>{escape(error_type)}</strong>
+      <p>{escape(error_message)}</p>
+    </div>
+    """
+    error_markdown = (
+        "### Generation failed / 生成失败\n\n"
+        f"{error_type}: {error_message}\n\n"
+        "Please try another description or sample object. / 请尝试其他描述或示例物品。"
+    )
+    return (
+        error_html,
+        error_payload,
+        error_payload,
+        error_markdown,
+        error_html,
+        error_html,
+        error_payload,
+        "",
+        None,
+        [{"role": "assistant", "content": f"Generation failed. / 生成失败：{error_type}"}],
+    )
+
+
+def _empty_chat_history() -> list[dict[str, str]]:
+    return [{"role": "assistant", "content": CHAT_EMPTY_MESSAGE}]
+
+
+def _awake_chat_history(result: GenerationResult) -> list[dict[str, str]]:
+    name = result.persona.persona.character_name
+    return [
+        {
+            "role": "assistant",
+            "content": f"{name} is awake. Ask what it remembers. / {name} 已被唤醒，可以追问它记得什么。",
+        }
+    ]
+
+
 def chat_with_object(
     message: str,
     history: list[dict[str, str]] | None,
     result_state: dict[str, Any] | None,
 ) -> tuple[list[dict[str, str]], str]:
-    history = history or []
+    history = history or _empty_chat_history()
     clean_message = message.strip()
     if not clean_message:
         return history, ""
 
     if not result_state:
-        reply = "Wake an object first. / 请先唤醒一个物品。"
+        reply = CHAT_EMPTY_MESSAGE
     else:
         reply = reply_as_object(result_state["persona"], clean_message)
 

src/ui/styles.css

@@ -1,169 +1,733 @@
-body {
-  background: #16120e;
+:root {
+  --ov-bg: #15120e;
+  --ov-panel: rgba(31, 27, 21, 0.9);
+  --ov-panel-soft: rgba(44, 37, 28, 0.72);
+  --ov-border: rgba(214, 165, 82, 0.34);
+  --ov-border-strong: rgba(232, 176, 82, 0.58);
+  --ov-text: #f0e4d0;
+  --ov-muted: #c4ad8d;
+  --ov-faint: #8f7b5f;
+  --ov-amber: #d99a35;
+  --ov-amber-bright: #f0bd62;
+  --ov-green: #9fb37a;
+  --ov-red: #b96f55;
+  --ov-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
+}
+
+html,
+body,
+gradio-app {
+  background: var(--ov-bg);
   overflow-x: hidden;
+  width: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+.gradio-container,
+.gradio-container * {
+  box-sizing: border-box;
+  min-width: 0;
 }
 
 .gradio-container {
   background:
-    radial-gradient(circle at top left, rgba(191, 138, 64, 0.18), transparent 28rem),
-    linear-gradient(135deg, #1a1510 0%, #2a2119 48%, #151515 100%);
-  color: #f3eadc;
+    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px),
+    linear-gradient(135deg, #18140f 0%, #241d16 45%, #11100e 100%);
+  background-size: 28px 28px, 28px 28px, auto;
+  color: var(--ov-text);
   font-family: Georgia, "Times New Roman", serif;
-  max-width: 100%;
+  margin: 0 auto !important;
+  max-width: 1480px !important;
+  min-height: 100vh;
   overflow-x: hidden;
+  padding: 24px !important;
+}
+
+.gradio-container > main,
+.gradio-container > main > .wrap,
+.gradio-container > main > .wrap > .contain {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  max-width: 100% !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  width: 100% !important;
+}
+
+.gradio-container .contain {
+  max-width: none !important;
 }
 
 #objectverse-hero {
-  border: 1px solid rgba(218, 178, 112, 0.28);
-  background: rgba(28, 22, 16, 0.82);
-  padding: 22px;
+  align-items: center;
+  background:
+    linear-gradient(90deg, rgba(217, 154, 53, 0.08), transparent 34%),
+    rgba(23, 20, 16, 0.86);
+  border: 1px solid var(--ov-border);
+  border-radius: 8px;
+  box-shadow: var(--ov-shadow);
+  display: grid;
+  gap: 18px;
+  grid-template-columns: auto 1fr auto;
+  padding: 18px;
+}
+
+.hero-mark {
+  align-items: center;
+  border: 1px solid var(--ov-border-strong);
+  border-radius: 50%;
+  color: var(--ov-amber-bright);
+  display: flex;
+  flex-direction: column;
+  height: 82px;
+  justify-content: center;
+  width: 82px;
+}
+
+.hero-mark span,
+.hero-mark small {
+  letter-spacing: 0;
+}
+
+.hero-mark span {
+  font-size: 20px;
+}
+
+.hero-mark small {
+  color: var(--ov-muted);
+  font-size: 11px;
+}
+
+.hero-kicker {
+  color: var(--ov-amber-bright);
+  font-size: 13px;
+  font-style: italic;
+  margin: 0 0 8px;
+  overflow-wrap: anywhere;
+  white-space: normal;
 }
 
 #objectverse-hero h1 {
-  color: #f6d38b;
-  font-size: 34px;
-  line-height: 1.12;
+  color: var(--ov-text);
+  font-size: 40px;
+  line-height: 1.05;
   margin: 0 0 8px;
 }
 
 #objectverse-hero p {
-  color: #d8c7ad;
+  color: var(--ov-muted);
   font-size: 16px;
+  line-height: 1.5;
   margin: 0;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+#objectverse-hero .hero-copy span {
+  color: var(--ov-muted);
+}
+
+.hero-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+#objectverse-hero .hero-badges span {
+  border: 1px solid var(--ov-border);
+  border-radius: 6px;
+  color: var(--ov-amber-bright);
+  font-size: 13px;
+  padding: 10px 14px;
+  white-space: nowrap;
+}
+
+#objectverse-hero .hero-mark span {
+  color: var(--ov-amber-bright);
 }
 
-#objectverse-hero span {
-  color: #d8c7ad;
+#archive-main-grid,
+#archive-bottom-grid {
+  gap: 16px;
+  margin-top: 16px;
 }
 
 .archive-panel {
-  border: 1px solid rgba(218, 178, 112, 0.24);
-  background: rgba(24, 20, 16, 0.76);
-  padding: 14px;
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.025), transparent),
+    var(--ov-panel);
+  border: 1px solid var(--ov-border);
+  border-radius: 8px;
+  box-shadow: var(--ov-shadow);
+  padding: 16px;
 }
 
-.objectverse-card {
-  border: 1px solid rgba(246, 211, 139, 0.42);
-  background: #211912;
-  color: #f4ead8;
-  padding: 22px;
-  max-width: 720px;
+.archive-panel .block,
+.archive-panel .form,
+.archive-panel .wrap,
+.archive-panel .input-container,
+.archive-panel textarea,
+.archive-panel input {
+  background-color: transparent !important;
+  color: var(--ov-text) !important;
 }
 
-.objectverse-card h2 {
-  color: #f6d38b;
-  font-size: 28px;
-  margin: 8px 0;
+.panel-header {
+  align-items: flex-start;
+  border-bottom: 1px solid rgba(214, 165, 82, 0.18);
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
 }
 
-.card-kicker,
-.card-object {
-  color: #cdb894;
-  letter-spacing: 0;
+.panel-header > span {
+  background: rgba(217, 154, 53, 0.16);
+  border: 1px solid var(--ov-border);
+  border-radius: 6px;
+  color: var(--ov-amber-bright) !important;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: 13px;
+  justify-content: center;
+  padding: 7px 9px;
 }
 
-.card-quote {
-  border-left: 3px solid #bf8a40;
-  color: #f3eadc;
+.panel-header h2 {
+  color: var(--ov-text) !important;
+  font-size: 19px;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.panel-header small {
+  color: var(--ov-muted) !important;
+  font-size: 13px;
+  font-weight: 400;
+}
+
+.panel-header p {
+  color: var(--ov-muted) !important;
+  font-size: 13px;
+  line-height: 1.45;
+  margin: 5px 0 0;
+}
+
+.gradio-container label,
+.gradio-container .label-wrap span {
+  color: var(--ov-muted) !important;
+}
+
+.gradio-container textarea,
+.gradio-container input[type="text"] {
+  border: 1px solid rgba(214, 165, 82, 0.24) !important;
+  border-radius: 6px !important;
+  color: var(--ov-text) !important;
+  font-family: Georgia, "Times New Roman", serif !important;
+  line-height: 1.5 !important;
+  overflow-wrap: break-word !important;
+  white-space: pre-wrap !important;
+}
+
+.gradio-container textarea::placeholder,
+.gradio-container input::placeholder {
+  color: rgba(196, 173, 141, 0.68) !important;
+}
+
+#object-upload {
+  border: 1px dashed rgba(217, 154, 53, 0.52);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+#personality-mode .wrap,
+.mode-switch .wrap {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 8px !important;
+}
+
+#personality-mode label,
+.mode-switch label {
+  align-items: center;
+  background: rgba(31, 27, 21, 0.92) !important;
+  border: 1px solid rgba(214, 165, 82, 0.34) !important;
+  border-radius: 7px !important;
+  color: var(--ov-muted) !important;
+  display: flex !important;
+  flex: 1 1 102px;
+  justify-content: center;
+  min-height: 48px;
+  padding: 8px !important;
+  text-align: center;
+  white-space: normal !important;
+}
+
+#personality-mode label span,
+.mode-switch label span {
+  color: var(--ov-muted) !important;
+  overflow-wrap: anywhere;
+  white-space: normal !important;
+}
+
+#personality-mode label:has(input:checked),
+.mode-switch label:has(input:checked) {
+  background: rgba(217, 154, 53, 0.18) !important;
+  border-color: var(--ov-amber) !important;
+  color: var(--ov-amber-bright) !important;
+}
+
+#personality-mode label:has(input:checked) span,
+.mode-switch label:has(input:checked) span {
+  color: var(--ov-amber-bright) !important;
+}
+
+#wake-button {
+  background: linear-gradient(180deg, #e0ad62 0%, #bd7926 100%) !important;
+  border: 1px solid #f0bd62 !important;
+  border-radius: 8px !important;
+  color: #1d140b !important;
+  font-family: Georgia, "Times New Roman", serif !important;
+  font-size: 18px !important;
+  font-weight: 700 !important;
+  min-height: 58px;
+  text-shadow: none !important;
+}
+
+.quiet-button {
+  border: 1px solid var(--ov-border) !important;
+  color: var(--ov-amber-bright) !important;
+}
+
+.example-section-title {
+  align-items: baseline;
+  border-top: 1px solid rgba(214, 165, 82, 0.18);
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+  margin: 18px 0 10px;
+  padding-top: 14px;
+}
+
+.example-section-title span {
+  color: var(--ov-text);
+  font-size: 15px;
+}
+
+.example-section-title small {
+  color: var(--ov-faint);
+  font-size: 12px;
+}
+
+button.example-card {
+  background:
+    linear-gradient(90deg, rgba(217, 154, 53, 0.1), transparent 52%),
+    var(--ov-panel-soft) !important;
+  border: 1px solid rgba(214, 165, 82, 0.26) !important;
+  border-radius: 7px !important;
+  color: var(--ov-text) !important;
+  display: block !important;
+  font-family: Georgia, "Times New Roman", serif !important;
+  height: auto !important;
+  line-height: 1.4 !important;
+  margin-top: 8px !important;
+  min-height: 78px;
+  overflow-wrap: anywhere;
+  padding: 12px !important;
+  text-align: left !important;
+  white-space: pre-wrap !important;
+  width: 100%;
+}
+
+button.example-card:hover,
+.quiet-button:hover {
+  border-color: var(--ov-amber) !important;
+  color: var(--ov-amber-bright) !important;
+}
+
+.archive-empty,
+.objectverse-placeholder,
+.archive-error {
+  border: 1px dashed rgba(214, 165, 82, 0.3);
+  border-radius: 8px;
+  color: var(--ov-muted) !important;
   line-height: 1.55;
-  margin: 18px 0;
-  padding-left: 14px;
+  padding: 18px;
 }
 
-.card-tags {
+.archive-empty h3,
+.objectverse-placeholder strong,
+.archive-error strong {
+  color: var(--ov-text) !important;
+  display: block;
+  font-size: 20px;
+  margin: 8px 0;
+}
+
+.archive-empty.compact,
+.trace-card {
+  padding: 14px;
+}
+
+.archive-label,
+.objectverse-placeholder span,
+.archive-error span {
+  color: var(--ov-amber-bright) !important;
+  display: block;
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.archive-error {
+  border-color: rgba(185, 111, 85, 0.72);
+}
+
+.archive-error span,
+.archive-error strong {
+  color: #f3a184 !important;
+}
+
+.archive-empty p,
+.objectverse-placeholder p,
+.archive-error p {
+  color: var(--ov-muted) !important;
+}
+
+.object-file-card,
+.trace-card {
+  background: rgba(18, 16, 13, 0.52);
+  border: 1px solid rgba(214, 165, 82, 0.24);
+  border-radius: 8px;
+  padding: 18px;
+}
+
+.file-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
+  margin-bottom: 12px;
 }
 
+.file-meta span,
+.file-tags span,
 .card-tags span {
-  border: 1px solid rgba(246, 211, 139, 0.32);
-  color: #f6d38b;
-  padding: 5px 8px;
+  border: 1px solid rgba(214, 165, 82, 0.28);
+  border-radius: 999px;
+  color: var(--ov-amber-bright);
+  display: inline-flex;
+  font-size: 12px;
+  line-height: 1;
+  padding: 7px 9px;
+}
+
+.object-file-card h3 {
+  color: var(--ov-text);
+  font-size: 28px;
+  line-height: 1.12;
+  margin: 0 0 8px;
+}
+
+.object-name {
+  color: var(--ov-muted);
+  margin: 0 0 16px;
+}
+
+.object-file-card dl {
+  display: grid;
+  gap: 10px;
+  margin: 0 0 16px;
 }
 
-.objectverse-placeholder {
-  border: 1px dashed rgba(246, 211, 139, 0.28);
-  color: #cdb894;
+.object-file-card dl > div {
+  border-top: 1px solid rgba(214, 165, 82, 0.14);
+  padding-top: 10px;
+}
+
+.object-file-card dt {
+  color: var(--ov-faint);
+  font-size: 12px;
+  margin-bottom: 3px;
+  text-transform: uppercase;
+}
+
+.object-file-card dd {
+  color: var(--ov-text);
+  line-height: 1.45;
+  margin: 0;
+}
+
+.feature-list {
+  border: 1px solid rgba(159, 179, 122, 0.25);
+  border-radius: 7px;
+  margin-bottom: 16px;
+  padding: 12px 14px;
+}
+
+.feature-list strong {
+  color: var(--ov-green);
+}
+
+.feature-list ul {
+  color: var(--ov-muted);
+  margin: 8px 0 0;
+  padding-left: 18px;
+}
+
+.complaint {
+  border-left: 3px solid var(--ov-red);
+  color: var(--ov-text);
+  font-style: italic;
   line-height: 1.55;
-  padding: 18px;
+  margin: 0 0 14px;
+  padding-left: 12px;
+}
+
+.file-tags,
+.card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
 #diary-output,
 #diary-output * {
-  color: #d8c7ad !important;
+  color: var(--ov-muted) !important;
+}
+
+#diary-output {
+  background: rgba(18, 16, 13, 0.5);
+  border: 1px solid rgba(214, 165, 82, 0.22);
+  border-radius: 8px;
+  min-height: 320px;
+  padding: 18px !important;
 }
 
 #diary-output h1,
 #diary-output h2,
 #diary-output h3 {
-  color: #f6d38b !important;
+  color: var(--ov-amber-bright) !important;
+}
+
+#diary-output p {
+  font-size: 16px;
+  line-height: 1.7;
 }
 
-#object-examples table {
-  border-collapse: collapse;
-  table-layout: fixed;
+.objectverse-card {
+  background:
+    linear-gradient(180deg, rgba(255, 245, 218, 0.06), rgba(34, 24, 14, 0.1)),
+    #241b12;
+  border: 1px solid rgba(240, 189, 98, 0.58);
+  border-radius: 8px;
+  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45);
+  color: var(--ov-text);
+  max-width: 560px;
+  padding: 24px;
   width: 100%;
 }
 
-#object-examples th {
-  background: #211912 !important;
-  color: #f6d38b !important;
-  overflow-wrap: anywhere;
-  white-space: normal !important;
+.card-header {
+  align-items: flex-start;
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
 }
 
-#object-examples td {
-  background: #fffaf0 !important;
-  color: #211912 !important;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
-  white-space: normal !important;
+.objectverse-card h2 {
+  color: var(--ov-text);
+  font-size: 32px;
+  line-height: 1.08;
+  margin: 8px 0;
 }
 
-#object-examples button {
-  height: auto !important;
-  min-height: 36px;
+.card-kicker,
+.card-object,
+.card-cn {
+  color: var(--ov-muted);
+  letter-spacing: 0;
+}
+
+.card-kicker {
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.card-stamp {
+  border: 1px solid rgba(217, 154, 53, 0.42);
+  border-radius: 50%;
+  color: var(--ov-amber-bright);
+  flex: 0 0 auto;
+  font-size: 11px;
+  height: 64px;
+  padding-top: 24px;
+  text-align: center;
+  width: 64px;
+}
+
+.card-quote {
+  border-left: 3px solid var(--ov-amber);
+  color: var(--ov-text);
+  font-size: 18px;
+  line-height: 1.62;
+  margin: 20px 0 14px;
+  padding-left: 14px;
+}
+
+.card-cn {
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 0 0 18px;
+}
+
+.trace-card strong {
+  color: var(--ov-text);
+  display: block;
+  margin: 8px 0;
   overflow-wrap: anywhere;
-  text-align: left;
-  white-space: normal !important;
 }
 
-@media (max-width: 640px) {
-  .gradio-container *,
-  .gradio-container *::before,
-  .gradio-container *::after {
-    box-sizing: border-box;
-    max-width: 100%;
-    min-width: 0;
+.trace-card p {
+  color: var(--ov-muted);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.gradio-container .json-holder,
+.gradio-container pre {
+  max-width: 100%;
+  overflow: auto !important;
+}
+
+@media (max-width: 980px) {
+  gradio-app,
+  .gradio-container,
+  .gradio-container .main,
+  .gradio-container .contain {
+    margin: 0 !important;
+    max-width: 100vw !important;
+    overflow-x: hidden !important;
+    width: 100vw !important;
   }
 
   .gradio-container {
-    padding-left: 12px !important;
-    padding-right: 12px !important;
-    width: 100vw !important;
+    padding: 14px !important;
+  }
+
+  .gradio-container > main,
+  .gradio-container > main > .wrap,
+  .gradio-container > main > .wrap > .contain {
+    max-width: 100% !important;
+    overflow-x: hidden !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    width: 100% !important;
   }
 
   #objectverse-hero {
-    box-sizing: border-box;
-    padding: 18px;
-    width: 100%;
+    grid-template-columns: 1fr;
+    max-width: calc(100vw - 28px);
+    width: calc(100vw - 28px);
+  }
+
+  #archive-main-grid,
+  #archive-bottom-grid {
+    max-width: calc(100vw - 28px);
+    width: calc(100vw - 28px);
+  }
+
+  .hero-mark {
+    height: 68px;
+    width: 68px;
   }
 
   #objectverse-hero h1 {
-    font-size: 28px;
+    font-size: 32px;
     overflow-wrap: anywhere;
   }
 
-  #objectverse-hero p {
-    font-size: 14px;
-    overflow-wrap: anywhere;
-    white-space: normal;
+  .hero-badges {
+    justify-content: flex-start;
+  }
+
+  .hero-badges span {
+    flex: 1 1 100%;
+    text-align: center;
+  }
+
+  #archive-main-grid,
+  #archive-bottom-grid,
+  .gradio-container .gr-row {
+    flex-direction: column !important;
+    gap: 14px !important;
   }
 
   .archive-panel {
-    box-sizing: border-box;
-    padding: 12px;
-    width: 100%;
+    padding: 14px;
+    width: 100% !important;
+  }
+
+  #personality-mode label,
+  .mode-switch label {
+    flex-basis: 120px;
+  }
+
+  .example-section-title {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  #diary-output {
+    min-height: 240px;
+  }
+
+  .objectverse-card {
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 430px) {
+  .gradio-container {
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+  }
+
+  #objectverse-hero,
+  .archive-panel {
+    border-radius: 7px;
+  }
+
+  .panel-header h2 {
+    font-size: 17px;
+  }
+
+  .panel-header {
+    gap: 9px;
+  }
+
+  #personality-mode label,
+  .mode-switch label {
+    flex-basis: 100%;
+  }
+
+  .object-file-card h3,
+  .objectverse-card h2 {
+    font-size: 25px;
+  }
+
+  .card-header {
+    flex-direction: column;
+  }
+
+  .card-stamp {
+    border-radius: 999px;
+    height: auto;
+    padding: 7px 10px;
+    width: auto;
   }
 }