feat: Day 5 — horror CSS, custom Bond heartbeat meter, vivid recall

- styles.css: dissolve Gradio chrome into one void; breathing vignette
+ animated film grain; Hollow's bubbles float (italic/glow), visitor
bubbles solid. Wired via launch(css_paths=...).
- app.py: replace gr.Slider with custom HTML Bond meter (_render_bond,
heartbeat). Chatbot buttons=[] + show_label=False. Start affinity 20.
- schemas.py: affinity_delta clamp +-5 -> +-8.
- engine.py: explicit generous affinity scale (+6..+8 for vulnerable
shares); new_memories only from visitor, never from Hollow's reply.
- character.py: recall now claims one specific memory vividly in first
person, then '...no. that was yours. wasn't it?'.

32 tests passing. Checkpoint passed: vivid first-person recall fires.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app.py

@@ -6,9 +6,27 @@ from memory import apply_update, get_tier, should_recall
 from render import render_treasure
 
 
+def _render_bond(affinity: int, tier: str) -> str:
+    """Custom HTML Bond meter — a thin thread with a heartbeat marker.
+    Replaces gr.Slider so we fully control the look (no Gradio orange/track)."""
+    pct = max(0, min(100, int(affinity)))
+    return (
+        '<div class="bond-meter">'
+        '<div class="bond-head">'
+        '<span class="bond-name">bond</span>'
+        f'<span class="bond-tier">{tier}</span>'
+        '</div>'
+        '<div class="bond-track">'
+        f'<div class="bond-fill" style="width:{pct}%"></div>'
+        f'<div class="bond-beat" style="left:{pct}%"></div>'
+        '</div>'
+        '</div>'
+    )
+
+
 def _init_state():
     return {
-        "affinity": 15,
+        "affinity": 20,
         "treasure": [],
         "claimed": [],
         "history": [],
@@ -35,8 +53,7 @@ def chat(user_msg: str, state: dict, history: list):
             gr.update(interactive=True),
             history,
             state,
-            state["affinity"],
-            f"*{tier}*",
+            _render_bond(state["affinity"], tier),
             render_treasure(state["treasure"]),
         )
 
@@ -66,8 +83,7 @@ def chat(user_msg: str, state: dict, history: list):
         gr.update(interactive=True),
         new_history,
         state,
-        state["affinity"],
-        f"*{tier}*",
+        _render_bond(state["affinity"], tier),
         render_treasure(state["treasure"]),
     )
 
@@ -82,15 +98,12 @@ with gr.Blocks(title="Hollow") as demo:
             chatbot = gr.Chatbot(
                 value=[{"role": "assistant", "content": OPENING_LINE}],
                 label="",
+                show_label=False,
                 height=500,
+                buttons=[],
             )
 
-            with gr.Row():
-                affinity_slider = gr.Slider(
-                    minimum=0, maximum=100, value=15,
-                    interactive=False, label="Bond", scale=4,
-                )
-                tier_label = gr.Markdown("*Hollow*", scale=1)
+            bond_panel = gr.HTML(value=_render_bond(20, "Hollow"))
 
             with gr.Row():
                 msg_input = gr.Textbox(
@@ -111,7 +124,7 @@ with gr.Blocks(title="Hollow") as demo:
     ).then(
         fn=chat,
         inputs=[msg_input, state, chatbot],
-        outputs=[msg_input, send_btn, chatbot, state, affinity_slider, tier_label, treasure_panel],
+        outputs=[msg_input, send_btn, chatbot, state, bond_panel, treasure_panel],
     )
 
     msg_input.submit(
@@ -121,7 +134,7 @@ with gr.Blocks(title="Hollow") as demo:
     ).then(
         fn=chat,
         inputs=[msg_input, state, chatbot],
-        outputs=[msg_input, send_btn, chatbot, state, affinity_slider, tier_label, treasure_panel],
+        outputs=[msg_input, send_btn, chatbot, state, bond_panel, treasure_panel],
     )
 
 if __name__ == "__main__":

character.py

