Derive theme gradients and add solid paint controls

site/index.html

@@ -80,12 +80,16 @@
       <article>
         <h2>Appearance</h2>
         <p>
-          Choose your theme, wallpaper, colors, and motion. Change settings
-          through the app or a KDL config, with live reload.
+          Choose your theme, wallpaper, and colors through Settings or a KDL config, and see changes as you make them.
         </p>
         <a href="docs/configuration.html#appearance">Customize Ferese →</a>
       </article>
     </section>
+    <section class="product-motion page-width" aria-labelledby="continuum-heading">
+      <h2 id="continuum-heading">Continuum motion</h2>
+      <p>Continuum carries your gesture’s momentum into workspace transitions and keeps motion continuous when you change direction. Adjust spring response and speed to your taste, or enable reduced motion.</p>
+      <a href="docs/animation-model.html">Explore the animation model →</a>
+    </section>
     <section class="product-getting-started page-width">
       <h2>Getting started</h2>
       <p>

site/styles.css

@@ -1078,6 +1078,7 @@ kbd {
   padding-block: 40px;
 }
 .product-features h2,
+.product-motion h2,
 .product-getting-started h2 {
   font-size: 20px;
   font-weight: 600;
@@ -1085,18 +1086,21 @@ kbd {
   line-height: 1.4;
 }
 .product-features p,
+.product-motion p,
 .product-getting-started p {
   font-size: 14px;
   color: var(--muted);
   margin-top: 12px;
   line-height: 1.8;
 }
-.product-features a {
+.product-features a,
+.product-motion a {
   display: inline-block;
   font-size: 12px;
   color: var(--blue);
   margin-top: 12px;
 }
+.product-motion,
 .product-getting-started {
   border-top: 1px solid var(--line);
   padding-block: 28px 42px;