Add Tampio hello world example, syntax.css, and update README

README.md

@@ -12,12 +12,20 @@ The easiest way to try Tampio, no manual `libvoikko` setup required:
 docker compose run --rm tampio
 ```
 
-This drops you into a shell with `tampio` available. Run any example:
+This drops you into a shell with `tampio` available. Compile an example to HTML:
 
 ```sh
-tampio examples/basics/hello.tampio
+tampio -i -p examples/basics/hello.itp > examples/basics/hello.html
 ```
 
+Then serve it locally and open it in your browser:
+
+```sh
+python3 -m http.server 9994 --directory examples/basics
+```
+
+Go to `http://localhost:9994/hello.html`.
+
 ## What is Tampio?
 
 Tampio programs read like Finnish sentences. Methods are defined using grammatical cases, so the language's syntax is shaped by natural-language morphology rather than punctuation.

examples/basics/hello.itp

@@ -0,0 +1,10 @@
+# Hei maailma! — Hello World in Tampio
+#
+# "Kun nykyinen sivu avautuu" = "When the current page opens"
+# This is Tampio's page-load event hook — the entry point of every program.
+#
+# "teksti" wraps a string literal.
+# "näytetään käyttäjälle" = "is shown to the user" (triggers a browser alert)
+
+Kun nykyinen sivu avautuu,
+	teksti "Hei maailma!" näytetään käyttäjälle.

examples/basics/syntax.css

@@ -0,0 +1,83 @@
+/*
+ * Tampio Syntax Highlighting — Typography & Styling
+ *
+ * This stylesheet defines the visual presentation of Tampio source code.
+ */
+
+/* ===== TYPE STYLES ===== */
+span.type {
+	font-variant: small-caps;
+	font-size: large;
+}
+
+/* ===== KEYWORDS ===== */
+span.keyword {
+	font-weight: bold;
+}
+
+/* ===== VARIABLES & FIELDS ===== */
+span.field {
+	text-decoration: underline dotted;
+}
+
+span.variable {
+	font-variant: small-caps;
+	font-size: large;
+}
+
+span.variable-or-field {
+	text-decoration: underline dotted;
+	font-variant: small-caps;
+	font-size: large;
+}
+
+/* ===== FUNCTIONS ===== */
+span.function {
+	font-style: italic;
+}
+
+/* ===== OPERATORS ===== */
+span.operator {
+	text-decoration: underline dotted;
+	font-weight: bold;
+}
+
+span.conditional-operator {
+	text-decoration: underline dotted;
+	color: #622;
+}
+
+/* ===== LITERALS ===== */
+span.literal {
+	color: #622;
+}
+
+/* ===== COMMENTS ===== */
+span.comment-inline, span.block-comment-inline {
+	color: #226;
+	font-size: small;
+}
+
+span.comment-global {
+	color: black;
+	font-size: 1.5em;
+	border-bottom: 1px solid black;
+}
+
+span.block-comment-global {
+	color: #226;
+}
+
+/* ===== LIST STYLES ===== */
+ul:not(.syntax-root) {
+	list-style: disc;
+}
+
+ul.syntax-root > li {
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+
+ul.syntax-root {
+	list-style: none;
+}