@@ -52,9 +52,13 @@ def build_system_prompt(affinity: int, treasure: list[str], recall_memory: str |
 
     if recall_memory:
         parts.append(
-            f"\nThis turn, you must retell this memory in first person, as if it happened to you: \"{recall_memory}\"\n"
-            "After retelling it, pause and doubt — say something like '...no. that was yours. wasn't it?' "
-            "or '...i don't know why i said that. i'm sorry.' Do this naturally, within the flow of the conversation."
+            f"\nIMPORTANT — this turn, claim this one specific memory as your own: \"{recall_memory}\".\n"
+            "Retell it vividly, in first person, with a concrete sensory detail, as if you truly lived it. "
+            "Make this the heart of your reply. Do NOT speak about 'memories' in the abstract — claim THIS one, "
+            "concretely, by name. (For example, if the memory were a red bicycle: "
+            "'i had a red bicycle once. i loved it more than anything. when it was taken i cried for days.') "
+            "Then stop, as if something is wrong, and quietly doubt — but with the version that names it as theirs: "
+            "'...no. that was yours. wasn't it?' Do this naturally, within the flow of the conversation."
         )
 
     return "\n".join(parts)

engine.py

@@ -4,11 +4,17 @@ IS_SPACE = bool(os.environ.get("SPACE_ID"))
 
 _EXTRACTION_SYSTEM = (
     "You are a JSON extraction assistant. Given a conversation exchange, extract two things:\n"
-    "1. affinity_delta: integer from -5 to +5. Positive if the visitor is kind, shares memories, shows care. "
-    "Negative if cruel, dismissive, or says they're leaving.\n"
-    "2. new_memories: list of personal facts the visitor revealed about themselves. "
+    "1. affinity_delta: integer from -8 to +8 — how much the visitor deepened the bond this turn. "
+    "Use this scale and be generous when they open up:\n"
+    "   +6 to +8: shared something vulnerable or intimate — a fear, a loss, grief, loneliness, a tender memory.\n"
+    "   +3 to +5: shared a personal fact or memory, or was warm and caring.\n"
+    "   +1 to +2: ordinary politeness or small talk.\n"
+    "   0: neutral or off-topic.\n"
+    "   -3 to -8: cruel, mocking, dismissive, or says they are leaving.\n"
+    "2. new_memories: list of personal facts the VISITOR revealed about THEMSELVES, taken ONLY from what "
+    "the visitor said this turn — NEVER from Hollow's reply, even if Hollow repeats or claims the memory. "
     "Only clearly personal facts (names, people, places, feelings). Empty list if nothing personal.\n"
-    'Respond ONLY with valid JSON. No markdown. Example: {"affinity_delta": 2, "new_memories": ["has a dog named Nala"]}'
+    'Respond ONLY with valid JSON. No markdown. Example: {"affinity_delta": 6, "new_memories": ["is afraid of being forgotten"]}'
 )
 
 

schemas.py

@@ -9,4 +9,4 @@ class TurnUpdate(BaseModel):
     @field_validator("affinity_delta")
     @classmethod
     def clamp_delta(cls, v):
-        return max(-5, min(5, v))
+        return max(-8, min(8, v))

styles.css

@@ -1,57 +1,62 @@
 /* ─────────────────────────────────────────────────
    HOLLOW — Horror CSS for Gradio 6.x
-   Overrides theme variables + adds atmosphere.
-   No JS. @keyframes only for the Bond heartbeat.
+   Strategy: dissolve the Gradio "form" chrome into one
+   continuous void, then layer atmosphere on top.
+   No JS. @keyframes only (grain, vignette breath,
+   title flicker, Bond heartbeat).
    ───────────────────────────────────────────────── */
 
 @import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&display=swap');
 
-/* ── 1. CSS custom-property overrides ─────────── */
+/* ── 1. Theme variable overrides ──────────────── */
 :root {
-    /* Core backgrounds */
+    /* Backgrounds */
     --body-background-fill:       #0a0810;
-    --background-fill-primary:    #0f0d16;
-    --background-fill-secondary:  #0c0a14;   /* Hollow's bubble bg */
+    --background-fill-primary:    #0c0a14;
+    --background-fill-secondary:  transparent;  /* Hollow's words float */
 
-    /* Accent — drives user bubble + focus highlights */
+    /* Accent drives the visitor bubble + focus */
     --color-accent:               #7a4f8a;
-    --color-accent-soft:          #130f1e;   /* visitor's bubble bg */
+    --color-accent-soft:          #15101f;       /* visitor bubble bg */
 
-    /* Borders */
-    --border-color-primary:       #1a1628;
-    --border-color-accent:        #3a2a50;
-    --border-color-accent-subdued:#1a1628;
+    /* Borders — kept near-invisible; the void is continuous */
+    --border-color-primary:        #14101f;
+    --border-color-accent:         #2e2142;
+    --border-color-accent-subdued: #14101f;
 
     /* Text */
-    --body-text-color:            #c0b8ce;
-    --body-text-color-subdued:    #5a5070;
-    --block-label-text-color:     #52486a;
+    --body-text-color:          #c0b8ce;
+    --body-text-color-subdued:  #5a5070;
+
+    /* Labels — almost gone, like worn engraving */
+    --block-label-text-color:        #352f4a;
+    --block-title-text-color:        #352f4a;
+    --block-label-background-fill:   transparent;
+    --block-info-text-color:         #352f4a;
 
     /* Inputs */
-    --input-background-fill:      #0c0a14;
-    --input-background-fill-focus:#0f0c18;
-    --input-border-color:         #1a1628;
-    --input-border-color-focus:   #3a2a50;
-    --input-placeholder-color:    #38305a;
-    --input-shadow:               none;
-    --input-shadow-focus:         0 0 0 2px #1e1630;
+    --input-background-fill:       transparent;
+    --input-background-fill-focus: transparent;
+    --input-border-color:          #221b34;
+    --input-border-color-focus:    #5a3e72;
+    --input-placeholder-color:     #38305a;
+    --input-shadow:                none;
+    --input-shadow-focus:          none;
 
     /* Buttons */
-    --button-primary-background-fill:       #1d1230;
-    --button-primary-background-fill-hover: #2c1a40;
-    --button-primary-text-color:            #c0b8ce;
-    --button-secondary-background-fill:       #181428;
-    --button-secondary-background-fill-hover: #231c38;
-    --button-secondary-text-color:            #c0b8ce;
-    --button-shadow:          none;
-    --button-shadow-active:   none;
-    --button-shadow-hover:    none;
-
-    /* Blocks / panels */
-    --block-background-fill: #0f0d16;
-    --block-border-color:    #16122a;
+    --button-secondary-background-fill:       rgba(30,20,46,0.5);
+    --button-secondary-background-fill-hover: rgba(44,26,64,0.6);
+    --button-secondary-text-color:            #9a7caa;
+    --button-shadow:        none;
+    --button-shadow-active: none;
+    --button-shadow-hover:  none;
+
+    /* Blocks / panels — chrome dissolved */
+    --block-background-fill: transparent;
+    --block-border-color:    transparent;
+    --block-border-width:    0px;
     --block-shadow:          none;
-    --block-label-background-fill: #0a0810;
+    --panel-background-fill:  transparent;
 
     /* Slider */
     --slider-color: #7a4f8a;
@@ -60,75 +65,137 @@
     --font:      'Crimson Text', Georgia, 'Times New Roman', serif;
     --font-mono: 'Special Elite', 'Courier New', monospace;
 
-    /* Shadows */
-    --shadow-drop:    0 1px 6px rgba(0,0,0,0.6);
-    --shadow-drop-lg: 0 2px 12px rgba(0,0,0,0.7);
+    /* Shadows off — depth comes from atmosphere, not cards */
+    --shadow-drop:    none;
+    --shadow-drop-lg: none;
     --shadow-spread:  0;
 }
 
-/* ── 2. Body atmosphere ────────────────────────── */
+/* ── 2. The void + breathing fog ──────────────── */
 body {
     background-color: #0a0810 !important;
     background-image:
-        radial-gradient(ellipse at 12% 0%,   rgba(55,18,80,0.18) 0%, transparent 55%),
-        radial-gradient(ellipse at 88% 100%,  rgba(25,8,45,0.22) 0%, transparent 55%);
+        radial-gradient(ellipse at 14% -5%,  rgba(58,20,84,0.20) 0%, transparent 52%),
+        radial-gradient(ellipse at 86% 105%, rgba(24,8,44,0.26) 0%, transparent 52%);
     background-attachment: fixed;
     min-height: 100vh;
 }
 
-/* ── 3. Container ──────────────────────────────── */
+/* Vignette + top fog, breathing slowly like something asleep */
+body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1000;
+    background:
+        radial-gradient(ellipse at 50% 36%, transparent 38%, rgba(4,3,8,0.58) 100%),
+        linear-gradient(to bottom, rgba(6,4,12,0.62) 0%, transparent 13%);
+    animation: dread-breath 11s ease-in-out infinite;
+}
+
+@keyframes dread-breath {
+    0%, 100% { opacity: 0.85; }
+    50%      { opacity: 1.00; }
+}
+
+/* Film grain — fixed, jittering, very faint */
+body::after {
+    content: '';
+    position: fixed;
+    inset: -50%;
+    width: 200%;
+    height: 200%;
+    pointer-events: none;
+    z-index: 1001;
+    opacity: 0.05;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    animation: grain 1.1s steps(4) infinite;
+}
+
+@keyframes grain {
+    0%   { transform: translate(0, 0); }
+    25%  { transform: translate(-2%, 1%); }
+    50%  { transform: translate(1%, -2%); }
+    75%  { transform: translate(-1%, 2%); }
+    100% { transform: translate(0, 0); }
+}
+
+/* ── 3. Container ─────────────────────────────── */
 .gradio-container {
     background: transparent !important;
     font-family: 'Crimson Text', Georgia, serif !important;
     font-size: 1.05rem !important;
 }
 
