<svg xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844" role="img" aria-label="Arcane Dark — Onboarding screen">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#0F0D17"/><stop offset="100%" stop-color="#1A162B"/></linearGradient>
    <linearGradient id="violet" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#8B5CF6"/><stop offset="100%" stop-color="#6D28D9"/></linearGradient>
  </defs>
  <rect width="390" height="844" rx="0" fill="url(#bg)"/>
  <!-- status -->
  <rect x="0" y="0" width="390" height="44" fill="#0F0D17"/>
  <text x="24" y="28" font-family="Manrope, Arial" font-size="13" font-weight="700" fill="#7C7892">9:41</text>
  <g fill="#F5F3FF" opacity="0.9"><rect x="312" y="14" width="24" height="12" rx="3" stroke="#F5F3FF" fill="none"/><rect x="314" y="16" width="14" height="8" rx="1" fill="#F5F3FF"/><rect x="338" y="17" width="2" height="6" rx="1" fill="#7C7892"/></g>
  <!-- top bar -->
  <g>
    <rect x="16" y="54" width="36" height="36" rx="10" fill="rgba(139,92,246,0.15)" stroke="rgba(139,92,246,0.25)"/>
    <text x="34" y="77" text-anchor="middle" font-family="Arial" font-size="16" fill="#8B5CF6">✦</text>
    <text x="62" y="68" font-family="Playfair Display, serif" font-size="11" font-weight="800" fill="#C9A227" letter-spacing="2">ARCANE DARK</text>
    <text x="62" y="82" font-family="Manrope, Arial" font-size="10" fill="#7C7892">AI DUNGEON MASTER</text>
    <rect x="308" y="58" width="58" height="28" rx="999" fill="none" stroke="#2E2A44"/>
    <text x="337" y="76" text-anchor="middle" font-family="Manrope, Arial" font-size="11" font-weight="700" fill="#7C7892">Skip</text>
  </g>
  <!-- title -->
  <text x="20" y="128" font-family="Playfair Display, serif" font-size="28" font-weight="900" fill="white">Your AI Dungeon Master</text>
  <text x="20" y="158" font-family="Playfair Display, serif" font-size="28" font-weight="900" fill="white">awaits.</text>
  <text x="20" y="184" font-family="Manrope, Arial" font-size="12.5" fill="#B8B2D0">This app runs a powerful story engine</text>
  <text x="20" y="200" font-family="Manrope, Arial" font-size="12.5" fill="#B8B2D0">directly on your device — no cloud,</text>
  <text x="20" y="216" font-family="Manrope, Arial" font-size="12.5" fill="#B8B2D0">no subscription, works in airplane</text>
  <text x="20" y="232" font-family="Manrope, Arial" font-size="12.5" fill="#B8B2D0">mode after a one-time download.</text>

  <!-- card -->
  <rect x="20" y="252" width="350" height="210" rx="16" fill="#1E1B2E" stroke="#2E2A44"/>
  <rect x="36" y="272" width="32" height="32" rx="8" fill="rgba(201,162,39,0.12)" stroke="rgba(201,162,39,0.22)"/>
  <text x="52" y="292" text-anchor="middle" font-size="14" fill="#C9A227">⬢</text>
  <text x="76" y="282" font-family="Manrope, Arial" font-size="12" font-weight="800" fill="white">Gemma 4 E2B  •  ~2.6 GB  •  One-time</text>
  <text x="76" y="298" font-family="Manrope, Arial" font-size="11" fill="#B8B2D0">Private app storage • Wi-Fi confirmation</text>
  <text x="36" y="326" font-family="Manrope, Arial" font-size="11" fill="#7C7892">Stored in private app storage. LiteRT-LM runs</text>
  <text x="36" y="340" font-family="Manrope, Arial" font-size="11" fill="#7C7892">it locally — no story text ever leaves your</text>
  <text x="36" y="354" font-family="Manrope, Arial" font-size="11" fill="#7C7892">device in solo mode.</text>
  <!-- progress -->
  <rect x="36" y="376" width="318" height="6" rx="999" fill="#24203A"/>
  <rect x="36" y="376" width="142" height="6" rx="999" fill="#8B5CF6"/>
  <text x="36" y="398" font-family="Manrope, Arial" font-size="10" fill="#7C7892">42%  •  Downloading…</text>
  <text x="354" y="398" text-anchor="end" font-family="Manrope, Arial" font-size="10" fill="#7C7892">Wi-Fi recommended</text>
  <rect x="36" y="410" width="318" height="36" rx="10" fill="rgba(176,38,58,0.10)" stroke="rgba(176,38,58,0.18)"/>
  <text x="52" y="432" font-family="Manrope, Arial" font-size="11" fill="#B0263A">⚠  Paused — will resume on Wi-Fi</text>

  <!-- bottom -->
  <rect x="20" y="730" width="350" height="52" rx="14" fill="url(#violet)"/>
  <text x="195" y="762" text-anchor="middle" font-family="Manrope, Arial" font-size="13" font-weight="800" fill="white" letter-spacing="0.6">Download &amp; Continue  →</text>
  <rect x="20" y="792" width="350" height="40" rx="12" fill="none" stroke="#2E2A44"/>
  <text x="195" y="816" text-anchor="middle" font-family="Manrope, Arial" font-size="11" font-weight="700" fill="#B8B2D0">Continue without download (demo)</text>

  <!-- home indicator -->
  <rect x="135" y="832" width="120" height="5" rx="999" fill="white" opacity="0.9"/>
</svg>