> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://documentation.celestory.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# When nothing works, and nothing tells you why

# 🔇 When nothing works, and nothing tells you why

This is probably the most useful article in this documentation. It's not about one specific block: it catalogues defects that produce **no error message at all**. The graph compiles, the validator is green, you test it... and the render is wrong. No red cross to follow, no log line to read — just a missing background, invisible text, or a story that never starts.

Every row in the table below was checked directly against the app's actual behavior, not just observed once.

---

## 🗂️ The cheat sheet

| Symptom | Cause | What to do |
|---|---|---|
| The background doesn't show, and **no network request** ever goes out to fetch the image | The block used is the legacy **Stage** block — not **Background**. Its input expects a scene already saved under the module's **Stages** tab, not an image. Wiring an image into it is accepted without any error, but nothing ever loads. | Always use the chain **Load image → Background image → Background**. **Stage** is a legacy block with no entry in this documentation: avoid it for a background, unless you know exactly what you're doing with the Stages tab. |
| The background is there, but **stretches horizontally** | The **cover** setting on the background image doesn't cover the frame the way its name promises: it stretches the image widthwise only, ignoring its proportions. | Fix it with a **CSS** block that actually covers the background without stretching it (see *Formatting without writing CSS*). |
| Lines of dialogue render in **serif**, while the rest of the app is sans-serif | The font name picked is the generic entry at the top of the list ("sans-serif", "serif"). For certain elements — dialogue in particular — that name always gets wrapped in quotes in the final style: a generic keyword in quotes means nothing to the browser anymore, so it falls back to its default serif. | Pick an actual font name from the list (Nunito, Arial…), never the generic entry at the top. |
| Lines of dialogue are **invisible** | A character's text style defaults to `#efefef` — an off-white meant for a dark background. On a light bubble, the text blends right into it. | Open the character's text style and set a color that contrasts with the bubble. |
| **The story never starts**, the debugger stays stuck on one block | The **Play music** block only opens the next step once the sound has actually started playing. A sound loaded from an external URL can simply never start (unsupported format, missing headers…): the block then waits forever, without ever raising an error or releasing the flow. | For a music track, upload the file into the project instead of pointing at an external URL. |
| A **variable threshold** behaves erratically | Inside an **Expression** block, every name used in the formula automatically creates a matching input on the block — but that input isn't wired to **anything**. As long as it's left dangling, the expression runs with a default value instead of your variable. | After writing or editing an expression, check every input it created and wire the right variable into it. |
| A **fix changes nothing** in the game, even after testing | A block's code editor (CSS, HTML5…) only saves your text once it **loses focus** — a click elsewhere, or closing the window. Until then, the change only shows on screen; it's never actually committed to the graph. | Always click outside the editor (or close the block's window) before testing. Also check that a second tab open on the same project isn't playing the older, server-saved version instead. |
| You write **ten lines of CSS** for something that already existed | The setting is already one of the 90 fields under **App style** / **Block style** — background color, margins, text style, border image… | Before opening the CSS block, look in App style and Block style first. See *Formatting without writing CSS*. |
| A **variable referenced in a text** shows up literally, braces and all | The name between the double curly braces contains an accent, e.g. `{{Café}}`. Only unaccented letters, digits and the underscore are recognized: the accent breaks detection **silently**, and no input is created to receive the variable. | Write the variable name without accents inside the braces (`{{Cafe}}`); keep accents for the rest of the sentence. See *Injecting a variable into text: double curly braces*. |
| An **image-based character** added to the screen in a Visual Novel module **never appears** | The block that adds or brings in the character expects a specific **mood** to be given. Without a mood chosen, no image is ever applied: the character is technically on stage, but nothing makes it visible. | Always pick a mood when adding or bringing in a character. |

---

## 🧭 The rule that sums it all up

**The validator tells you the graph compiles — not that the story looks right.**

Open **Play test** after every visual change, and actually look at the render — not just the green light next to the validate button. That's the only place that will tell you the truth about these ten failures.

---

→ Next step: go back to your last published module, open it in **Play test**, and compare it line by line against this table — even the backgrounds and lines you already think are correct.