feat(docs-infra): bookend the tutorials with Angie

The tutorial intro and "next steps" pages were plain headings with no
send-off. Bookend each tutorial with Angie: a greeting pose welcoming
learners on the intro page, and a superhero pose congratulating them on
the completion page, each beside a speech bubble.

The bubble treatment from the 404 page lived inside the not-found
component, so it's extracted into a reusable docs-content style
(docs-tutorial-mascot) usable from tutorial markdown, and applied to the
intro and completion pages of the Learn Angular, Signals, and Signal
Forms tutorials.

adev/shared-docs/styles/docs/_tutorial-mascot.scss

@@ -0,0 +1,52 @@
+@use '../media-queries' as mq;
+
+@mixin docs-tutorial-mascot() {
+  .docs-tutorial-mascot {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+    margin-block: 1.5rem;
+
+    &__angie {
+      flex: none;
+      width: clamp(150px, 18vw, 200px);
+      height: auto;
+      margin: 0;
+    }
+
+    &__bubble {
+      position: relative;
+      flex: 0 1 auto;
+      min-width: 0;
+      max-width: 34ch;
+      margin-block-start: 1rem;
+      margin-inline-start: -0.25rem;
+      padding: 1rem 1.5rem;
+      border-radius: 1.25rem;
+      background: var(--septenary-contrast);
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset-block-start: 1.5rem;
+        inset-inline-start: -0.4rem;
+        width: 1rem;
+        height: 1rem;
+        background: inherit;
+        transform: rotate(45deg);
+      }
+    }
+  }
+
+  @include mq.for-phone-only {
+    .docs-tutorial-mascot {
+      &__angie {
+        width: clamp(104px, 28vw, 140px);
+      }
+
+      &__bubble {
+        padding: 0.75rem 1.25rem;
+      }
+    }
+  }
+}

adev/shared-docs/styles/global-styles.scss

@@ -29,6 +29,7 @@
 @use 'docs/pill';
 @use 'docs/steps';
 @use 'docs/table';
+@use 'docs/tutorial-mascot';
 @use 'docs/video';
 @use 'docs/mermaid';
 
@@ -81,6 +82,7 @@ $theme: mat.m2-define-light-theme(
 @include pill.docs-pill();
 @include steps.docs-steps();
 @include table.docs-table();
+@include tutorial-mascot.docs-tutorial-mascot();
 @include video.docs-video();
 
 // Include custom angular.dev styles

adev/src/content/tutorials/learn-angular/intro/README.md

@@ -1,5 +1,10 @@
 # Welcome to the Angular tutorial
 
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/greeting.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">Welcome! Let's learn the building blocks of Angular.</p>
+</div>
+
 This interactive tutorial will teach you the basic building blocks to start building great apps with Angular.
 
 ## How to use this tutorial

adev/src/content/tutorials/learn-angular/steps/25-next-steps/README.md

@@ -1,5 +1,10 @@
 # Ready to explore more of Angular?
 
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/superhero.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">You've done it! You completed the Learn Angular tutorial and learned the essentials of building apps.</p>
+</div>
+
 You can also learn more in our [guides](overview) and [reference](api), or `ng new`.
 
 <docs-card-container>

adev/src/content/tutorials/signal-forms/intro/README.md

@@ -1,5 +1,10 @@
 # Learn Angular Signal Forms
 
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/greeting.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">Welcome! Let's build forms with signals.</p>
+</div>
+
 This interactive tutorial will teach you how to build reactive forms using Angular's Signal Forms API.
 
 ## How to use this tutorial

adev/src/content/tutorials/signal-forms/steps/6-next-steps/README.md

@@ -1,6 +1,9 @@
 # Congratulations!
 
-You've completed the Signal Forms tutorial and built a complete login form from scratch!
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/superhero.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">You've done it! You completed the Signal Forms tutorial and built a login form from scratch.</p>
+</div>
 
 ## What you learned
 

adev/src/content/tutorials/signals/intro/README.md

@@ -1,5 +1,10 @@
 # Learn Angular signals
 
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/greeting.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">Welcome! Let's explore signals.</p>
+</div>
+
 This interactive tutorial will teach you the fundamentals of Angular signals and how to use them to build reactive applications.
 
 ## How to use this tutorial

adev/src/content/tutorials/signals/steps/11-next-steps/README.md

@@ -1,5 +1,10 @@
 # Want to dive deeper into signals?
 
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/superhero.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">You've done it! You completed the Signals tutorial and learned to manage reactive state with signals.</p>
+</div>
+
 You can also learn more about signals with the following resources:
 
 <docs-card-container>