diff --git a/svelte-app/src/app.scss b/svelte-app/src/app.scss
index fdeb0a020..8d3e63149 100644
--- a/svelte-app/src/app.scss
+++ b/svelte-app/src/app.scss
@@ -1,136 +1,10 @@
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @import 'styles/breakpoints';
-@import 'styles/animations';
 @import 'styles/colors';
 @import 'styles/fonts';
-@import 'styles/utils';
+@import 'styles/tw';
 
 @import 'styles/components/code-block';
-
-body,
-html {
-  height: 100vh;
-  overflow: hidden;
-  transition: background 150ms ease;
-}
-
-body,
-html,
-div,
-span,
-p,
-img {
-  box-sizing: border-box;
-}
-
-body {
-  @apply h-full w-full overflow-x-hidden;
-
-  background-color: $black;
-  --textColour: $light;
-
-  &.light {
-    background-color: $light;
-    --textColour: $dark;
-  }
-  &:not(.is-loaded) {
-    cursor: wait !important;
-
-    & a,
-    & button,
-    & [role='button'] {
-      cursor: not-allowed !important;
-    }
-  }
-  &.is-loading {
-    cursor: wait !important;
-
-    & a,
-    & button,
-    & [role='button'] {
-      cursor: not-allowed !important;
-    }
-  }
-}
-
-.not-allowed {
-  &,
-  & a,
-  & button,
-  & [role='button'] {
-    cursor: not-allowed !important;
-  }
-}
-
-::selection {
-  background: rgba($accent-light, 0.8);
-  color: $light;
-}
-
-.dark {
-  ::selection {
-    background: rgba($accent-dark, 0.8);
-    color: $dark;
-  }
-}
-
-.click-through {
-  pointer-events: none;
-
-  a,
-  button,
-  [role='button'] {
-    pointer-events: visible;
-  }
-}
-
-.focus:ring-2 {
-  &,
-  &:focus {
-    outline: none !important;
-  }
-}
-
-.pt-ol,
-.pt-ul {
-  li {
-    margin-bottom: 0.5rem;
-    line-height: 1.4rem;
-  }
-}
-
-.pt-ol {
-  li {
-    ol {
-      @apply list-[lower-alpha] my-3;
-    }
-  }
-}
-
-.pt-ul {
-  li {
-    ul {
-      @apply list-disc my-3;
-    }
-  }
-}
-
-.focusOutline {
-  @apply outline-offset-4;
-
-  &,
-  &-sm {
-    @apply focus-visible:outline outline-accent-light outline-2;
-
-    .dark & {
-      @apply outline-accent-dark;
-    }
-  }
-  &-sm {
-    @apply outline-offset-2;
-  }
-}
diff --git a/svelte-app/src/components/about/timeline-item.svelte b/svelte-app/src/components/about/timeline-item.svelte
index 0dd544b53..84f613a6a 100644
--- a/svelte-app/src/components/about/timeline-item.svelte
+++ b/svelte-app/src/components/about/timeline-item.svelte
@@ -11,18 +11,27 @@
     last = false;
 </script>
 
-<div class:last class="item">
-  <span class="bullet" />
+<div
+  class="relative flex flex-row items-start justify-start gap-x-6 pl-3"
+  class:last
+  class:pb-0={last}
+  class:pb-5={!last}
+>
+  <span
+    class="bullet block flex-shrink-0 rounded-full bg-accent-light/80 dark:bg-accent-dark/80"
+  />
   <div class="content">
-    <h3>{title}</h3>
-    <p>
+    <h3 class="py-1 text-base font-bold text-dark transition-colors dark:text-white">
+      {title}
+    </h3>
+    <p class="font-mono text-sm text-dark/80 transition-colors dark:text-light/80">
       {$displayRange(range.start, range.end)} &bull; {$displayMonthDuration(
         range.start,
         range.end
       )}
     </p>
     {#if body}
-      <div class="body">
+      <div class="-mb-4">
         <PortableText text={body} />
       </div>
     {/if}
@@ -37,32 +46,10 @@
   $lineWidth: 2px;
   $lineGap: 14px;
 
-  .item {
-    @apply relative flex flex-row items-start justify-start gap-x-6 pb-5 pl-3;
-
-    &.last {
-      @apply pb-0;
-    }
-  }
-
   .bullet {
-    @apply block flex-shrink-0 rounded-full bg-accent-light/80;
-
     margin-top: $bulletTopMargin;
     width: $bulletSize;
     height: $bulletSize;
-
-    @include dark {
-      @apply bg-accent-dark/80;
-    }
-  }
-
-  h3 {
-    @apply py-1 text-base font-bold text-dark transition-colors;
-
-    @include dark {
-      @apply text-white;
-    }
   }
 
   .content {
@@ -87,17 +74,5 @@
         @apply bg-white/20;
       }
     }
-
-    p {
-      @apply font-mono text-sm text-dark/80 transition-colors;
-
-      @include dark {
-        @apply text-light/80;
-      }
-    }
-
-    .body {
-      @apply -mb-4;
-    }
   }
 </style>
diff --git a/svelte-app/src/components/about/timeline-section.svelte b/svelte-app/src/components/about/timeline-section.svelte
index bdffa5d9b..a13ec2fd8 100644
--- a/svelte-app/src/components/about/timeline-section.svelte
+++ b/svelte-app/src/components/about/timeline-section.svelte
@@ -12,10 +12,18 @@
     id = Math.random().toString(36).substring(7);
 </script>
 
