More docs stuff (#13769)

* fix

* link

* more docs stuff

* more

* more

* fix

* more

* more

* fix

* fix

* more

* ffs

* FML

Author: Rich-Harris

documentation/docs/01-introduction/03-svelte-files.md

@@ -66,4 +66,4 @@ CSS inside a `<style>` block will be scoped to that component.
 </style>
 ```
 
-For more information regarding styling, read the documentation around [styles and classes](styles-and-classes).
+For more information, head to the section on [styling](scoped-styles).

documentation/docs/02-runes/04-$effect.md

@@ -95,7 +95,7 @@ $effect(() => {
 });
 ```
 
-An effect only reruns when the object it reads changes, not when a property inside it changes. (If you want to observe changes _inside_ an object at dev time, you can use [`$inspect`](debugging#$inspect).)
+An effect only reruns when the object it reads changes, not when a property inside it changes. (If you want to observe changes _inside_ an object at dev time, you can use [`$inspect`]($inspect).)
 
 ```svelte
 <script>

documentation/docs/03-template-syntax/[email protected]

@@ -22,7 +22,7 @@ It also will not compile Svelte code.
 
 ## Styling
 
-Content rendered this way is 'invisible' to Svelte and as such will not receive [scoped styles](styles-and-classes) — in other words, this will not work, and the `a` and `img` styles will be regarded as unused:
+Content rendered this way is 'invisible' to Svelte and as such will not receive [scoped styles](scoped-styles) — in other words, this will not work, and the `a` and `img` styles will be regarded as unused:
 
 <!-- prettier-ignore -->
 ```svelte

documentation/docs/07-misc/01-debugging.md renamed to documentation/docs/03-template-syntax/[email protected]

@@ -1,28 +1,7 @@
 ---
-title: Debugging
+title: {@debug ...}
 ---
 
-- `@debug`
-- `$inspect`
-
-Svelte provides two built-in ways to debug your application.
-
-## `$inspect`
-
-TODO
-
-## @debug
-
-```svelte
-<!--- copy: false --->
-{@debug}
-```
-
-```svelte
-<!--- copy: false --->
-{@debug var1, var2, ..., varN}
-```
-
 The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.
 
 ```svelte
@@ -53,3 +32,4 @@ The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the
 ```
 
 The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when _any_ state changes, as opposed to the specified variables.
+

documentation/docs/03-template-syntax/10-bind.md renamed to documentation/docs/03-template-syntax/11-bind.md

@@ -249,14 +249,14 @@ To get a reference to a DOM node, use `bind:this`. The value will be `undefined`
 Components also support `bind:this`, allowing you to interact with component instances programmatically.
 
 ```svelte
-<!--- App.svelte --->
+<!--- file: App.svelte --->
 <ShoppingCart bind:this={cart} />
 
 <button onclick={() => cart.empty()}> Empty shopping cart </button>
 ```
 
 ```svelte
-<!--- ShoppingCart.svelte --->
+<!--- file: ShoppingCart.svelte --->
 <script>
 	// All instance exports are available on the instance object
 	export function empty() {
@@ -279,7 +279,7 @@ You can bind to component props using the same syntax as for elements.
 
 While Svelte props are reactive without binding, that reactivity only flows downward into the component by default. Using `bind:property` allows changes to the property from within the component to flow back up out of the component.
 
-To mark a property as bindable, use the `$bindable` rune:
+To mark a property as bindable, use the [`$bindable`]($bindable) rune:
 
 ```svelte
 <script>