custom css works now

src/routes/Settings.svelte

@@ -13,6 +13,7 @@
   import { instanceDomain } from '$lib/api/endpoints'
   import { displayNameOf, profilePath } from '$lib/util/profile'
   import Module from '$components/common/Module.svelte'
+  import PublishedCssEditor from '$components/profile/PublishedCssEditor.svelte'
 
   const { session, theme } = useAppServices()
 
@@ -130,11 +131,15 @@
       </ul>
     </Module>
 
-    <Module title="Your CSS" variant="band">
+    <Module title="CSS for this browser only" variant="band">
+      <p class="notice">
+        <strong>Private viewing setting:</strong>
+        this changes how plspace looks only for you, in this browser. It does not update your
+        profile, and nobody else can see it.
+      </p>
       <p>
-        This is applied to every page you view in plspace. Overriding the custom properties in
-        <code>styles/tokens.css</code> retints the entire app; the class hooks below let you go
-        further.
+        Overriding the custom properties in <code>styles/tokens.css</code> retints the entire app;
+        the class hooks below let you go further.
       </p>
 
       <label class="visually-hidden" for="viewer-css">Your CSS</label>
@@ -174,32 +179,22 @@
         </span>
       </label>
       <p class="field-hint">
-        A profile can publish a stylesheet by putting CSS in a profile field named
-        {#each CSS_FIELD_NAMES as name, index (name)}<code>{name}</code>{#if index < CSS_FIELD_NAMES.length - 1}, {/if}{/each}.
+        plspace publishes layouts in ordered fields named <code>plspace:css1</code>,
+        <code>plspace:css2</code>, and so on. Legacy
+        {#each CSS_FIELD_NAMES as name, index (name)}<code>{name}</code>{#if index < CSS_FIELD_NAMES.length - 1}, {/if}{/each}
+        fields are still understood.
         Their rules are rewritten to apply only inside <code>{PROFILE_SCOPE}</code>, so a profile
         can restyle its own page but not the rest of plspace.
       </p>
     </Module>
 
-    <Module title="Publish your own layout" variant="band">
+    <Module title="CSS published on your profile" variant="band">
       <p>
-        Add a profile field on <strong>{domain || 'your server'}</strong> named <code>css</code> and
-        paste a stylesheet into its value. Anyone viewing your profile in plspace sees it. Since
-        it's an ordinary profile field, it survives elsewhere too &mdash; other clients just show it
-        as text.
+        This editor writes the layout into profile fields on
+        <strong>{domain || 'your server'}</strong>. Anyone who visits your profile with plspace
+        will receive it automatically.
       </p>
-      {#if session.signedIn}
-        <p>
-          <a
-            class="button"
-            href={`https://${session.host}/settings/profile`}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Edit your profile on {domain}
-          </a>
-        </p>
-      {/if}
+      <PublishedCssEditor />
     </Module>
 
     <Module title="Class reference" variant="band">