fix: remove :global() from app.css — it's only valid in Svelte <style> blocks

Vite processes imported .css files as plain CSS, not Svelte styles.
:global() is a Svelte-specific directive that only works inside
component <style> tags. In standalone .css files it gets mangled into
invalid :is(:global(...)) selectors. Since Vite-imported CSS is already
global by nature, removing :global() wrappers produces correct output.

src/app.css

@@ -1,7 +1,13 @@
-:global(body) {
+body {
     margin: 0;
     padding: 0;
-	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-family:
+        "Space Grotesk",
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        sans-serif;
     background: #f9fafb;
     color: #1f2937;
     -webkit-font-smoothing: antialiased;
@@ -9,23 +15,32 @@
     line-height: 1.5;
 }
 
-:global(*),
-:global(*::before),
-:global(*::after) {
+*,
+*::before,
+*::after {
     box-sizing: border-box;
 }
 
-:global(h1, h2, h3, h4, h5, h6, p) {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
     margin: 0;
 }
 
-:global(button, input, select, textarea) {
+button,
+input,
+select,
+textarea {
     font-family: inherit;
     font-size: inherit;
     color: inherit;
 }
 
-:global(select) {
+select {
     appearance: none;
     -webkit-appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
@@ -34,20 +49,20 @@
     padding-right: 2rem;
 }
 
-:global(input[type='range']) {
+input[type="range"] {
     appearance: none;
     -webkit-appearance: none;
     background: transparent;
     cursor: pointer;
 }
 
-:global(input[type='range']::-webkit-slider-runnable-track) {
+input[type="range"]::-webkit-slider-runnable-track {
     height: 6px;
     border-radius: 3px;
     background: #e5e7eb;
 }
 
-:global(input[type='range']::-webkit-slider-thumb) {
+input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 20px;
@@ -59,13 +74,13 @@
     margin-top: -7px;
 }
 
-:global(input[type='range']::-moz-range-track) {
+input[type="range"]::-moz-range-track {
     height: 6px;
     border-radius: 3px;
     background: #e5e7eb;
 }
 
-:global(input[type='range']::-moz-range-thumb) {
+input[type="range"]::-moz-range-thumb {
     width: 20px;
     height: 20px;
     border-radius: 50%;

src/app.html

@@ -6,7 +6,10 @@
         <meta name="text-scale" content="scale" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap"
+            rel="stylesheet"
+        />
         <title>English Style Converter</title>
         %sveltekit.head%
     </head>