Add CSS editor banner and update Avalon member count

- Bump Avalon member count to 885
- Add looping, muted video banner linking to the new Janitor profile CSS editor
- Desktop: show the Avalon and CSS banners side by side
- Mobile: show them in a carousel (random start, 8s auto-advance, arrows/dots)
- Paint video frames to a canvas so browsers like Opera GX don't overlay
  pop-out controls on the banner

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/app/page.tsx

@@ -32,6 +32,8 @@ import {
   DropdownMenuItem,
 } from "@/components/ui/dropdown-menu";
 import { DiscordBannerPermanent } from "@/components/ui/discord-banner-permanent";
+import { CssEditorBanner } from "@/components/ui/css-editor-banner";
+import { BannerCarousel } from "@/components/ui/banner-carousel";
 import Script from "next/script";
 
 interface CardDataV2 {
@@ -447,12 +449,35 @@ export default function Home() {
 
         {/* Discord Banner - Disabled if NEXT_PUBLIC_DISABLE_DISCORD_BANNER is set */}
         {process.env.NEXT_PUBLIC_DISABLE_DISCORD_BANNER !== "true" && (
-          <DiscordBannerPermanent
-            inviteLink="https://discord.gg/5jQKkCfHP3"
-            serverName="Avalon"
-            description="Avalon is an enchanted creative haven for a growing collective of botmakers and users—part workshop, part myth, part digital forest where strange and beautiful ideas come to life. Enter our little woodland here:"
-            ctaText="Join Server"
-          />
+          <>
+            {/* Desktop: banners side by side */}
+            <div className="hidden md:flex gap-4 mb-4 items-stretch">
+              <DiscordBannerPermanent
+                inviteLink="https://discord.gg/5jQKkCfHP3"
+                serverName="Avalon"
+                description="Avalon is an enchanted creative haven for a growing collective of botmakers and users—part workshop, part myth, part digital forest where strange and beautiful ideas come to life. Enter our little woodland here:"
+                ctaText="Join Server"
+                className="flex-1 min-w-0"
+              />
+              <CssEditorBanner className="flex-shrink-0 aspect-[16/10] w-[300px] lg:w-[360px] xl:w-[400px]" />
+            </div>
+
+            {/* Mobile: carousel */}
+            <BannerCarousel
+              className="md:hidden mb-4"
+              slides={[
+                <DiscordBannerPermanent
+                  key="avalon"
+                  inviteLink="https://discord.gg/5jQKkCfHP3"
+                  serverName="Avalon"
+                  description="Avalon is an enchanted creative haven for a growing collective of botmakers and users—part workshop, part myth, part digital forest where strange and beautiful ideas come to life. Enter our little woodland here:"
+                  ctaText="Join Server"
+                  className="h-full"
+                />,
+                <CssEditorBanner key="css" className="h-full" fit="contain" />,
+              ]}
+            />
+          </>
         )}
 
         <div className="max-w-3xl mx-auto space-y-6">