docs: add Tutorials button to landing page; fix foreground alpha docs; tutorials in Pages

index.html: add Tutorials big button alongside Get Started/Examples.

MARKUP_SYNTAX.md: document #RRGGBBAA hex format for foreground alpha.

GRADIENTS.md: correct alpha compositing description — foreground now
blends against resolved background (Porter-Duff "over"), not as-is.

docfx.json: include tutorials/**.md so tutorial pages build to the site.

toc.yml: add Tutorials entry to the docfx navigation bar.

Author: nickprotop

docs/GRADIENTS.md

@@ -172,17 +172,30 @@ fill.
 
 ### Alpha Compositing in CharacterBuffer
 
-When a control writes a cell with `Color.Transparent` as the background, `CharacterBuffer`
-resolves the displayed background from whatever was previously written at that position —
-typically the gradient painted by `PreBufferPaint` before controls render.
+`CharacterBuffer` applies Porter-Duff "over" compositing to **both** the background and
+the foreground of every cell written via `SetCell` / `SetNarrowCell`.
 
 ```
-cell written with Transparent bg  →  display_bg = gradient color at that position
-cell foreground                   →  displayed as-is over the composited background
+resolved_bg  =  Color.Blend(new_bg,  existing_bg)
+resolved_fg  =  Color.Blend(new_fg,  resolved_bg)
+```
+
+**Background:** when a control writes `Color.Transparent` as the background, the existing
+background (typically the gradient painted before controls render) shows through unchanged.
+
+**Foreground:** when a control writes a semi-transparent foreground, the glyph is blended
+against the *resolved background* of that cell — not against the previous foreground.
+This is the physically correct model: the background is what sits beneath the glyph, so a
+partially transparent character reveals the background behind it.
+
+```
+new_bg = Transparent  →  resolved_bg = gradient color at that position
+new_fg = cyan @ 50 %  →  resolved_fg = blend(cyan, resolved_bg)   // not blend(cyan, white)
 ```
 
 This means gradient window backgrounds remain visible beneath any control that uses
-`Color.Transparent`, even when that control has opaque foreground characters.
+`Color.Transparent`, and semi-transparent foreground characters (including `█` full-block
+characters) blend smoothly into the gradient rather than fading toward white.
 
 ```csharp
 // Window with a blue→black vertical gradient

docs/MARKUP_SYNTAX.md

@@ -139,14 +139,19 @@ SharpConsoleUI includes a native markup parser that uses Spectre-compatible `[ta
 ```
 [#RRGGBB]text[/]
 [#RGB]text[/]
+[#RRGGBBAA]text[/]
 ```
 
 ```csharp
 "[#FF8000]Orange text[/]"
 "[#F80]Short hex orange[/]"
 "[#336699]Steel blue text[/]"
+"[#00DCDC80]Semi-transparent cyan[/]"   // 50 % opacity
+"[#FF000000]Fully transparent red[/]"   // invisible — composites to background
 ```
 
+The 8-digit form (`#RRGGBBAA`) sets the foreground alpha. The character is composited over the resolved background color of that cell using Porter-Duff "over". At `AA=00` the glyph is invisible (background shows through); at `AA=FF` it is fully opaque. This is what powers the fade-to-transparent effect in the Alpha Blending demo — `█` characters drawn with decreasing alpha dissolve smoothly into whatever gradient is underneath.
+
 ### RGB Colors
 
 ```

docs/docfx/docfx.json

@@ -22,7 +22,7 @@
       },
       {
         "src": "../",
-        "files": ["*.md", "controls/**.md"],
+        "files": ["*.md", "controls/**.md", "tutorials/**.md"],
         "exclude": ["**/obj/**", "**/bin/**", "docfx/**"]
       }
     ],

docs/docfx/toc.yml

@@ -1,5 +1,7 @@
 - name: Why SharpConsoleUI?
   href: COMPARISON.html
+- name: Tutorials
+  href: tutorials/README.html
 - name: API Reference
   href: api/
   homepage: api/SharpConsoleUI.html

docs/index.html

@@ -220,6 +220,7 @@ <h1>SharpConsoleUI</h1>
 
             <div class="quick-links">
                 <a href="docfx/_site/BUILDERS.html" class="btn btn-primary">Get Started</a>
+                <a href="docfx/_site/tutorials/README.html" class="btn btn-primary">Tutorials</a>
                 <a href="docfx/_site/EXAMPLES.html" class="btn btn-primary">Examples</a>
                 <a href="docfx/_site/COMPARISON.html" class="btn btn-primary">Why SharpConsoleUI?</a>
                 <a href="docfx/_site/api/SharpConsoleUI.html" class="btn btn-secondary">API Reference</a>