Use built-in lexxy styles and sprinkle in some overrides

app/assets/stylesheets/cards.css

@@ -229,7 +229,7 @@
     }
 
     lexxy-toolbar {
-      border-block-start: 1px solid var(--color-ink-light);
+      border-block-start: 1px solid var(--lexxy-border-color);
     }
 
     & ~ .btn.btn--reversed {

app/assets/stylesheets/lexxy.css

@@ -1,7 +1,34 @@
-@layer components {
-  /* Editor
-  /* ------------------------------------------------------------------------ */
+@import url("lexxy-variables.css") layer(base);
+@import url("lexxy-content.css") layer(base);
+@import url("lexxy-editor.css") layer(base);
 
+@layer components {
   lexxy-editor {
+    --lexxy-border-color: oklch(var(--lch-ink-darkest) / 20%);
+    --lexxy-editor-padding: 0;
+    --lexxy-toolbar-button-size: 2rem;
+    --lexxy-toolbar-gap: 0;
+
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+  }
+
+  lexxy-toolbar {
+    border-color: var(--lexxy-border-color);
+  }
+
+  .lexxy-editor__toolbar-button {
+    background: transparent;
+
+    @media(any-hover: hover) {
+      &:hover {
+        background-color: color-mix(in srgb, transparent, var(--color-ink) 10%);
+      }
+    }
+  }
+
+  .lexxy-editor__content {
+    margin-block-start: 0.5lh;
   }
 }

app/views/layouts/shared/_head.html.erb

@@ -16,9 +16,6 @@
   <% turbo_refreshes_with method: :morph, scroll: :preserve %>
 
   <%= render "layouts/theme_preference" %>
-  <%= stylesheet_link_tag "lexxy-variables" %>
-  <%= stylesheet_link_tag "lexxy-content" %>
-  <%= stylesheet_link_tag "lexxy-editor" %>
   <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
   <%= stylesheet_link_tag "fizzy/saas", "data-turbo-track": "reload" if Fizzy.saas? %>
   <%= javascript_importmap_tags %>