-<section role="group" aria-labelledby="{id}-heading">
-  <div>
-    <h2 id="{id}-heading">{title}</h2>
-    <p aria-label={$t('Duration')}>
+<section class="my-6" role="group" aria-labelledby="{id}-heading">
+  <div class="pb-4">
+    <h2
+      class="pb-1 text-lg font-bold text-dark transition-colors dark:text-white"
+      id="{id}-heading"
+    >
+      {title}
+    </h2>
+    <p
+      class="font-mono text-sm text-dark/80 transition-colors dark:text-light/80"
+      aria-label={$t('Duration')}
+    >
       {$displayRange(section[section.length - 1].range.start, section[0].range.end)} &bull;
       {$displayMonthDuration(
         section[section.length - 1].range.start,
@@ -33,31 +41,3 @@
     />
   {/each}
 </section>
-
-<style lang="scss">
-  h2 {
-    @apply pb-1 text-lg font-bold text-dark transition-colors;
-  }
-
-  p {
-    @apply font-mono text-sm text-dark/80 transition-colors;
-  }
-
-  div {
-    @apply pb-4;
-  }
-
-  section {
-    @apply my-6;
-  }
-
-  :global(.dark) {
-    h2 {
-      @apply text-white;
-    }
-
-    p {
-      @apply text-light/80;
-    }
-  }
-</style>
diff --git a/svelte-app/src/components/bullet-point.svelte b/svelte-app/src/components/bullet-point.svelte
index c89212cf7..1a46f2013 100644
--- a/svelte-app/src/components/bullet-point.svelte
+++ b/svelte-app/src/components/bullet-point.svelte
@@ -1,13 +1,3 @@
-<span />
-
-<style lang="scss">
-  span {
-    @apply mx-2 block h-1 w-1 flex-shrink-0 rounded-full bg-dark/80 transition-colors;
-  }
-
-  :global(.dark) {
-    span {
-      @apply bg-light/80;
-    }
-  }
-</style>
+<span
+  class="mx-2 block h-1 w-1 flex-shrink-0 rounded-full bg-dark/80 transition-colors dark:bg-light/80"
+/>
diff --git a/svelte-app/src/components/code-block.svelte b/svelte-app/src/components/code-block.svelte
index 711e3e960..af0583b95 100644
--- a/svelte-app/src/components/code-block.svelte
+++ b/svelte-app/src/components/code-block.svelte
@@ -112,7 +112,7 @@
   {/if}
   <Tooltip text={$t('Copy to clipboard')} delay={200} offset={[0, 2]}>
     <button
-      class="focusOutline-sm absolute right-0 top-0 z-[2] cursor-pointer rounded-sm pb-3 pl-3 pr-4 pt-4 text-dark/60 hover:text-dark/80 dark:text-light/60 dark:hover:text-light/80"
+      class="focus-outline-sm absolute right-0 top-0 z-[2] cursor-pointer rounded-sm pb-3 pl-3 pr-4 pt-4 text-dark/60 hover:text-dark/80 dark:text-light/60 dark:hover:text-light/80"
       on:click={() => copy()}
       on:keydown={(e) => e.key === 'Enter' && copy()}
     >
@@ -122,7 +122,7 @@
     </button>
   </Tooltip>
   <div
-    class="focusOutline relative h-fit w-full overflow-hidden rounded-sm text-lg transition-[height,color]"
+    class="focus-outline relative h-fit w-full overflow-hidden rounded-sm text-lg transition-[height,color]"
     bind:this={codeContainer}
   >
     <div
diff --git a/svelte-app/src/components/controls/arrow-button.svelte b/svelte-app/src/components/controls/arrow-button.svelte
index 6adc17ca8..3ea49232c 100644
--- a/svelte-app/src/components/controls/arrow-button.svelte
+++ b/svelte-app/src/components/controls/arrow-button.svelte
@@ -18,10 +18,11 @@
 <svelte:element
   this={self}
   href={$$props.href || undefined}
-  class:fullWidth
-  class:alignRight={align === 'right'}
-  class:alignLeft={align === 'left'}
-  class="arrowButton {$$props.class || ''}"
+  class:w-full={fullWidth}
+  class:text-right={align === 'right'}
+  class:text-left={align === 'left'}
+  class="focus-outline inline-block rounded-sm font-code text-accent-light hover:text-dark focus-visible:text-dark dark:text-accent-dark dark:hover:text-light dark:focus-visible:text-light {$$props.class ??
+    ''}"
   aria-label={$$props['aria-label'] || undefined}
   role="button"
   tabindex="0"
@@ -32,37 +33,3 @@
 >
   <slot />
 </svelte:element>
-
-<style lang="scss">
-  @import '@styles/mixins';
-
-  .arrowButton {
-    @apply inline-block rounded-sm font-code text-accent-light;
-
-    @include focus-state;
-
-    @include focused {
-      @apply text-dark;
-
-      @include dark {
-        @apply text-light;
-      }
-    }
-
-    &.fullWidth {
-      @apply w-full;
-    }
-
-    &.alignRight {
-      @apply text-right;
-    }
-
-    &.alignLeft {
-      @apply text-left;
-    }
-
-    @include dark {
-      @apply text-accent-dark;
-    }
-  }
-</style>
diff --git a/svelte-app/src/components/controls/language-toggle.svelte b/svelte-app/src/components/controls/language-toggle.svelte
index 19e256bdb..ce3999b63 100644
--- a/svelte-app/src/components/controls/language-toggle.svelte
+++ b/svelte-app/src/components/controls/language-toggle.svelte
@@ -29,6 +29,7 @@
     text={$t($currentLang === APP_LANGS[0] ? 'Switch to French' : 'Switch to English')}
   >
     <button
+      class="focus-outline -m-1.5 flex h-6 w-6 items-center justify-center rounded-sm hover:text-accent-light focus-visible:text-accent-light dark:hover:text-accent-dark dark:focus-visible:text-accent-dark"
       aria-label={$t(
         $currentLang === APP_LANGS[0] ? 'Switch to French' : 'Switch to English'
       )}
@@ -42,24 +43,3 @@
     </button>
   </Tooltip>
 </Hoverable>
-
-<style lang="scss">
-  @import '@styles/mixins';
-
-  button {
-    @apply -m-1.5 flex items-center justify-center rounded-sm;
-
-    height: 24px;
-    width: 24px;
-
-    @include focus-state;
-
-    @include focused {
-      @apply text-accent-light;
-
-      @include dark {
-        @apply text-accent-dark;
-      }
-    }
-  }
-</style>
diff --git a/svelte-app/src/components/controls/theme-toggle.svelte b/svelte-app/src/components/controls/theme-toggle.svelte
index 3f1f70c63..d98e9769e 100644
--- a/svelte-app/src/components/controls/theme-toggle.svelte
+++ b/svelte-app/src/components/controls/theme-toggle.svelte
@@ -8,14 +8,13 @@
   import Tooltip from '$components/tooltips/tooltip.svelte';
 
   const { theme } = Settings;
-
-  $: tooltipText = $theme === APP_THEMES.LIGHT ? 'Use dark mode' : 'Use light mode';
 </script>
 
 <Hoverable>
-  <Tooltip text={$t(tooltipText)}>
+  <Tooltip text={$t($theme === APP_THEMES.LIGHT ? 'Use dark mode' : 'Use light mode')}>
     <button
-      aria-label={$t(tooltipText)}
+      class="focus-outline -m-1.5 flex h-6 w-6 items-center justify-center rounded-sm hover:text-accent-light focus-visible:text-accent-light dark:hover:text-accent-dark dark:focus-visible:text-accent-dark"
+      aria-label={$t($theme === APP_THEMES.LIGHT ? 'Use dark mode' : 'Use light mode')}
       data-test-id="theme-toggle"
       data-test-state={$theme}
       tabindex="0"
@@ -29,23 +28,3 @@
     </button>
   </Tooltip>
 </Hoverable>
-
-<style lang="scss">
-  @import '@styles/mixins';
-  button {
-    @apply -m-1.5 flex items-center justify-center rounded-sm;
-
-    height: 24px;
-    width: 24px;
-
-    @include focus-state;
-
-    @include focused {
-      @apply text-accent-light;
-
-      @include dark {
-        @apply text-accent-dark;
-      }
-    }
-  }
-</style>
diff --git a/svelte-app/src/components/divider.svelte b/svelte-app/src/components/divider.svelte
index 251ebbc28..7f0777f02 100644
--- a/svelte-app/src/components/divider.svelte
+++ b/svelte-app/src/components/divider.svelte
@@ -1,13 +1,3 @@
-<span />
-
-<style lang="scss">
-  span {
-    @apply my-6 block h-[1px] w-full bg-dark/30 transition-[background-color] duration-75;
-  }
-
-  :global(.dark) {
-    span {
-      @apply bg-light/30;
-    }
-  }
-</style>
+<span
+  class="my-6 block h-[1px] w-full bg-dark/30 transition-[background-color] duration-75 dark:bg-light/30"
+/>
diff --git a/svelte-app/src/components/document/content/header.svelte b/svelte-app/src/components/document/content/header.svelte
index 85fab5ed0..8a1ea7539 100644
--- a/svelte-app/src/components/document/content/header.svelte
+++ b/svelte-app/src/components/document/content/header.svelte
@@ -21,7 +21,11 @@
 </script>
 
 <div data-test-id="{model}-header">
-  <h1>{data.title}</h1>
+  <h1
+    class="mb-4 mt-10 h-fit max-w-full text-4xl font-bold text-black transition-[color] dark:text-white lg:mt-12 lg:text-6xl lg:font-black"
+  >
+    {data.title}
+  </h1>
 
   <div class="flex flex-row flex-wrap items-center justify-between gap-4">
     <div
@@ -50,7 +54,7 @@
       {/if}
     </div>
     <ArrowButton
-      class="focusOutline-sm -mb-1 hidden flex-1 whitespace-nowrap sm:block"
+      class="focus-outline-sm -mb-1 hidden flex-1 whitespace-nowrap sm:block"
       href={model === 'post' ? $linkTo('/thoughts') : $linkTo('/work')}
       align="right"
       fullWidth
@@ -113,22 +117,8 @@
 </div>
 
 <style lang="scss">
-  @import '@styles/mixins';
-
   h1 {
-    @apply mb-4 mt-10 h-fit max-w-full text-4xl font-bold text-black transition-[color];
-
     overflow-wrap: break-word;
     word-break: break-word;
-
-    @include media(lg) {
-      @apply mt-12 text-6xl font-black;
-    }
-  }
-
-  :global(.dark) {
-    h1 {
-      @apply text-white;
-    }
   }
 </style>
diff --git a/svelte-app/src/components/empty-content.svelte b/svelte-app/src/components/empty-content.svelte
index de5e25674..fbaf00404 100644
--- a/svelte-app/src/components/empty-content.svelte
+++ b/svelte-app/src/components/empty-content.svelte
@@ -4,17 +4,10 @@
   import Icon from '$components/icon.svelte';
 </script>
 
-<div data-test-id="error-text">
+<div
+  class="my-8 mb-2 mt-8 flex h-fit w-full select-none flex-row items-center justify-start gap-3"
+  data-test-id="error-text"
+>
   <Icon name="Downasaur" />
-  <p>{$t('Hm, it seems empty around here...')}</p>
+  <p class="font-code text-lg font-bold">{$t('Hm, it seems empty around here...')}</p>
 </div>
-
-<style lang="scss">
-  div {
-    @apply my-8 mb-2 mt-8 flex h-fit w-full select-none flex-row items-center justify-start gap-3;
-  }
-
-  p {
-    @apply font-code text-lg font-bold;
-  }
-</style>
diff --git a/svelte-app/src/components/footer.svelte b/svelte-app/src/components/footer.svelte
index 81461ebe0..50841c922 100644
--- a/svelte-app/src/components/footer.svelte
+++ b/svelte-app/src/components/footer.svelte
@@ -22,9 +22,13 @@
 <Divider />
 
 {#if socials?.length || APP_VERSION?.length}
-  <footer>
+  <footer class="flex flex-row items-center justify-between font-mono text-sm">
     {#if socials?.length}
-      <div role="group" aria-label={$t('Social links')}>
+      <div
+        class="flex flex-row items-center justify-between gap-x-2 font-mono text-sm text-dark/90 dark:text-light/90"
+        role="group"
+        aria-label={$t('Social links')}
+      >
         {#each socials as social, i}
           <Tooltip text={social.url} delay={300} position="top">
             <BaseLink
@@ -36,13 +40,16 @@
             />
           </Tooltip>
           {#if i < socials.length - 1}
-            <span aria-hidden="true">/</span>
+            <span class="cursor-default select-none" aria-hidden="true">/</span>
           {/if}
         {/each}
       </div>
     {/if}
     {#if APP_VERSION?.length}
-      <div aria-label={$t('View latest commit on GitHub')}>
+      <div
+        class="flex flex-row items-center justify-between gap-x-2 font-mono text-sm text-dark/90 dark:text-light/90"
+        aria-label={$t('View latest commit on GitHub')}
+      >
         <Tooltip text={$t('View latest commit on GitHub')} position="top">
           <BaseLink
             target="_blank"
@@ -57,23 +64,3 @@
     {/if}
   </footer>
 {/if}
-
-<style lang="scss">
-  @import '@styles/mixins';
-
-  footer {
-    @apply flex flex-row items-center justify-between font-mono text-sm;
-  }
-
-  div {
-    @apply flex flex-row items-center justify-between gap-x-2 font-mono text-sm text-dark/90;
-
-    @include dark {
-      @apply text-light/90;
-    }
-  }
-
-  span {
-    @apply cursor-default select-none;
-  }
-</style>
diff --git a/svelte-app/src/components/header.svelte b/svelte-app/src/components/header.svelte
index 9d1a14e3b..392ec4956 100644
--- a/svelte-app/src/components/header.svelte
+++ b/svelte-app/src/components/header.svelte
@@ -8,53 +8,30 @@
   import HeaderLogo from '$components/nav/header-logo.svelte';
 </script>
 
-<header>
-  <nav aria-label="Main navigation">
+<header class="flex flex-row flex-wrap items-center justify-between gap-y-3 font-mono">
+  <nav
+    class="flex flex-row items-center justify-start gap-5 text-base text-dark/90 dark:text-light/90"
+    aria-label="Main navigation"
+  >
     <HeaderLogo />
-    <div>
+    <div
+      class="flex flex-row items-center justify-start gap-2 pt-0.5 text-dark/80 dark:text-light/80"
+    >
       {#each NAV_LINKS as link, i}
         <NavLink {link} />
         {#if i < NAV_LINKS.length - 1}
-          <span aria-hidden="true">/</span>
+          <span class="cursor-default select-none" aria-hidden="true">/</span>
         {/if}
       {/each}
     </div>
   </nav>
-  <div aria-label="Page controls" role="group">
+  <div
+    class="flex flex-row items-center justify-end gap-5 pr-1.5 pt-0.5 text-dark/80 dark:text-light/80"
+    aria-label="Page controls"
+    role="group"
+  >
     <ThemeToggle />
     <LanguageControls />
   </div>
 </header>
 <Divider />
-
-<style lang="scss">
-  @import '@styles/mixins';
-
-  header {
-    @apply flex flex-row flex-wrap items-center justify-between gap-y-3 font-mono;
-  }
-
-  nav {
-    @apply flex flex-row items-center justify-start gap-5 text-base text-dark/90;
-
-    div {
-      @apply justify-start gap-2 pr-0;
-    }
-
-    @include dark {
-      @apply text-light/90;
-    }
-  }
-
-  div {
-    @apply flex flex-row items-center justify-end gap-5 pr-1.5 pt-0.5 text-dark/80;
-
-    @include dark {
-      @apply text-light/80;
-    }
-  }
-
-  span {
-    @apply cursor-default select-none;
-  }
-</style>
diff --git a/svelte-app/src/components/headings/headed-block.svelte b/svelte-app/src/components/headings/headed-block.svelte
index 9ae55edba..9ac8d72bb 100644
--- a/svelte-app/src/components/headings/headed-block.svelte
+++ b/svelte-app/src/components/headings/headed-block.svelte
@@ -5,27 +5,9 @@
   export const id = Math.random().toString(36).substring(2);
 </script>
 
-<section {id} data-test-id={testId}>
-  <h1 id="{id}-heading">{heading}</h1>
-  <div><slot {id} /></div>
+<section class="transition-colors" {id} data-test-id={testId}>
+  <h1 class="py-2 font-code text-2xl font-black" id="{id}-heading">{heading}</h1>
+  <div class="mx-1 font-sans text-base text-dark/90 dark:text-light/90">
+    <slot {id} />
+  </div>
 </section>
-
-<style lang="scss">
-  @import '@styles/mixins';
-
-  h1 {
-    @apply mb-2 mt-8 font-code text-2xl font-black;
-  }
-
-  section {
-    @apply transition-colors;
-
-    div {
-      @apply mx-1 font-sans text-base text-dark/90;
-
-      @include dark {
-        @apply text-light/90;
-      }
-    }
-  }
-</style>
diff --git a/svelte-app/src/components/hoverable.svelte b/svelte-app/src/components/hoverable.svelte
index 86285a50f..351374035 100644
--- a/svelte-app/src/components/hoverable.svelte
+++ b/svelte-app/src/components/hoverable.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <span
-  class={$$props.class}
+  class="contents {$$props.class ?? ''}"
   class:cursor-pointer={setPointer}
   data-test-id="hover-target"
   on:mouseover={() => handleHoverIn()}
@@ -31,9 +31,3 @@
 >
   <slot {hovered} />
 </span>
-
-<style lang="scss">
-  span {
-    @apply contents;
-  }
-</style>
diff --git a/svelte-app/src/components/images/image-modal.svelte b/svelte-app/src/components/images/image-modal.svelte
index 0181d4b39..65d51b3e0 100644
--- a/svelte-app/src/components/images/image-modal.svelte
+++ b/svelte-app/src/components/images/image-modal.svelte
@@ -26,6 +26,7 @@
 {#if show}
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <dialog
+    class="fixed inset-0 z-50 flex h-full w-full flex-col items-center justify-center bg-black/80"
     bind:this={dialog}
     on:click={() => (show = false)}
     on:keydown={(e) => {
@@ -36,16 +37,10 @@
     in:fade={{ duration: BASE_ANIMATION_DURATION }}
     out:fade={{ duration: BASE_ANIMATION_DURATION }}
   >
-    <div><slot /></div>
+    <div
+      class="relative flex h-full max-h-full w-full max-w-full flex-col items-center justify-center p-8"
+    >
+      <slot />
+    </div>
   </dialog>
 {/if}
-
-<style lang="scss">
-  dialog {
-    @apply fixed inset-0 z-50 flex h-full w-full flex-col items-center justify-center bg-black/80;
-
-    div {
-      @apply relative flex h-full max-h-full w-full max-w-full flex-col items-center justify-center p-8;
-    }
-  }
-</style>
diff --git a/svelte-app/src/components/images/image.svelte b/svelte-app/src/components/images/image.svelte
index 3a73f379d..9fc3ba605 100644
--- a/svelte-app/src/components/images/image.svelte
+++ b/svelte-app/src/components/images/image.svelte
@@ -66,13 +66,23 @@
   });
 </script>
 
-<div>
+<div class="relative w-full">
   {#await srcPromise || new Promise((_res) => {})}
-    <div class="loading"><Spinner /></div>
+    <div
+      class="loading absolute left-1/2 top-1/2 h-fit w-fit max-w-full -translate-x-1/2 -translate-y-1/2 transform text-center font-code text-base"
+    >
+      <Spinner />
+    </div>
     <!-- svelte-ignore a11y-missing-attribute -->
-    <img src={placeholderSrc} draggable="false" {style} />
+    <img
+      class="mx-auto w-full select-none rounded-sm"
+      src={placeholderSrc}
+      draggable="false"
+      {style}
+    />
   {:then src}
     <button
+      class="focus-outline-sm relative mx-auto block max-h-fit w-full rounded-sm"
       {style}
       on:click={() => {
         showImageModal = true;
@@ -86,7 +96,7 @@
     >
       {#if showImageModal}
         <img
-          class="placeholder"
+          class="placeholder absolute left-0 top-0 mx-auto w-full select-none rounded-sm opacity-50"
           src={placeholderSrc}
           alt={_key}
           draggable="false"
@@ -96,6 +106,7 @@
       {:else}
         <img
           {src}
+          class="mx-auto w-full select-none rounded-sm"
           alt={_key}
           draggable="false"
           in:receive={{ key: _key, duration: BASE_ANIMATION_DURATION }}
@@ -104,11 +115,15 @@
       {/if}
     </button>
   {:catch e}
-    <p class="error">Error: {e?.message || e}</p>
+    <p
+      class="error absolute left-1/2 top-1/2 h-fit w-fit max-w-full -translate-x-1/2 -translate-y-1/2 transform text-center font-code text-base"
+    >
+      Error: {e?.message || e}
+    </p>
     <img src={placeholderSrc} alt={_key} draggable="false" {style} />
   {/await}
   <img
-    class="backdrop"
+    class="backdrop absolute left-1/2 top-0 -z-[1] mx-auto w-full -translate-x-1/2 select-none rounded-sm opacity-20 blur-lg transition-opacity"
     src={placeholderSrc}
     alt={_key}
     draggable="false"
@@ -119,6 +134,7 @@
 
 <ImageModal bind:dialog bind:show={showImageModal}>
   <img
+    class="mx-auto w-full select-none rounded-sm"
     src={fullSrc}
     alt={_key}
     {style}
@@ -130,48 +146,11 @@
 <style lang="scss">
   @import '@styles/mixins';
 
-  .placeholder,
-  .backdrop {
-    position: absolute;
-    top: 0;
-  }
-
-  .placeholder {
-    left: 0;
-    opacity: 50%;
-  }
-
-  div:not(.loading) {
-    @apply relative w-full;
-
-    .backdrop {
-      @apply -translate-x-1/2 transition-opacity;
-
-      z-index: -1;
-      filter: blur(20px);
-      opacity: 0.2;
-      left: 50%;
-    }
-
+  div {
     @include focused {
       .backdrop {
-        opacity: 30%;
+        @apply opacity-30;
       }
     }
   }
-
-  button {
-    @apply relative mx-auto block max-h-fit w-full rounded-sm;
-
-    @include focus-state(sm);
-  }
-
-  img {
-    @apply mx-auto w-full select-none rounded-sm;
-  }
-
-  .error,
-  .loading {
-    @apply absolute left-1/2 top-1/2 h-fit w-fit max-w-full -translate-x-1/2 -translate-y-1/2 transform text-center font-code text-base;
-  }
 </style>
diff --git a/svelte-app/src/components/layouts/constrain-width.svelte b/svelte-app/src/components/layouts/constrain-width.svelte
index af13e727d..b365ca06e 100644
--- a/svelte-app/src/components/layouts/constrain-width.svelte
+++ b/svelte-app/src/components/layouts/constrain-width.svelte
@@ -1,4 +1,7 @@
-<div id={$$props.id ?? undefined}>
+<div
+  class="w-full transition-[max-width,margin] duration-200"
+  id={$$props.id ?? undefined}
+>
   <slot />
 </div>
 
@@ -6,8 +9,6 @@
   @import '@styles/mixins';
 
   div {
-    @apply w-full transition-[max-width,margin] duration-200;
-
     --max-width: unset;
 
     @include media(lg) {
diff --git a/svelte-app/src/components/layouts/page-content.svelte b/svelte-app/src/components/layouts/page-content.svelte
index b790ed928..f51cf7950 100644
--- a/svelte-app/src/components/layouts/page-content.svelte
+++ b/svelte-app/src/components/layouts/page-content.svelte
@@ -1,7 +1 @@
-<div><slot /></div>
-
-<style lang="scss">
-  div {
-    @apply w-full px-2 pb-12;
-  }
-</style>
+<div class="w-full px-2 pb-12"><slot /></div>
diff --git a/svelte-app/src/components/layouts/scroll-container.svelte b/svelte-app/src/components/layouts/scroll-container.svelte
index dd037827f..37488c116 100644
--- a/svelte-app/src/components/layouts/scroll-container.svelte
+++ b/svelte-app/src/components/layouts/scroll-container.svelte
@@ -28,14 +28,12 @@
   });
 </script>
 
-<div tabindex="-1" role="none" data-test-id="scroll-container" bind:this={element}>
+<div
+  class="relative h-full w-full overflow-visible overflow-x-clip overflow-y-scroll p-8"
+  tabindex="-1"
+  role="none"
+  data-test-id="scroll-container"
+  bind:this={element}
+>
   <slot {element} />
 </div>
-
-<style lang="scss">
-  @import '@styles/mixins';
-
-  div {
-    @apply relative h-full w-full overflow-visible overflow-x-clip overflow-y-scroll p-8;
-  }
-</style>
diff --git a/svelte-app/src/components/link.svelte b/svelte-app/src/components/link.svelte
index 5a5ab968b..b097629ec 100644
--- a/svelte-app/src/components/link.svelte
+++ b/svelte-app/src/components/link.svelte
@@ -25,7 +25,7 @@
       this={type}
       target={$$props.newtab ? '_blank' : undefined}
       rel={$$props.newtab ? 'noopener noreferrer' : undefined}
-      class="focusOutline-sm rounded-sm from-accent-light underline decoration-accent-light underline-offset-[2px] dark:decoration-accent-dark {hovered
+      class="focus-outline-sm rounded-sm from-accent-light underline decoration-accent-light underline-offset-[2px] dark:decoration-accent-dark {hovered
         ? 'decoration-[3px]'
         : 'decoration-2'} transition-[text-decoration-color]"
       tabindex="0"
diff --git a/svelte-app/src/components/lists/document-list.svelte b/svelte-app/src/components/lists/document-list.svelte
index 3f324a0bc..7220f0c09 100644
--- a/svelte-app/src/components/lists/document-list.svelte
+++ b/svelte-app/src/components/lists/document-list.svelte
@@ -6,14 +6,8 @@
   export let documents: (ProjectDocument | PostDocument)[];
 </script>
 
-<div role="group" {...$$restProps}>
+<div class="flex w-full flex-col gap-8 pt-5" role="group" {...$$restProps}>
   {#each documents as document}
     <ListItem {document} />
   {/each}
 </div>
-
-<style lang="scss">
-  div {
-    @apply flex w-full flex-col gap-8 pt-5;
-  }
-</style>
diff --git a/svelte-app/src/components/lists/list-item.svelte b/svelte-app/src/components/lists/list-item.svelte
index e573f8aa3..52d67e455 100644
--- a/svelte-app/src/components/lists/list-item.svelte
+++ b/svelte-app/src/components/lists/list-item.svelte
@@ -20,72 +20,43 @@
   <a
     href={$linkTo(link)}
     class:small
+    class="focus-outline w-full rounded-md"
     tabindex="0"
     data-sveltekit-preload-code
     data-sveltekit-preload-data
   >
-    <div>
-      <p aria-label={$t('Date posted')}>
+    <div
+      class="flex flex-row items-center justify-start gap-3 pb-2 pt-0.5 font-mono text-sm text-dark/80 transition-colors dark:text-light/80"
+      class:pb-1.5={small}
+    >
+      <p class="line-clamp-1" aria-label={$t('Date posted')}>
         {$formatDate(document.date || document._createdAt, 'med')}
       </p>
       {#if document.tags?.length}
-        <span>{document.tags[0].title.toLowerCase()}</span>
+        <span
+          class="rounded-sm bg-dark/10 px-1.5 py-0.5 font-code text-sm transition-colors dark:bg-light/10"
+          >{document.tags[0].title.toLowerCase()}</span
+        >
       {/if}
       <p>{$t('{views} views', { views: $parseViews((document.views ?? 0) + 1) })}</p>
     </div>
 
-    <h1 class:underline={hovered} class:pb-1={!small && document.desc?.length}>
+    <h1
+      class="min-w-fit font-bold decoration-accent-light transition-colors dark:decoration-accent-dark"
+      class:pb-1={!small && document.desc?.length}
+      class:underline={hovered}
+      class:text-lg={small}
+      class:text-xl={!small}
+      class:decoration-2={small}
+      class:decoration-[3px]={!small}
+      class:underline-offset-2={small}
+      class:underline-offset-4={!small}
+    >
       {document.title}
     </h1>
 
     {#if !small && document.desc?.length}
-      <p>{document.desc}</p>
+      <p class="line-clamp-1">{document.desc}</p>
     {/if}
   </a>
 </Hoverable>
-
-<style lang="scss">
-  @import '@styles/mixins';
-
-  a {
-    @apply w-full rounded-md;
-
-    @include focus-state;
-  }
-
-  p {
-    @apply line-clamp-1;
-  }
-
-  div {
-    @apply flex flex-row items-center justify-start gap-3 pb-2 pt-0.5 font-mono text-sm text-dark/80 transition-colors;
-
-    @include dark {
-      @apply text-light/80;
-    }
-
-    .small & {
-      @apply pb-1.5;
-    }
-
-    span {
-      @apply rounded-sm bg-dark/10 px-1.5 py-0.5 font-code text-sm transition-colors;
-
-      @include dark {
-        @apply bg-light/10;
-      }
-    }
-  }
-
-  h1 {
-    @apply min-w-fit text-xl font-bold decoration-accent-light decoration-[3px] underline-offset-4 transition-colors;
-
-    @include dark {
-      @apply decoration-accent-dark;
-    }
-
-    .small & {
-      @apply text-lg decoration-2 underline-offset-2;
-    }
-  }
-</style>
diff --git a/svelte-app/src/components/nav/base-link.svelte b/svelte-app/src/components/nav/base-link.svelte
index 6ada6db1e..00e93e5a4 100644
--- a/svelte-app/src/components/nav/base-link.svelte
+++ b/svelte-app/src/components/nav/base-link.svelte
@@ -15,8 +15,14 @@
 
 <Hoverable let:hovered>
   <a
+    class="focus-outline-sm rounded-sm text-sm text-dark/80 dark:text-light/80"
     class:active={active || hovered}
     class:slotted={$$slots.default !== undefined}
+    class:flex={$$slots.default !== undefined}
+    class:flex-row={$$slots.default !== undefined}
+    class:items-center={$$slots.default !== undefined}
+    class:justify-start={$$slots.default !== undefined}
+    class:gap-x-1.5={$$slots.default !== undefined}
     href={$linkTo(href)}
     tabindex="0"
     role={$$props.role || undefined}
@@ -41,12 +47,6 @@
   @import '@styles/mixins';
 
   a {
-    @apply rounded-sm text-sm text-dark/80;
-
-    &.slotted {
-      @apply flex flex-row items-center justify-start gap-x-1.5;
-    }
-
     @include focused('.active') {
       @apply text-accent-light;
 
@@ -54,11 +54,5 @@
         @apply text-accent-dark;
       }
     }
-
-    @include focus-state(sm);
-
-    @include dark {
-      @apply text-light/80;
-    }
   }
 </style>
diff --git a/svelte-app/src/components/nav/confetti-piece.svelte b/svelte-app/src/components/nav/confetti-piece.svelte
index 626489b22..2f34679dd 100644
--- a/svelte-app/src/components/nav/confetti-piece.svelte
+++ b/svelte-app/src/components/nav/confetti-piece.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <div
-  class={colours[index % 5]}
+  class="absolute h-1 w-1 opacity-0 {colours[index % 5]}"
   style="--x-end: {Math.random() * 2 * spreadX - spreadX}px; --y-end: {Math.random() *
     2 *
     spreadY -
@@ -23,8 +23,6 @@
 
 <style lang="scss">
   div {
-    @apply absolute h-1 w-1 opacity-0;
-
     animation: explode 1s ease-out forwards;
   }
 
diff --git a/svelte-app/src/components/nav/confetti.svelte b/svelte-app/src/components/nav/confetti.svelte
index 9a233dcfb..cf8e019e1 100644
--- a/svelte-app/src/components/nav/confetti.svelte
+++ b/svelte-app/src/components/nav/confetti.svelte
@@ -10,14 +10,11 @@
   onMount(() => setTimeout(() => dispatch('done', key), 1500));
 </script>
 
-<div aria-hidden="true">
+<div
+  class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible"
+  aria-hidden="true"
+>
   {#each Array.from({ length: 30 }) as _, index (index)}
     <ConfettiPiece {index} />
   {/each}
 </div>
-
-<style lang="scss">
-  div {
-    @apply pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible;
-  }
-</style>
diff --git a/svelte-app/src/components/nav/header-logo.svelte b/svelte-app/src/components/nav/header-logo.svelte
index 9d5d032c8..e4752aff6 100644
--- a/svelte-app/src/components/nav/header-logo.svelte
+++ b/svelte-app/src/components/nav/header-logo.svelte
@@ -32,8 +32,13 @@
   $: $confetti?.every?.((c) => c.done) && confetti.set([]);
 </script>
 
-<span>
-  <a href={$linkTo('/')} aria-label={$t('Home')} on:click={handleClick}>kio.dev</a>
+<span class="relative h-fit w-fit">
+  <a
+    class="focus-outline-sm w-fit select-none rounded-sm font-code text-lg font-extrabold transition-[color]"
+    href={$linkTo('/')}
+    aria-label={$t('Home')}
+    on:click={handleClick}>kio.dev</a
+  >
 
   {#each $confetti as { id }}
     <Confetti
@@ -45,17 +50,3 @@
     />
   {/each}
 </span>
-
-<style lang="scss">
-  @import '@styles/mixins';
-
-  span {
-    @apply relative h-fit w-fit;
-  }
-
-  a {
-    @apply w-fit select-none rounded-sm font-code text-lg font-extrabold transition-[color];
-
-    @include focus-state(sm);
-  }
-</style>
diff --git a/svelte-app/src/components/portable-text/image-carousel.svelte b/svelte-app/src/components/portable-text/image-carousel.svelte
index 43c146166..4ac73f456 100644
--- a/svelte-app/src/components/portable-text/image-carousel.svelte
+++ b/svelte-app/src/components/portable-text/image-carousel.svelte
@@ -71,7 +71,7 @@
   <div class="scroller">
     {#each $values as image, i}
       <button
-        class="focusOutline-sm"
+        class="focus-outline-sm"
         style="
           aspect-ratio: {image.crop.width} / {image.crop.height};
           width: {image.carouselDimensions.width}px;
diff --git a/svelte-app/src/components/portable-text/image-carousel/scroll-button.svelte b/svelte-app/src/components/portable-text/image-carousel/scroll-button.svelte
index a2e23443f..7792797d7 100644
--- a/svelte-app/src/components/portable-text/image-carousel/scroll-button.svelte
+++ b/svelte-app/src/components/portable-text/image-carousel/scroll-button.svelte
@@ -7,6 +7,9 @@
 </script>
 
 <button
+  class="focus-outline-sm mt-4 flex flex-grow items-center rounded-md text-accent-light hover:text-dark focus-visible:text-dark disabled:cursor-not-allowed disabled:text-dark/60 dark:text-accent-dark dark:hover:text-light dark:focus-visible:text-light dark:disabled:text-light/60"
+  class:justify-end={dir === 'right'}
+  class:justify-start={dir === 'left'}
   on:click={onClick}
   on:keydown={(e) => {
     if (e.key === 'Enter') {
@@ -14,33 +17,6 @@
     }
   }}
   {disabled}
-  class={dir === 'right' ? 'justify-end' : 'justify-start'}
 >
   <Icon name={dir === 'left' ? 'ArrowLeft' : 'ArrowRight'} size={22} />
 </button>
-
-<style lang="scss">
-  @import '@styles/mixins';
-
-  button {
-    @apply mt-4 flex flex-grow items-center rounded-md text-accent-light;
-
-    @include focused {
-      @apply text-dark;
-
-      @include dark {
-        @apply text-light;
-      }
-    }
-
-    &:disabled {
-      @apply cursor-not-allowed text-dark/60;
-
-      @include dark {
-        @apply text-light/60;
-      }
-    }
-
-    @include focus-state(sm);
-  }
-</style>
diff --git a/svelte-app/src/components/portable-text/serializers/custom-heading.svelte b/svelte-app/src/components/portable-text/serializers/custom-heading.svelte
index 5cabb176b..d847be493 100644
--- a/svelte-app/src/components/portable-text/serializers/custom-heading.svelte
+++ b/svelte-app/src/components/portable-text/serializers/custom-heading.svelte
@@ -10,13 +10,16 @@
 </script>
 
 <a
-  class={style}
-  class:first={indexInParent === 0}
+  class="focus-outline-sm relative block w-full rounded-sm font-extrabold {style}"
+  class:mt-5={indexInParent === 0}
   id={`heading-${value._key}`}
   href={`#${value._key}`}
 >
   <Icon name="link" class="link-icon" aria-hidden="true" />
-  <svelte:element this={style}>
+  <svelte:element
+    this={style}
+    class="inline font-bold text-black transition-[color] dark:text-light"
+  >
     <slot />
   </svelte:element>
 </a>
@@ -25,7 +28,7 @@
   @import '@styles/mixins';
 
   :global(.link-icon) {
-    @apply absolute -left-5 top-1/2 hidden -translate-y-1/2;
+    @apply absolute -left-4 top-1/2 hidden -translate-y-1/2;
 
     :hover &,
     :focus-visible &,
@@ -34,71 +37,41 @@
     }
   }
 
-  a {
-    @apply relative block w-full rounded-sm font-extrabold;
-
-    @include focus-state(sm);
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      @apply inline font-bold text-black transition-[color];
-
-      @include dark {
-        @apply text-light;
-      }
-    }
-
-    &.h1 {
-      @apply mb-6 mt-14;
-    }
-    &.h2 {
-      @apply mb-6 mt-12;
-    }
-    &.h3 {
-      @apply mb-5 mt-10;
-    }
-    &.h4 {
-      @apply mb-4 mt-8;
-    }
-    &.h5 {
-      @apply mb-4 mt-6;
-    }
-    &.h6 {
-      @apply mb-3 mt-5;
-    }
-
-    &.h1,
-    &.h2,
-    &.h3,
-    &.h4,
-    &.h5,
-    &.h6 {
-      &.first {
-        @apply mt-5;
-      }
-    }
+  .h1 {
+    @apply mb-6 mt-14;
+  }
+  .h2 {
+    @apply mb-6 mt-12;
+  }
+  .h3 {
+    @apply mb-5 mt-10;
+  }
+  .h4 {
+    @apply mb-4 mt-8;
+  }
+  .h5 {
+    @apply mb-4 mt-6;
+  }
+  .h6 {
+    @apply mb-3 mt-5;
+  }
 
-    h1 {
-      @apply text-5xl;
-    }
-    h2 {
-      @apply text-4xl;
-    }
-    h3 {
-      @apply text-3xl;
-    }
-    h4 {
-      @apply text-2xl;
-    }
-    h5 {
-      @apply text-xl;
-    }
-    h6 {
-      @apply text-lg;
-    }
+  h1 {
+    @apply text-5xl;
+  }
+  h2 {
+    @apply text-4xl;
+  }
+  h3 {
+    @apply text-3xl;
+  }
+  h4 {
+    @apply text-2xl;
+  }
+  h5 {
+    @apply text-xl;
+  }
+  h6 {
+    @apply text-lg;
   }
 </style>
diff --git a/svelte-app/src/components/portable-text/serializers/custom-paragraph.svelte b/svelte-app/src/components/portable-text/serializers/custom-paragraph.svelte
index 328f49e03..89a046c1c 100644
--- a/svelte-app/src/components/portable-text/serializers/custom-paragraph.svelte
+++ b/svelte-app/src/components/portable-text/serializers/custom-paragraph.svelte
@@ -6,10 +6,4 @@
   $: ({ value: _value } = portableText);
 </script>
 
-<p><slot /></p>
-
-<style lang="scss">
-  p {
-    @apply my-4 leading-[1.6] transition-[color];
-  }
-</style>
+<p class="my-4 leading-[1.6] transition-[color]"><slot /></p>
diff --git a/svelte-app/src/components/portable-text/serializers/ol-wrapper.svelte b/svelte-app/src/components/portable-text/serializers/ol-wrapper.svelte
index 108b47508..00f3332f5 100644
--- a/svelte-app/src/components/portable-text/serializers/ol-wrapper.svelte
+++ b/svelte-app/src/components/portable-text/serializers/ol-wrapper.svelte
@@ -6,10 +6,4 @@
   $: ({ value: _value } = portableText);
 </script>
 
-<ol class="pt-ol"><slot /></ol>
-
-<style lang="scss">
-  ol {
-    @apply my-6 ml-6 list-decimal leading-8 transition-[color];
-  }
-</style>
+<ol class="pt-ol my-6 ml-6 list-decimal leading-8 transition-[color]"><slot /></ol>
diff --git a/svelte-app/src/components/portable-text/serializers/ul-wrapper.svelte b/svelte-app/src/components/portable-text/serializers/ul-wrapper.svelte
index ea3601b3a..569f93ac4 100644
--- a/svelte-app/src/components/portable-text/serializers/ul-wrapper.svelte
+++ b/svelte-app/src/components/portable-text/serializers/ul-wrapper.svelte
@@ -6,10 +6,4 @@
   $: ({ value: _value } = portableText);
 </script>
 
-<ul class="pt-ul"><slot /></ul>
-
-<style lang="scss">
-  ul {
-    @apply my-6 ml-6 list-disc transition-[color];
-  }
-</style>
+<ul class="pt-ul my-6 ml-6 list-disc transition-[color]"><slot /></ul>
diff --git a/svelte-app/src/components/tooltips/inner.svelte b/svelte-app/src/components/tooltips/inner.svelte
index 2c1eb1f1a..21a043bac 100644
--- a/svelte-app/src/components/tooltips/inner.svelte
+++ b/svelte-app/src/components/tooltips/inner.svelte
@@ -138,26 +138,18 @@
   $: style = `left: ${position.x}px; top: ${position.y}px;`;
 </script>
 
-<div {style} class="tooltip" id={`tooltip-${id}`} bind:this={tooltipElement}>
-  <span class="tooltip-content" transition:fade={{ duration, easing: cubicInOut }}>
+<div
+  {style}
+  class="pointer-events-none absolute z-50"
+  id={`tooltip-${id}`}
+  bind:this={tooltipElement}
+>
+  <span
+    class="block whitespace-nowrap rounded-sm bg-black px-2 py-1 font-code text-sm text-light dark:bg-light dark:text-dark"
+    transition:fade={{ duration, easing: cubicInOut }}
+  >
     {content.trim().length >= MAX_LENGTH
       ? `${content.trim().slice(0, MAX_LENGTH - 3)}...`
       : content.trim()}
   </span>
 </div>
-
-<style lang="scss">
-  @import '@styles/mixins';
-
-  div {
-    @apply pointer-events-none absolute z-50;
-  }
-
-  span {
-    @apply block whitespace-nowrap rounded-sm bg-black px-2 py-1 font-code text-sm text-light;
-
-    @include dark {
-      @apply bg-light text-dark;
-    }
-  }
-</style>
diff --git a/svelte-app/src/routes/+error.svelte b/svelte-app/src/routes/+error.svelte
index 085583de0..295f585f0 100644
--- a/svelte-app/src/routes/+error.svelte
+++ b/svelte-app/src/routes/+error.svelte
@@ -89,10 +89,10 @@
 
 <div data-test-id="error-page">
   <HeadedBlock {heading}>
-    <p>
+    <p class="my-4 text-base">
       {$page.error?.message && $page.status !== 404 ? $page.error.message : $t(message)}
     </p>
-    <p>
+    <p class="my-4 text-base">
       {$t('Please')}
       <Link on:click={() => window.history.back()}>{$t('go back')}</Link>, or <Link
         on:click={() => window.location.reload()}>{$t('refresh the page')}</Link
@@ -104,7 +104,7 @@
     <Divider />
     <ArrowButton align="left" on:click={() => (showStack = !showStack)} fullWidth>
       <span class="flex items-center justify-start gap-2">
-        <p>{$t('See more')}</p>
+        <p class="text-base">{$t('See more')}</p>
         <Icon
           name="ArrowUp"
           size={18}
@@ -122,13 +122,3 @@
     {/if}
   {/if}
 </div>
-
-<style lang="scss">
-  p {
-    @apply my-4 text-base;
-
-    span & {
-      @apply my-0;
-    }
-  }
-</style>
diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
index 872c49eaa..992d50027 100644
--- a/svelte-app/src/routes/+layout.svelte
+++ b/svelte-app/src/routes/+layout.svelte
@@ -120,6 +120,7 @@
 <svelte:body use:classList={[$theme, $loading ? 'is-loading' : 'is-loaded']} />
 
 <span
+  class="focus-outline-sm absolute left-1/2 top-0 z-50 -mt-14 -translate-x-1/2 cursor-pointer rounded-md bg-light px-4 py-2 text-sm font-bold text-dark transition-[margin-top,background-color,color] focus-visible:mt-4 dark:bg-black dark:text-light"
   role="button"
   aria-label={$t('Skip to content')}
   tabindex="0"
@@ -128,7 +129,10 @@
   on:keydown={skipToContent}>{$t('Skip to content')}</span
 >
 
-<div class="main" in:fly={{ delay: 100, duration: 100, y: -40 }}>
+<div
+  class="main relative h-full w-full overflow-x-hidden rounded-xl text-dark dark:text-light lg:text-lg"
+  in:fly={{ delay: 100, duration: 100, y: -40 }}
+>
   <ScrollContainer let:element>
     <ConstrainWidth>
       <Header />
@@ -146,34 +150,3 @@
     <TooltipManager container={element} />
   </ScrollContainer>
 </div>
-
-<style lang="scss">
-  @import '@styles/mixins';
-  @import '@styles/variables';
-
-  span {
-    @apply absolute left-1/2 top-0 z-50 -mt-14 -translate-x-1/2 cursor-pointer rounded-md bg-light px-4 py-2 text-sm font-bold text-dark transition-[margin-top,background-color,color];
-
-    @include focus-state(sm);
-
-    &:focus-visible {
-      @apply mt-4;
-    }
-
-    @include dark {
-      @apply bg-black text-light;
-    }
-  }
-
-  .main {
-    @apply relative h-full w-full overflow-x-hidden rounded-xl text-dark;
-
-    @include media(lg) {
-      @apply text-lg;
-    }
-
-    @include dark {
-      @apply text-light;
-    }
-  }
-</style>
diff --git a/svelte-app/src/routes/[[lang=lang]]/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/+page.svelte
index 3c192ca20..cac3a1973 100644
--- a/svelte-app/src/routes/[[lang=lang]]/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/+page.svelte
@@ -43,7 +43,11 @@
 
 <HeadedBlock heading={$t('Recent thoughts')} let:id>
   {#if data.posts.length}
-    <div role="group" aria-labelledby="{id}-heading">
+    <div
+      class="mb-6 mt-5 flex flex-col gap-y-5"
+      role="group"
+      aria-labelledby="{id}-heading"
+    >
       {#each data.posts as post}
         <ListItem document={post} small />
       {/each}
@@ -55,18 +59,8 @@
       </span>
     </ArrowButton>
   {:else}
-    <div>
-      <p>{$t('No content')}</p>
+    <div class="mb-6 mt-5 flex flex-col gap-y-5">
+      <p class="p-4 font-code">{$t('No content')}</p>
     </div>
   {/if}
 </HeadedBlock>
-
-<style lang="scss">
-  div {
-    @apply mb-6 mt-5 flex flex-col gap-y-5;
-
-    > p {
-      @apply p-4 font-code;
-    }
-  }
-</style>
diff --git a/svelte-app/src/styles/_animations.scss b/svelte-app/src/styles/_animations.scss
deleted file mode 100644
index d68f61db6..000000000
--- a/svelte-app/src/styles/_animations.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@keyframes bounceUp {
-  0%,
-  20%,
-  50%,
-  80%,
-  100% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(-3px);
-  }
-  60% {
-    transform: translateY(-1.5px);
-  }
-}
-@keyframes bounceDown {
-  0%,
-  20%,
-  50%,
-  80%,
-  100% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(3px);
-  }
-  60% {
-    transform: translateY(1.5px);
-  }
-}
-
-.scroll-hover-up svg {
-  animation: bounceUp 2s infinite;
-}
-
-.scroll-hover-down svg {
-  animation: bounceDown 2s infinite;
-}
diff --git a/svelte-app/src/styles/_mixins.scss b/svelte-app/src/styles/_mixins.scss
index b57905311..15389c9f5 100644
--- a/svelte-app/src/styles/_mixins.scss
+++ b/svelte-app/src/styles/_mixins.scss
@@ -1,24 +1,4 @@
-@import 'variables';
-
-/**
-  * Focus state mixin
-  * @param {string} $size - 'sm' or 'lg'
-  */
-@mixin focus-state($size: 'lg') {
-  @apply outline-offset-4 outline-2 outline-accent-light;
-
-  &:focus-visible {
-    @apply outline;
-  }
-
-  @if $size == 'sm' {
-    @apply outline-offset-2;
-  }
-
-  :global(.dark) & {
-    @apply outline-accent-dark;
-  }
-}
+@import 'breakpoints';
 
 @mixin media($key) {
   @if not map-has-key($breakpoints, $key) {
diff --git a/svelte-app/src/styles/_tw.scss b/svelte-app/src/styles/_tw.scss
new file mode 100644
index 000000000..dc3b3ce99
--- /dev/null
+++ b/svelte-app/src/styles/_tw.scss
@@ -0,0 +1,101 @@
+@layer base {
+  body {
+    @apply h-full w-full overflow-x-hidden;
+  }
+
+  @layer base {
+    body,
+    html {
+      height: 100vh;
+      overflow: hidden;
+      transition: background 150ms ease;
+    }
+
+    body,
+    html,
+    div,
+    span,
+    p,
+    img {
+      box-sizing: border-box;
+    }
+  
+    body {
+      @apply bg-black text-light;
+    
+      &.light {
+        @apply bg-light text-dark;
+      }
+
+      &:not(.is-loaded) {
+        cursor: wait !important;
+
+        & a,
+        & button,
+        & [role='button'] {
+          cursor: not-allowed !important;
+        }
+      }
+
+      &.is-loading {
+        cursor: wait !important;
+
+        & a,
+        & button,
+        & [role='button'] {
+          cursor: not-allowed !important;
+        }
+      }
+    }
+    
+    ::selection {
+      @apply bg-accent-light/80 text-light;
+    }
+
+    .dark {
+      ::selection {
+        @apply bg-accent-dark/80 text-dark;
+      }
+    }
+  }
+}
+
+@layer utilities {
+  .focus-outline {
+    @apply outline-offset-4;
+
+    &,
+    &-sm {
+      @apply focus-visible:outline outline-accent-light outline-2 dark:outline-accent-dark;
+    }
+
+    &-sm {
+      @apply outline-offset-2;
+    }
+  }
+}
+
+@layer components {
+  .pt-ol,
+  .pt-ul {
+    li {
+      @apply mb-2 leading-6;
+    }
+  }
+
+  .pt-ol {
+    li {
+      ol {
+        @apply list-[lower-alpha] my-3;
+      }
+    }
+  }
+
+  .pt-ul {
+    li {
+      ul {
+        @apply list-disc my-3;
+      }
+    }
+  }
+}
diff --git a/svelte-app/src/styles/_utils.scss b/svelte-app/src/styles/_utils.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/svelte-app/src/styles/_variables.scss b/svelte-app/src/styles/_variables.scss
deleted file mode 100644
index 5f9bbb078..000000000
--- a/svelte-app/src/styles/_variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'colors';
-@import 'breakpoints';