"me-web?" 0.8.0: a first screen that says what's in it for you

- The first screen now starts from what a home connection could do for you: a drawing of your home's internet box with the things it could host circling it (family photos, a website, reaching home from outside, a game server, a blog, mail), the question in plain words, why it matters, and one button, "Check this connection".
- Below it, the six things the check answers, and a promise: nothing on your network changes without asking you first, and the results stay on your device unless you share them.
- The codes for installing the app on another device are folded away at the bottom; open them when you need them.
- While the check runs, the offer to share your findings already waits at the end of the page, getting them ready, and becomes a button as soon as they are complete.
- Long button labels and the translation notice no longer run off narrow screens.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012CzABvBkbcFqoHdmi8b9WB

src/MeWeb.App/Resources/Colors.axaml

@@ -16,6 +16,8 @@
   <Color x:Key="CautionTint">#2EF2C14E</Color>
   <Color x:Key="BadTint">#33F06B79</Color>
   <Color x:Key="NeutralTint">#33B3A6B2</Color>
+  <Color x:Key="BrandRedGlow">#55E04A55</Color>
+  <Color x:Key="BrandRedClear">#00E04A55</Color>
   <Color x:Key="Scrim">#E6140F15</Color>
 
   <SolidColorBrush x:Key="BrandRedBrush" Color="{StaticResource BrandRed}" />

src/MeWeb.App/Resources/Styles.axaml

@@ -45,6 +45,10 @@
     <Setter Property="CornerRadius" Value="28" />
     <Setter Property="HorizontalAlignment" Value="Center" />
   </Style>
+  <Style Selector="Button.primary /template/ ContentPresenter">
+    <Setter Property="TextWrapping" Value="Wrap" />
+    <Setter Property="TextAlignment" Value="Center" />
+  </Style>
   <Style Selector="Button.primary:pointerover /template/ ContentPresenter">
     <Setter Property="Background" Value="{StaticResource BrandRedLightBrush}" />
     <Setter Property="Foreground" Value="{StaticResource GroundBrush}" />
@@ -473,6 +477,67 @@
     <Setter Property="Width" Value="170" />
     <Setter Property="Height" Value="170" />
   </Style>
+  <Style Selector="Ellipse.glow">
+    <Setter Property="Fill">
+      <RadialGradientBrush>
+        <GradientStop Offset="0" Color="{StaticResource BrandRedGlow}" />
+        <GradientStop Offset="1" Color="{StaticResource BrandRedClear}" />
+      </RadialGradientBrush>
+    </Setter>
+  </Style>
+  <Style Selector="Ellipse.orbit">
+    <Setter Property="Stroke" Value="{StaticResource BrandRedLightBrush}" />
+    <Setter Property="StrokeThickness" Value="1.5" />
+    <Setter Property="StrokeDashArray" Value="2,4" />
+    <Setter Property="Opacity" Value="0.55" />
+  </Style>
+  <Style Selector="Ellipse.home">
+    <Setter Property="Fill" Value="{StaticResource SurfaceRaisedBrush}" />
+    <Setter Property="Stroke" Value="{StaticResource BrandRedBrush}" />
+    <Setter Property="StrokeThickness" Value="2.5" />
+  </Style>
+  <Style Selector="Border.moon">
+    <Setter Property="Width" Value="48" />
+    <Setter Property="Height" Value="48" />
+    <Setter Property="CornerRadius" Value="24" />
+    <Setter Property="Background" Value="{StaticResource SurfaceRaisedBrush}" />
+    <Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
+    <Setter Property="BorderThickness" Value="1.5" />
+    <Setter Property="RenderTransformOrigin" Value="50%,50%" />
+  </Style>
+  <Style Selector="Border.statusChip">
+    <Setter Property="Background" Value="{StaticResource SurfaceRaisedBrush}" />
+    <Setter Property="CornerRadius" Value="14" />
+    <Setter Property="Padding" Value="12,6" />
+  </Style>
+  <Style Selector="TextBlock.chip">
+    <Setter Property="FontSize" Value="14" />
+    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+  </Style>
+  <Style Selector="TextBlock.hero">
+    <Setter Property="FontSize" Value="26" />
+    <Setter Property="FontWeight" Value="Bold" />
+    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
+    <Setter Property="TextAlignment" Value="Center" />
+    <Setter Property="TextWrapping" Value="Wrap" />
+  </Style>
+  <Style Selector="Border.useChip">
+    <Setter Property="Background" Value="{StaticResource SurfaceBrush}" />
+    <Setter Property="CornerRadius" Value="12" />
+    <Setter Property="Padding" Value="10,8" />
+    <Setter Property="Width" Value="168" />
+  </Style>
+  <Style Selector="Border.useChip TextBlock">
+    <Setter Property="FontSize" Value="14" />
+    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
+    <Setter Property="TextWrapping" Value="Wrap" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+    <Setter Property="Margin" Value="10,0,0,0" />
+  </Style>
+  <Style Selector="Border.consent.preparing">
+    <Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
+  </Style>
   <Style Selector="TextBox.copyField">
     <Setter Property="FontSize" Value="13" />
     <Setter Property="TextWrapping" Value="Wrap" />