diff --git a/src/components/LikeButton.tsx b/src/components/LikeButton.tsx
deleted file mode 100644
index 50fd75b51..000000000
--- a/src/components/LikeButton.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import {trpc} from '@/app/_trpc/client'
-import {useViewer} from '@/context/viewer-context'
-import {cn} from '@/ui/utils'
-import {ThumbsUp} from 'lucide-react'
-import {useEffect, useState} from 'react'
-
-interface LikeButtonProps {
-  postId: number
-  className?: string
-}
-
-export function LikeButton({postId, className}: LikeButtonProps) {
-  const utils = trpc.useUtils()
-  const [mounted, setMounted] = useState(false)
-  const [optimisticLiked, setOptimisticLiked] = useState(false)
-  const [optimisticCount, setOptimisticCount] = useState<number | null>(null)
-  const {authenticated, loading: viewerLoading} = useViewer()
-
-  const {
-    data: likeCount,
-    isLoading: countLoading,
-    status: countStatus,
-  } = trpc.likes.getLikesForPost.useQuery({postId})
-  const {
-    data: hasLiked,
-    isLoading: likedLoading,
-    status: likedStatus,
-  } = trpc.likes.hasUserLikedPost.useQuery({postId})
-
-  const {mutate: toggleLike, isLoading: mutationLoading} =
-    trpc.likes.toggleLike.useMutation({
-      onMutate: () => {
-        setOptimisticLiked(!optimisticLiked)
-        setOptimisticCount((prev) =>
-          prev !== null ? (optimisticLiked ? prev - 1 : prev + 1) : null,
-        )
-      },
-      onSettled: () => {
-        utils.likes.getLikesForPost.invalidate({postId})
-        utils.likes.hasUserLikedPost.invalidate({postId})
-      },
-      onError: () => {
-        setOptimisticLiked(!optimisticLiked)
-        setOptimisticCount((prev) =>
-          prev !== null ? (optimisticLiked ? prev + 1 : prev - 1) : null,
-        )
-      },
-    })
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  useEffect(() => {
-    if (hasLiked !== undefined) setOptimisticLiked(hasLiked)
-  }, [hasLiked])
-
-  useEffect(() => {
-    if (likeCount !== undefined) setOptimisticCount(likeCount)
-  }, [likeCount])
-
-  const isLoading =
-    countStatus !== 'success' || likedStatus !== 'success' || viewerLoading
-
-  return (
-    <button
-      onClick={() => !viewerLoading && toggleLike({postId})}
-      disabled={isLoading}
-      className={cn(
-        'flex items-center gap-1.5 text-sm transition-colors',
-        mounted && optimisticLiked
-          ? 'text-blue-500'
-          : 'text-gray-500 hover:text-blue-500',
-        isLoading && 'opacity-50',
-        className,
-      )}
-      aria-label={optimisticLiked ? 'Unlike post' : 'Like post'}
-    >
-      <ThumbsUp
-        className={cn('h-5 w-5', isLoading && 'animate-pulse')}
-        fill={mounted && optimisticLiked ? 'currentColor' : 'none'}
-      />
-      {optimisticCount !== null ? (
-        <span>{optimisticCount}</span>
-      ) : (
-        <span className="w-3 h-3 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse" />
-      )}
-    </button>
-  )
-}
diff --git a/src/components/copy-resource.tsx b/src/components/copy-resource.tsx
index faaa29876..a82940a9c 100644
--- a/src/components/copy-resource.tsx
+++ b/src/components/copy-resource.tsx
@@ -22,7 +22,7 @@ const CopyToClipboard: FunctionComponent<
       <button
         type="button"
         onClick={handleCopyToClipboard}
-        className={`group flex text-sm items-center space-x-1 rounded-md p-2 bg-gray-50 dark:bg-gray-800 text-black dark:text-white dark:hover:bg-gray-700 hover:bg-blue-100 hover:text-blue-600 transition-colors ease-in-out duration-300 ${className}`}
+        className={`group flex text-sm items-center space-x-1 rounded-md p-2 bg-gray-50 dark:bg-gray-800 text-black dark:text-white dark:hover:bg-gray-700 hover:bg-blue-100 dark:hover:text-blue-500 hover:text-blue-600 transition-colors ease-in-out duration-300 ${className}`}
         aria-label="Copy link"
       >
         <IconLink className="w-5" />
