style(breakpoints): consolidate 9 ad-hoc values into 5 SCSS tokens

Adds src/styles/_breakpoints.scss with five canonical tokens
(\$bp-sm 600, \$bp-md 800, \$bp-lg 1024, \$bp-xl 1280, \$bp-2xl 1600)
and migrates all 15 @media (max-width: ...) occurrences across 9 files.
Configures vite.config.ts with scss loadPaths so any file can
@use "breakpoints" without relative paths.

Conservative rounding-up where existing values were near-duplicates:
500 and 512 collapse to 600, 768 collapses to 800, 1000 collapses to
1024. Slightly more viewports get the smaller-layout treatment in
those bands, which is usually beneficial on cramped widths.

Converts 7 Svelte files from <style> to <style lang="scss"> to access
the SCSS tokens. SCSS is a CSS superset, so existing rules stay valid.

4 files changed, 19 insertions, 11 deletions

diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte
index bca1554c..4a6fa3d7 100644
--- a/src/lib/Landing.svelte
+++ b/src/lib/Landing.svelte
@@ -279,7 +279,9 @@ $effect(() => {
   </div>
 {/if}
 
-<style>
+<style lang="scss">
+  @use "breakpoints" as *;
+
   .landing {
     display: flex;
     flex-direction: column;
@@ -518,7 +520,7 @@ $effect(() => {
     }
   }
 
-  @media (max-width: 1000px) {
+  @media (max-width: $bp-lg) {
     .tools-and-demo {
       grid-template-columns: 1fr 1fr;
     }
@@ -529,7 +531,7 @@ $effect(() => {
     }
   }
 
-  @media (max-width: 800px) {
+  @media (max-width: $bp-md) {
     .section-row,
     .section-row.reverse {
       flex-direction: column;
@@ -564,7 +566,7 @@ $effect(() => {
     }
   }
 
-  @media (max-width: 500px) {
+  @media (max-width: $bp-sm) {
     .tools-and-demo {
       grid-template-columns: 1fr;
     }
diff --git a/src/lib/LandingHero.svelte b/src/lib/LandingHero.svelte
index 66729335..bec9d1f4 100644
--- a/src/lib/LandingHero.svelte
+++ b/src/lib/LandingHero.svelte
@@ -51,7 +51,9 @@ const scrollPastHero = () => {
   </button>
 </section>
 
-<style>
+<style lang="scss">
+  @use "breakpoints" as *;
+
   .hero {
     min-height: calc(100dvh - 8rem);
     display: flex;
@@ -172,7 +174,7 @@ const scrollPastHero = () => {
     }
   }
 
-  @media (max-width: 600px) {
+  @media (max-width: $bp-sm) {
     .hero {
       min-height: calc(100vh - 6rem);
       padding: 1.5rem;
diff --git a/src/lib/Schedule/Days.svelte b/src/lib/Schedule/Days.svelte
index ec36be5c..9ecf76b9 100644
--- a/src/lib/Schedule/Days.svelte
+++ b/src/lib/Schedule/Days.svelte
@@ -218,7 +218,9 @@ const episode = (media: Media, weekday: string) => {
   <RateLimitedError type="Media lists" loginSessionError={false} card list={false} />
 {/await}
 
-<style>
+<style lang="scss">
+  @use "breakpoints" as *;
+
   .countdown {
     white-space: nowrap;
     float: right;
@@ -237,7 +239,7 @@ const episode = (media: Media, weekday: string) => {
     page-break-inside: avoid;
   }
 
-  @media (max-width: 800px) {
+  @media (max-width: $bp-md) {
     .cover-title-element {
       display: none;
     }
@@ -247,7 +249,7 @@ const episode = (media: Media, weekday: string) => {
     }
   }
 
-  @media (max-width: 1600px) {
+  @media (max-width: $bp-2xl) {
     .cover-title-element {
       display: none;
     }
diff --git a/src/lib/User/BadgeWall/BadgePreview.svelte b/src/lib/User/BadgeWall/BadgePreview.svelte
index e651a2aa..104a53da 100644
--- a/src/lib/User/BadgeWall/BadgePreview.svelte
+++ b/src/lib/User/BadgeWall/BadgePreview.svelte
@@ -218,7 +218,9 @@ const onClick = (event: MouseEvent) => {
   </div>
 {/if}
 
-<style>
+<style lang="scss">
+  @use "breakpoints" as *;
+
   :global(.badge-preview img) {
     border-radius: 8px;
     max-height: 50vh;
@@ -239,7 +241,7 @@ const onClick = (event: MouseEvent) => {
     gap: 1rem;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: $bp-md) {
     .badge-preview {
       flex-direction: column;
     }