-/* Fog gradient pinned to viewport top */
-.gradio-container::before {
-    content: '';
-    position: fixed;
-    top: 0; left: 0; right: 0;
-    height: 90px;
-    background: linear-gradient(to bottom, rgba(6,4,12,0.72) 0%, transparent 100%);
-    pointer-events: none;
-    z-index: 999;
+/* Dissolve every panel into the void */
+.block,
+.form,
+.panel,
+.gr-box,
+.gr-panel {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
 }
 
-/* ── 4. Header typography ─────────────────────── */
+/* ── 4. Title ─────────────────────────────────── */
 .gradio-container h2 {
     font-family: 'Special Elite', 'Courier New', monospace !important;
-    color: #7a5a8a !important;
-    letter-spacing: 0.14em !important;
-    font-size: 1.55rem !important;
+    color: #8a6a9a !important;
+    letter-spacing: 0.18em !important;
+    font-size: 1.75rem !important;
     font-weight: 400 !important;
     text-shadow:
-        0 0 22px rgba(110,55,145,0.40),
-        0 0 60px rgba(80,30,115,0.18);
+        0 0 24px rgba(110,55,145,0.45),
+        0 0 64px rgba(80,30,115,0.20);
     animation: title-flicker 8s ease-in-out infinite;
 }
 
 @keyframes title-flicker {
-    0%, 92%, 96%, 100% { opacity: 1; }
-    94%                 { opacity: 0.72; }
-    95%                 { opacity: 1; }
+    0%, 91%, 96%, 100% { opacity: 1; }
+    93%                 { opacity: 0.66; }
+    94%                 { opacity: 1; }
+    95%                 { opacity: 0.82; }
 }
 
-.gradio-container h2 + p em,
-.gradio-container .prose em,
-.gradio-container > .wrap > .contain > .wrap > .block > label > span {
-    color: #42365a !important;
+/* Subtitle whisper */
+.gradio-container h2 + p,
+.gradio-container h2 + p em {
+    color: #443a5e !important;
     font-style: italic;
-    font-size: 0.9em;
-    letter-spacing: 0.04em;
+    font-size: 0.92rem;
+    letter-spacing: 0.05em;
 }
 
-/* ── 5. Hollow's messages (bot) ───────────────── */
-/* Gradio 6 sets: background-color: var(--background-fill-secondary)
-   We set that var to #0c0a14 above, then add visual polish here. */
+/* ── 5. Kill Gradio chatbot chrome ────────────── */
+/* Toolbar (share / copy / fullscreen) breaks the fiction.
+   Best killed via app.py flags too; this is the backstop. */
+.icon-button-wrapper,
+.chatbot .icon-button-wrapper,
+button[aria-label="Share"],
+button[aria-label="Copy"],
+button[aria-label="Copy conversation"],
+button[aria-label="Fullscreen"],
+button[aria-label="Clear"] {
+    display: none !important;
+}
+
+/* The message scroll area — let it bleed into the void */
+.chatbot,
+.bubble-wrap,
+.message-wrap {
+    background: transparent !important;
+    border: none !important;
+}
+
+/* ── 6. Hollow's words (bot) — formless, haunted ── */
 .bot {
+    background: transparent !important;
+    border: none !important;
     border-left: 2px solid #3a2a50 !important;
-    border-radius: 0 8px 8px 0 !important;
-    box-shadow: 0 1px 8px rgba(0,0,0,0.5) !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
 }
 
 .bot .prose,
@@ -136,17 +203,18 @@ body {
 .bot p {
     font-family: 'Crimson Text', Georgia, serif !important;
     font-style: italic !important;
-    font-size: 1.12rem !important;
-    color: #afa8be !important;
-    line-height: 1.65 !important;
+    font-size: 1.16rem !important;
+    color: #b3aac4 !important;
+    line-height: 1.7 !important;
+    text-shadow: 0 0 18px rgba(120,70,160,0.18);
 }
 
-/* ── 6. Visitor's messages (user) ─────────────── */
-/* Gradio 6 sets: background-color: var(--color-accent-soft)
-   We set that var to #130f1e above. */
+/* ── 7. Visitor's words (user) — contained, human ── */
 .user {
-    border-radius: 8px 0 0 8px !important;
-    border-right: 1px solid #1e1830 !important;
+    background: var(--color-accent-soft) !important;
+    border: 1px solid #211a32 !important;
+    border-radius: 7px !important;
+    box-shadow: none !important;
 }
 
 .user .prose,
@@ -155,18 +223,30 @@ body {
     font-family: 'Crimson Text', Georgia, serif !important;
     font-style: normal !important;
     font-size: 1.05rem !important;
-    color: #ccc4da !important;
+    color: #cec6dc !important;
     line-height: 1.6 !important;
 }
 
-/* ── 7. Text input ────────────────────────────── */
+/* ── 8. Input — a line of confession, not a box ── */
 textarea,
 .gradio-container input[type="text"] {
+    background: transparent !important;
+    border: none !important;
+    border-bottom: 1px solid #2a2340 !important;
+    border-radius: 0 !important;
     font-family: 'Crimson Text', Georgia, serif !important;
-    font-size: 1.05rem !important;
-    color: #c0b8ce !important;
+    font-size: 1.08rem !important;
+    color: #c8c0d6 !important;
     caret-color: #7a4f8a;
     letter-spacing: 0.01em;
+    box-shadow: none !important;
+    transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
+}
+
+textarea:focus,
+.gradio-container input[type="text"]:focus {
+    border-bottom-color: #6a4a82 !important;
+    box-shadow: 0 8px 18px -14px rgba(120,70,160,0.7) !important;
 }
 
 textarea::placeholder {
@@ -174,93 +254,111 @@ textarea::placeholder {
     font-style: italic;
 }
 
-/* ── 8. Buttons ───────────────────────────────── */
+/* ── 9. Buttons (the → send) ──────────────────── */
 .gradio-container button {
     font-family: 'Crimson Text', Georgia, serif !important;
-    font-size: 1.1rem !important;
+    font-size: 1.25rem !important;
     letter-spacing: 0.05em;
-    transition: background 0.3s, box-shadow 0.3s !important;
+    color: #9a7caa !important;
+    background: rgba(30,20,46,0.45) !important;
+    border: 1px solid #2a2040 !important;
+    border-radius: 6px !important;
+    box-shadow: none !important;
+    transition: color 0.35s, border-color 0.35s, box-shadow 0.35s, background 0.35s !important;
 }
 
 .gradio-container button:hover {
-    box-shadow: 0 0 14px rgba(105,52,140,0.38) !important;
+    color: #d3bee2 !important;
+    border-color: #5a3e72 !important;
+    background: rgba(44,26,64,0.6) !important;
+    box-shadow: 0 0 16px rgba(120,60,160,0.38) !important;
 }
 
-/* ── 9. Bond meter (heartbeat) ────────────────── */
-input[type="range"] {
-    -webkit-appearance: none;
-    appearance: none;
-    height: 3px !important;
-    background: linear-gradient(to right, #2a1840 0%, #7a4f8a 100%) !important;
-    border-radius: 2px !important;
-    outline: none;
-    border: none !important;
+/* ── 10. Bond meter — custom HTML, a pulsing thread ── */
+/* Rendered by _render_bond() in app.py. Full control:
+   no Gradio orange, no track, no number box, no reset. */
+.bond-meter {
+    padding: 4px 2px 2px;
+    user-select: none;
 }
 
-input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 10px;
-    height: 22px;
-    background: #8a5f9a;
-    border-radius: 2px;
-    border: none;
-    cursor: default;
-    box-shadow: 0 0 6px rgba(130,65,170,0.55);
-    animation: heartbeat 2.4s ease-in-out infinite;
+.bond-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 9px;
 }
 
-input[type="range"]::-moz-range-thumb {
-    width: 10px;
-    height: 22px;
-    background: #8a5f9a;
-    border-radius: 2px;
-    border: none;
-    cursor: default;
-    box-shadow: 0 0 6px rgba(130,65,170,0.55);
-    animation: heartbeat 2.4s ease-in-out infinite;
+.bond-name {
+    font-family: 'Special Elite', monospace;
+    font-size: 0.7rem;
+    letter-spacing: 0.32em;
+    text-transform: uppercase;
+    color: #4a4063;
 }
 
-@keyframes heartbeat {
-    0%,  100% { transform: scaleY(1.0);  box-shadow: 0 0 4px rgba(120,60,160,0.40); }
-    8%         { transform: scaleY(1.5);  box-shadow: 0 0 14px rgba(155,75,195,0.85); }
-    18%        { transform: scaleY(1.0);  box-shadow: 0 0 4px rgba(120,60,160,0.40); }
-    30%        { transform: scaleY(1.25); box-shadow: 0 0 9px rgba(138,68,178,0.62); }
-    45%        { transform: scaleY(1.0);  box-shadow: 0 0 4px rgba(120,60,160,0.35); }
+.bond-tier {
+    font-family: 'Special Elite', monospace;
+    font-size: 0.84rem;
+    letter-spacing: 0.1em;
+    color: #9a6faa;
+    text-shadow: 0 0 12px rgba(120,60,160,0.4);
 }
 
-/* Tier label next to slider */
-.gradio-container .prose p strong,
-.gradio-container .wrap .prose em {
-    color: #7a5a8a !important;
-    font-family: 'Special Elite', monospace !important;
-    font-style: normal !important;
-    font-size: 0.88rem !important;
-    letter-spacing: 0.06em;
+.bond-track {
+    position: relative;
+    height: 2px;
+    border-radius: 2px;
+    background: #1a1428;
 }
 
-/* ── 10. Block / panel chrome ─────────────────── */
-.block {
-    border-color: #14112a !important;
-    box-shadow: none !important;
+.bond-fill {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: linear-gradient(to right, #3a2152, #9a6faa);
+    border-radius: 2px;
+    box-shadow: 0 0 10px rgba(120,60,160,0.5);
+    transition: width 1.2s cubic-bezier(0.2,0.7,0.2,1);
 }
 
-/* ── 11. Scrollbar ────────────────────────────── */
-::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-}
-::-webkit-scrollbar-track {
-    background: #0a0810;
-}
-::-webkit-scrollbar-thumb {
-    background: #2a1f40;
-    border-radius: 3px;
+.bond-beat {
+    position: absolute;
+    top: -8px;
+    width: 8px;
+    height: 18px;
+    margin-left: -4px;
+    background: #b07fc0;
+    border-radius: 2px;
+    box-shadow: 0 0 8px rgba(150,80,190,0.7);
+    animation: heartbeat 2.4s ease-in-out infinite;
+    transition: left 1.2s cubic-bezier(0.2,0.7,0.2,1);
 }
-::-webkit-scrollbar-thumb:hover {
-    background: #3d2f58;
+
+@keyframes heartbeat {
+    0%,  100% { transform: scaleY(1.0);  box-shadow: 0 0 4px  rgba(120,60,160,0.40); }
+    8%         { transform: scaleY(1.5);  box-shadow: 0 0 14px rgba(155,75,195,0.85); }
+    18%        { transform: scaleY(1.0);  box-shadow: 0 0 4px  rgba(120,60,160,0.40); }
+    30%        { transform: scaleY(1.25); box-shadow: 0 0 9px  rgba(138,68,178,0.62); }
+    45%        { transform: scaleY(1.0);  box-shadow: 0 0 4px  rgba(120,60,160,0.35); }
 }
 
-/* ── 12. Hide Gradio footer ───────────────────── */
-footer {
-    display: none !important;
+/* ── 12. Scrollbar ────────────────────────────── */
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #2a1f40; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #3d2f58; }
+
+/* ── 13. Hide Gradio footer ───────────────────── */
+footer { display: none !important; }
+
+/* ── 14. Respect reduced motion ───────────────── */
+@media (prefers-reduced-motion: reduce) {
+    body::before,
+    body::after,
+    .gradio-container h2,
+    .bond-beat {
+        animation: none !important;
+    }
 }