diff --git a/src/components/like-button.tsx b/src/components/like-button.tsx
new file mode 100644
index 000000000..a688ac8e2
--- /dev/null
+++ b/src/components/like-button.tsx
@@ -0,0 +1,138 @@
+import {trpc} from '@/app/_trpc/client'
+import {useViewer} from '@/context/viewer-context'
+import Spinner from '@/spinner'
+import {cn} from '@/ui/utils'
+import {useEffect, useState} from 'react'
+
+interface LikeButtonProps {
+  postId: number
+  className?: string
+}
+
+export function LikeButton({postId, className}: LikeButtonProps) {
+  const utils = trpc.useUtils()
+  const [mounted, setMounted] = useState(false)
+  const [optimisticLiked, setOptimisticLiked] = useState(false)
+  const [optimisticCount, setOptimisticCount] = useState<number | null>(null)
+  const {authenticated, loading: viewerLoading} = useViewer()
+
+  const {
+    data: likeCount,
+    isLoading: countLoading,
+    status: countStatus,
+  } = trpc.likes.getLikesForPost.useQuery({postId})
+  const {
+    data: hasLiked,
+    isLoading: likedLoading,
+    status: likedStatus,
+  } = trpc.likes.hasUserLikedPost.useQuery({postId})
+
+  const {
+    mutate: toggleLike,
+    isLoading: mutationLoading,
+    isIdle,
+  } = trpc.likes.toggleLike.useMutation({
+    onMutate: () => {
+      setOptimisticLiked(!optimisticLiked)
+      setOptimisticCount((prev) =>
+        prev !== null ? (optimisticLiked ? prev - 1 : prev + 1) : null,
+      )
+    },
+    onSettled: () => {
+      utils.likes.getLikesForPost.invalidate({postId})
+      utils.likes.hasUserLikedPost.invalidate({postId})
+    },
+    onError: () => {
+      setOptimisticLiked(!optimisticLiked)
+      setOptimisticCount((prev) =>
+        prev !== null ? (optimisticLiked ? prev + 1 : prev - 1) : null,
+      )
+    },
+  })
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (hasLiked !== undefined) setOptimisticLiked(hasLiked)
+  }, [hasLiked])
+
+  useEffect(() => {
+    if (likeCount !== undefined) setOptimisticCount(likeCount)
+  }, [likeCount])
+
+  const isLoading =
+    countStatus !== 'success' || likedStatus !== 'success' || viewerLoading
+  const isLiked = mounted && optimisticLiked
+
+  return (
+    <button
+      onClick={() => !viewerLoading && toggleLike({postId})}
+      disabled={isLoading}
+      className={cn(
+        'flex items-center gap-1.5 text-sm transition  duration-300 ease-in-out dark:shadow-md px-3 py-2 rounded bg-gradient-to-tr dark:from-gray-800 dark:to-gray-700 from-yellow-300/20 border-pink-400/5 relative border dark:border-0 to-amber-300/20 hover:bg-amber-300/30',
+        {
+          '': isLiked,
+          'dark:text-gray-200 hover:dark:text-white': !isLiked,
+          'animate-pulse opacity-50': isLoading,
+        },
+        className,
+      )}
+      aria-label={optimisticLiked ? 'Unlike post' : 'Like post'}
+    >
+      {isLiked ? (
+        <svg
+          className={cn('h-4 w-4', {
+            'animate-pulse': isLoading,
+          })}
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          aria-label="Unlike post"
+        >
+          <g fill="currentColor">
+            <path
+              d="M9.956,4.5H6.731v-3A1.314,1.314,0,0,0,5.634,0a1.3,1.3,0,0,0-.4,0,.5.5,0,0,0-.45.375L3,6v6H9.431a2.009,2.009,0,0,0,1.95-1.725l.6-3.45a1.9,1.9,0,0,0-.45-1.575A1.883,1.883,0,0,0,9.956,4.5Z"
+              fill="currentColor"
+            />
+            <path d="M.5,6H2v6H.5a.5.5,0,0,1-.5-.5v-5A.5.5,0,0,1,.5,6Z" />
+          </g>
+        </svg>
+      ) : (
+        <svg
+          className={cn('h-4 w-4', {
+            'animate-pulse': isLoading,
+          })}
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          aria-label="Like post"
+        >
+          <g
+            strokeWidth="1"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline
+              points="2.5 11.5 0.5 11.5 0.5 6.5 2.5 6.5"
+              stroke="currentColor"
+            />
+            <path d="M2.5,6.5l2-6H5A1.5,1.5,0,0,1,6.5,2V4.5H9.77a1.5,1.5,0,0,1,1.485,1.712l-.571,4A1.5,1.5,0,0,1,9.2,11.5H2.5Z" />
+          </g>
+        </svg>
+      )}
+      {optimisticCount !== null ? (
+        <span className="min-w-3 text-center tabular-nums">
+          {optimisticCount}
+        </span>
+      ) : (
+        <Spinner className="w-3" />
+      )}
+    </button>
+  )
+}
diff --git a/src/components/share-bluesky.tsx b/src/components/share-bluesky.tsx
index 5e34d91e7..8d653447f 100644
--- a/src/components/share-bluesky.tsx
+++ b/src/components/share-bluesky.tsx
@@ -24,7 +24,7 @@ const BlueskyLink: FunctionComponent<React.PropsWithChildren<any>> = ({
   }
   return get(resource, 'title') && get(resource, 'path') ? (
     <a
-      className={`group flex text-sm items-center space-x-1 rounded-md p-2 bg-gray-50 dark:bg-gray-800 text-black dark:text-white dark:hover:bg-gray-700 hover:bg-blue-100 hover:text-blue-600 transition-colors ease-in-out duration-300 ${className}`}
+      className={`group flex text-sm items-center space-x-1 rounded-md p-2 bg-gray-50 dark:bg-gray-800 text-black dark:text-white dark:hover:bg-gray-700 hover:bg-blue-100 dark:hover:text-blue-500 hover:text-blue-600 transition-colors ease-in-out duration-300 ${className}`}
       target="_blank"
       rel="noopener noreferrer"
       href={encodeBlueskyUrl()}
@@ -42,7 +42,7 @@ export const IconBluesky: FunctionComponent<
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 64 57"
-    className={`w-5 transition-colors group-hover:text-[#1185FE] ${className}`}
+    className={`w-5 ${className}`}
   >
     <path
       fill="currentColor"
diff --git a/src/components/tweet-resource.tsx b/src/components/tweet-resource.tsx
index 002c7053c..18fe2a272 100644
--- a/src/components/tweet-resource.tsx
+++ b/src/components/tweet-resource.tsx
@@ -25,7 +25,7 @@ const TweetResource: FunctionComponent<React.PropsWithChildren<any>> = ({
   return get(resource, 'title') && get(resource, 'path') ? (
     <a
       className={twMerge(
-        `group flex text-sm items-center space-x-1 rounded-md p-2 bg-gray-50 dark:bg-gray-800 text-black dark:text-white dark:hover:bg-gray-700 hover:bg-blue-100 hover:text-blue-600 transition-colors ease-in-out duration-300`,
+        `group flex text-sm items-center space-x-1 rounded-md p-2 bg-gray-50 dark:bg-gray-800 text-black dark:text-white dark:hover:bg-gray-700 dark:hover:text-blue-500 hover:bg-blue-100 hover:text-blue-600 transition-colors ease-in-out duration-300`,
         className,
       )}
       target="_blank"
@@ -46,7 +46,7 @@ export const IconTwitter: FunctionComponent<
       <path
         className="fill-current"
         d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
-      ></path>
+      />
     </g>
   </svg>
 )
diff --git a/src/pages/[post].tsx b/src/pages/[post].tsx
index 2a0e71f15..bae9b0b10 100644
--- a/src/pages/[post].tsx
+++ b/src/pages/[post].tsx
@@ -24,7 +24,7 @@ import Link from 'next/link'
 import TweetResource from '@/components/tweet-resource'
 import CopyToClipboard from '@/components/copy-resource'
 import {track} from '@/utils/analytics'
-import {LikeButton} from '@/components/LikeButton'
+import {LikeButton} from '@/components/like-button'
 import BlueskyLink from '@/components/share-bluesky'
 
 const access: ConnectionOptions = {
@@ -241,13 +241,17 @@ function InstructorProfile({
         <span className="text-gray-700 dark:text-gray-400 text-sm leading-tighter">
           Instructor
         </span>
-        <h2 className="font-semibold text-base">{instructor.full_name}</h2>
+        <h2 className="font-semibold text-base group-hover:underline">
+          {instructor.full_name}
+        </h2>
       </div>
     </div>
   )
 
   return instructor.path ? (
-    <Link href={instructor.path}>{content}</Link>
+    <Link className="group" href={instructor.path}>
+      {content}
+    </Link>
   ) : (
     content
   )
@@ -300,25 +304,10 @@ export default function PostPage({
         }}
       />
       {videoResource && (
-        <div className="relative z-10 flex items-center justify-center">
-          <div className="flex w-full max-w-screen-lg flex-col">
-            <div className="relative aspect-[16/9]">
-              <div
-                className={cn(
-                  'flex items-center justify-center  overflow-hidden',
-                  {
-                    hidden: false,
-                  },
-                )}
-              >
-                <PostPlayer
-                  playbackId={videoResource.fields.muxPlaybackId}
-                  eggheadLessonId={post.fields.eggheadLessonId}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
+        <PostPlayer
+          playbackId={videoResource.fields.muxPlaybackId}
+          eggheadLessonId={post.fields.eggheadLessonId}
+        />
       )}
       <div className="container mx-auto w-fit">
         {post.fields.state === 'draft' && (
@@ -328,76 +317,82 @@ export default function PostPage({
             </p>
           </div>
         )}
-        <header className="pb-6 pt-7 sm:pb-18 sm:pt-16 space-y-4">
-          <h1 className="max-w-screen-md font-extrabold sm:text-4xl text-2xl leading-tighter">
+        <header className="flex flex-col gap-5 sm:pt-8 pt-5 max-w-4xl mb-5">
+          <h1 className="font-bold sm:text-2xl text-xl leading-tighter tracking-tight">
             {post.fields.title}
           </h1>
-          <div className="flex items-center gap-2">
-            <div className="ml-auto">
+          <div className="flex md:items-center justify-between md:flex-row flex-col w-full gap-5">
+            <div className="flex items-center gap-6">
+              <InstructorProfile instructor={instructor} />
               <LikeButton postId={post.fields.eggheadLessonId} />
             </div>
-          </div>
-          <div className="flex items-center gap-2">
-            <InstructorProfile instructor={instructor} />
-            <div className="ml-auto">
+            <div className="flex items-center gap-5">
+              {post.fields.github && (
+                <Link
+                  className="flex items-center gap-1 hover:underline rounded-md leading-tight transition not-prose text-base"
+                  href={post.fields.github}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => {
+                    track('clicked view source code', {
+                      resource: post.fields.slug,
+                      resourceType: 'post',
+                    })
+                  }}
+                >
+                  <GitHubIcon /> Code
+                </Link>
+              )}
               <TagList tags={tags} resourceSlug={post.fields.slug} />
             </div>
           </div>
         </header>
 
-        <main className="prose dark:prose-dark sm:prose-lg lg:prose-xl max-w-3xl dark:prose-a:text-blue-300 prose-a:text-blue-500 pt-4 pb-8 mx-auto">
-          <MDXRemote
-            {...mdxSource}
-            components={{
-              ...mdxComponents,
-              PodcastLinks,
-            }}
-          />
-          <div className="flex justify-between sm:items-center items-start sm:flex-row  flex-col sm:space-y-0 space-y-2">
-            {post.fields.github && (
-              <Link
-                className="flex items-center gap-2 rounded-md  font-medium leading-tight transition not-prose text-base"
-                href={post.fields.github}
-              >
-                <GitHubIcon /> Code
-              </Link>
-            )}
-            <div>
-              <span className="text-sm not-prose">Share with a coworker</span>
-              <h2 className="sr-only">Social Share Links</h2>
-              <div className="flex sm:items-center items-start sm:justify-center gap-2">
-                <BlueskyLink
-                  className="not-prose"
-                  resource={{
-                    title: post.fields.title,
-                    type: post.fields.postType,
-                    path: `/${post.fields.slug}`,
-                  }}
-                  instructor={instructor}
-                />
-                <TweetResource
-                  className="not-prose"
-                  resource={{
-                    title: post.fields.title,
-                    type: post.fields.postType,
-                    path: `/${post.fields.slug}`,
-                  }}
-                  instructor={instructor}
-                />
-                <CopyToClipboard
-                  stringToCopy={`${process.env.NEXT_PUBLIC_DEPLOYMENT_URL}/${post.fields.slug}`}
-                />
-              </div>
+        <main className="max-w-4xl mx-auto w-full pt-4 pb-16">
+          <article className="prose dark:prose-dark dark:prose-p:text-gray-200 dark:prose-li:text-gray-200 sm:prose-lg lg:prose-lg max-w-none dark:prose-a:text-blue-300 prose-a:text-blue-500">
+            <MDXRemote
+              {...mdxSource}
+              components={{
+                ...mdxComponents,
+                PodcastLinks,
+              }}
+            />
+          </article>
+          <div className="py-6 bg-transparent dark:border-gray-800/50 border-y border-gray-100 my-10 flex justify-center gap-5 flex-wrap items-center">
+            <span className="text-sm">Share with a coworker</span>
+            <div className="flex sm:items-center items-start sm:justify-center gap-2">
+              <CopyToClipboard
+                stringToCopy={`${process.env.NEXT_PUBLIC_DEPLOYMENT_URL}/${post.fields.slug}`}
+              />
+              <BlueskyLink
+                resource={{
+                  title: post.fields.title,
+                  type: post.fields.postType,
+                  path: `/${post.fields.slug}`,
+                }}
+                instructor={instructor}
+              />
+              <TweetResource
+                resource={{
+                  title: post.fields.title,
+                  type: post.fields.postType,
+                  path: `/${post.fields.slug}`,
+                }}
+                instructor={instructor}
+              />
             </div>
           </div>
           {videoResource && (
             <section>
-              <h2 className="text-xl font-bold">Transcript</h2>
-              <ReactMarkdown className="prose text-gray-800 dark:prose-dark max-w-none">
+              <h2 className="text-xl tracking-tight font-bold mb-3">
+                Transcript
+              </h2>
+              <ReactMarkdown className="prose dark:prose-p:text-gray-200 lg:prose-base prose-sm dark:prose-dark max-w-none">
                 {videoResource.fields.transcript}
               </ReactMarkdown>
             </section>
           )}
+          <PoweredByMuxBadge />
         </main>
       </div>
     </div>
@@ -417,8 +412,9 @@ function GitHubIcon() {
   return (
     <>
       <svg
-        width="24"
-        height="24"
+        className="w-5 h-5"
+        // width="24"
+        // height="24"
         viewBox="0 0 16 16"
         aria-hidden="true"
         role="img"
@@ -489,6 +485,7 @@ function PostPlayer({
         })
         setWritingProgress(false)
       }}
+      className="relative z-10 flex items-center max-h-[calc(100vh-240px)] h-full bg-black justify-center"
     />
   )
 }
@@ -570,7 +567,7 @@ function PodcastLinks() {
 const TagList = ({
   tags,
   resourceSlug,
-  className = 'flex justify-center md:justify-start flex-wrap items-center',
+  className,
 }: {
   tags: any
   resourceSlug: string
@@ -579,9 +576,14 @@ const TagList = ({
   return (
     <>
       {!isEmpty(tags) && (
-        <ul className={className}>
+        <ul
+          className={cn(
+            'flex justify-center md:justify-start flex-wrap gap-5 items-center',
+            className,
+          )}
+        >
           {tags.map((tag: any, index: number) => (
-            <li key={index} className="inline-flex items-center mr-4 mt-0">
+            <li key={index} className="inline-flex items-center mt-0">
               <Link
                 href={`/q/${tag.name}`}
                 onClick={() => {
@@ -616,3 +618,32 @@ const TagList = ({
     </>
   )
 }
+
+const PoweredByMuxBadge = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-44 mx-auto mt-16"
+      viewBox="0 0 180 18"
+      aria-label="Video Powered by Mux"
+      fill="none"
+    >
+      <g fill="currentColor" opacity={0.8} clip-path="url(#a)">
+        <path
+          fillRule="evenodd"
+          d="m167.881 9-5.131 5.16a2.26 2.26 0 0 0 0 3.181c.873.878 2.29.878 3.164 0l5.131-5.16 5.132 5.16c.873.878 2.29.878 3.164 0a2.26 2.26 0 0 0 0-3.181L174.209 9l5.132-5.16a2.26 2.26 0 0 0 0-3.181 2.23 2.23 0 0 0-3.164 0l-5.132 5.16-5.131-5.16a2.23 2.23 0 0 0-3.164 0 2.26 2.26 0 0 0 0 3.181zm-9.929-9a2.243 2.243 0 0 0-2.237 2.25V9c0 2.482-2.008 4.501-4.476 4.501s-4.477-2.02-4.477-4.501V2.25A2.244 2.244 0 0 0 144.525 0a2.244 2.244 0 0 0-2.237 2.25V9c0 4.963 4.016 9 8.951 9s8.951-4.037 8.951-9V2.25A2.244 2.244 0 0 0 157.953 0zm-21.874.659a2.23 2.23 0 0 1 2.438-.487h.001a2.25 2.25 0 0 1 1.38 2.078v13.5A2.243 2.243 0 0 1 137.66 18a2.244 2.244 0 0 1-2.237-2.25V7.68l-2.894 2.91a2.23 2.23 0 0 1-3.164 0l-2.895-2.91v8.07a2.243 2.243 0 0 1-2.237 2.25 2.244 2.244 0 0 1-2.237-2.25V2.25c0-.91.545-1.73 1.381-2.078a2.23 2.23 0 0 1 2.438.487l5.131 5.16z"
+          clipRule="evenodd"
+        />
+        <path
+          d="m108.38 6.258 2.198 5.824 2.128-5.824h1.218l-3.29 8.344a6.6 6.6 0 0 1-.448.966c-.14.224-.294.378-.49.476-.196.112-.462.154-.784.154h-1.372v-1.05h1.022c.224 0 .392-.014.504-.07a.5.5 0 0 0 .266-.224c.07-.112.154-.294.266-.546l.364-.854-2.8-7.196zM105.171 6.608q.777.441 1.218 1.26c.294.56.448 1.204.448 1.96 0 .728-.154 1.358-.448 1.904-.294.56-.7.98-1.218 1.288a3.46 3.46 0 0 1-1.764.462c-.588 0-1.078-.098-1.484-.308a2.33 2.33 0 0 1-.966-.868l-.154 1.092h-.994v-9.8h1.148v3.808c.588-.812 1.414-1.232 2.45-1.232.658 0 1.246.154 1.764.434m-.168 5.124c.434-.49.658-1.12.658-1.904 0-.77-.224-1.4-.658-1.89s-1.008-.742-1.708-.742c-.462 0-.868.112-1.232.336s-.63.532-.826.924q-.294.588-.294 1.344 0 .777.294 1.386c.196.406.462.714.826.938s.77.336 1.232.336c.7 0 1.274-.238 1.708-.728M93.881 3.598v9.8h-.994l-.154-1.148c-.602.826-1.414 1.232-2.45 1.232-.672 0-1.26-.14-1.778-.434q-.777-.42-1.218-1.26c-.294-.546-.434-1.204-.434-1.96 0-.714.14-1.344.434-1.904.294-.546.7-.98 1.232-1.288q.777-.462 1.764-.462c.574 0 1.064.112 1.484.322.406.21.728.49.966.854V3.598zm-2.268 8.54q.546-.336.84-.924c.196-.392.294-.854.294-1.358a3.1 3.1 0 0 0-.294-1.372 2.23 2.23 0 0 0-.84-.952 2.3 2.3 0 0 0-1.218-.336c-.714 0-1.288.252-1.722.742s-.644 1.12-.644 1.89c0 .784.21 1.414.644 1.904s1.008.728 1.722.728c.448 0 .854-.098 1.218-.322M79.44 7.91c.28-.546.685-.966 1.203-1.274q.756-.462 1.764-.462c.644 0 1.232.14 1.736.406.504.28.896.672 1.19 1.176q.42.777.462 1.806c0 .112-.014.266-.028.49h-5.544v.098c.014.7.224 1.26.644 1.68.406.42.938.63 1.61.63q.756 0 1.302-.378c.364-.252.602-.616.728-1.078h1.162c-.14.728-.49 1.33-1.05 1.792s-1.246.686-2.058.686c-.714 0-1.33-.14-1.862-.448a3.16 3.16 0 0 1-1.246-1.288c-.294-.56-.434-1.19-.434-1.918s.14-1.358.42-1.918m5.165 1.19c-.056-.602-.294-1.078-.686-1.414s-.896-.504-1.498-.504c-.546 0-1.022.182-1.428.532-.42.364-.644.826-.7 1.386zM78.632 6.258v1.12h-.574c-.686 0-1.176.238-1.47.686-.294.462-.434 1.022-.434 1.694v3.64h-1.148v-7.14H76l.154 1.078c.196-.322.462-.588.798-.784.322-.196.77-.294 1.358-.294zM67.34 7.91c.28-.546.686-.966 1.204-1.274q.756-.462 1.764-.462c.644 0 1.232.14 1.736.406.504.28.896.672 1.19 1.176q.42.777.462 1.806c0 .112-.014.266-.028.49h-5.544v.098c.014.7.224 1.26.644 1.68.406.42.938.63 1.61.63q.756 0 1.302-.378c.364-.252.602-.616.728-1.078h1.162c-.14.728-.49 1.33-1.05 1.792s-1.246.686-2.058.686c-.714 0-1.33-.14-1.862-.448a3.16 3.16 0 0 1-1.246-1.288c-.294-.56-.434-1.19-.434-1.918s.14-1.358.42-1.918m5.166 1.19c-.056-.602-.294-1.078-.686-1.414s-.896-.504-1.498-.504c-.546 0-1.022.182-1.428.532-.42.364-.644.826-.7 1.386zM55.754 6.258h1.204l1.778 5.81 1.876-5.81h1.064l1.778 5.81 1.862-5.81h1.162l-2.38 7.14h-1.26l-1.722-5.306-1.792 5.306-1.26.014zM49.924 13.02a3.16 3.16 0 0 1-1.246-1.288c-.308-.546-.448-1.176-.448-1.904 0-.714.14-1.344.448-1.904.294-.546.714-.98 1.246-1.288q.798-.462 1.848-.462c.686 0 1.302.154 1.834.462s.952.742 1.26 1.288c.294.56.448 1.19.448 1.904 0 .728-.154 1.358-.448 1.904a3.3 3.3 0 0 1-1.26 1.288c-.532.308-1.148.462-1.834.462q-1.05 0-1.848-.462m3.08-.896a2.2 2.2 0 0 0 .84-.938c.196-.392.294-.854.294-1.358s-.098-.952-.294-1.358a2.27 2.27 0 0 0-.84-.938 2.3 2.3 0 0 0-1.232-.336c-.476 0-.882.112-1.246.336s-.63.546-.826.938a3.1 3.1 0 0 0-.294 1.358c0 .504.098.966.294 1.358.196.406.462.714.826.938s.77.336 1.246.336c.462 0 .868-.112 1.232-.336M45.504 6.608q.777.441 1.218 1.26c.294.56.448 1.204.448 1.96 0 .728-.154 1.358-.448 1.904-.294.56-.7.98-1.218 1.288a3.46 3.46 0 0 1-1.764.462c-.588 0-1.078-.098-1.484-.308a2.33 2.33 0 0 1-.966-.868v3.892h-1.148v-9.94h.994l.154 1.148c.588-.812 1.414-1.232 2.45-1.232.658 0 1.246.154 1.764.434m-.168 5.124c.434-.49.658-1.12.658-1.904 0-.77-.224-1.4-.658-1.89s-1.008-.742-1.708-.742c-.462 0-.868.112-1.232.336s-.63.532-.826.924q-.294.588-.294 1.344 0 .777.294 1.386c.196.406.462.714.826.938s.77.336 1.232.336c.7 0 1.274-.238 1.708-.728M29.772 13.02a3.16 3.16 0 0 1-1.246-1.288c-.308-.546-.448-1.176-.448-1.904 0-.714.14-1.344.448-1.904.294-.546.714-.98 1.246-1.288q.798-.462 1.848-.462c.686 0 1.302.154 1.834.462s.952.742 1.26 1.288c.294.56.448 1.19.448 1.904 0 .728-.154 1.358-.448 1.904a3.3 3.3 0 0 1-1.26 1.288c-.532.308-1.148.462-1.834.462q-1.05 0-1.848-.462m3.08-.896a2.2 2.2 0 0 0 .84-.938c.196-.392.294-.854.294-1.358s-.098-.952-.294-1.358a2.27 2.27 0 0 0-.84-.938 2.3 2.3 0 0 0-1.232-.336c-.476 0-.882.112-1.246.336s-.63.546-.826.938a3.1 3.1 0 0 0-.294 1.358c0 .504.098.966.294 1.358.196.406.462.714.826.938s.77.336 1.246.336c.462 0 .868-.112 1.232-.336M20.664 7.91c.28-.546.686-.966 1.204-1.274q.756-.462 1.764-.462c.644 0 1.232.14 1.736.406.504.28.896.672 1.19 1.176q.42.777.462 1.806c0 .112-.014.266-.028.49h-5.544v.098c.014.7.224 1.26.644 1.68.406.42.938.63 1.61.63q.756 0 1.302-.378c.364-.252.602-.616.728-1.078h1.162c-.14.728-.49 1.33-1.05 1.792s-1.246.686-2.058.686c-.714 0-1.33-.14-1.862-.448a3.16 3.16 0 0 1-1.246-1.288c-.294-.56-.434-1.19-.434-1.918s.14-1.358.42-1.918M25.83 9.1c-.056-.602-.294-1.078-.686-1.414s-.896-.504-1.498-.504c-.546 0-1.022.182-1.428.532-.42.364-.644.826-.7 1.386zM18.932 3.598v9.8h-.994l-.154-1.148c-.602.826-1.414 1.232-2.45 1.232-.672 0-1.26-.14-1.778-.434q-.777-.42-1.218-1.26c-.294-.546-.434-1.204-.434-1.96 0-.714.14-1.344.434-1.904.294-.546.7-.98 1.232-1.288q.777-.462 1.764-.462c.574 0 1.064.112 1.484.322.406.21.728.49.966.854V3.598zm-2.268 8.54q.546-.336.84-.924c.196-.392.294-.854.294-1.358a3.1 3.1 0 0 0-.294-1.372 2.23 2.23 0 0 0-.84-.952 2.3 2.3 0 0 0-1.218-.336c-.714 0-1.288.252-1.722.742s-.644 1.12-.644 1.89c0 .784.21 1.414.644 1.904s1.008.728 1.722.728c.448 0 .854-.098 1.218-.322M10.541 3.71c.14.14.21.322.21.532 0 .224-.07.392-.21.532a.73.73 0 0 1-.532.21.7.7 0 0 1-.532-.21.7.7 0 0 1-.21-.532c0-.21.07-.392.21-.532s.308-.21.532-.21c.21 0 .392.07.532.21M9.435 6.258h1.148v7.14H9.435zM0 3.598h1.288l2.996 8.358 2.982-8.358h1.26l-3.528 9.8h-1.47z"
+          opacity=".9"
+        />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="currentColor" d="M0 0h180v18H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}