@docx-editor.dev/core 2.0.1 → 2.1.0

package/dist/editor.css

@@ -1,3 +1,42 @@
+.docx-editor :is(.transform), .docx-editor :is([data-side="bottom"]), .docx-editor :is([data-side="top"]) {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+}
+
+.docx-editor :is(.shadow-lg), .docx-editor :is(.shadow-sm) {
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+}
+
+.docx-editor :is(.ring), .docx-editor :is(.focus\:ring-1), .docx-editor :is(.focus-visible\:ring-2) {
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+}
+
+.docx-editor :is(.blur), .docx-editor :is(.filter) {
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+}
 /**
  * DOCX Editor Styles — SINGLE SOURCE OF TRUTH.
  *
@@ -10,23 +49,762 @@
  *
  * Contains:
  * - CSS custom properties / color tokens (shadcn-compatible + --doc-* chrome
- *   palette) and the .ep-root.dark scaffold
+ *   palette) and the .docx-editor.dark scaffold
  * - Cursor/caret, selection, content-control, popup/menu chrome, etc.
  *
- * NOTE: `@tailwind utilities` lives here so the directive is shared; each
- * adapter's own Tailwind build (React via the CLI, Vue via vite PostCSS)
- * expands it against that adapter's component sources. We intentionally do NOT
- * include @tailwind base (preflight) to avoid resetting the host application.
+ * NOTE: `@tailwind utilities` lives here so the directive is shared. The CORE
+ * BUILD expands it (scripts/build-core-styles.mjs + tailwind.dist.config.cjs):
+ * dist/editor.css ships fully compiled, every utility scoped under `.docx-editor`,
+ * with no Tailwind directive left for a host pipeline to reinterpret — a host
+ * app's own Tailwind must never expand our directive against ITS config, and a
+ * host with no Tailwind still needs the chrome styled. In-repo examples that
+ * import this SOURCE file keep expanding it with their own Tailwind build for
+ * dev. We intentionally do NOT include @tailwind base (preflight) here to
+ * avoid resetting the host application; the dist build prepends it with
+ * preflight disabled purely for the `--tw-*` custom-property defaults.
  */
 
-@tailwind utilities;
+.docx-editor .\!visible {
+  visibility: visible !important;
+}
+
+.docx-editor .visible {
+  visibility: visible;
+}
+
+.docx-editor .invisible {
+  visibility: hidden;
+}
+
+.docx-editor .collapse {
+  visibility: collapse;
+}
+
+.docx-editor .static {
+  position: static;
+}
+
+.docx-editor .fixed {
+  position: fixed;
+}
+
+.docx-editor .absolute {
+  position: absolute;
+}
+
+.docx-editor .relative {
+  position: relative;
+}
+
+.docx-editor .sticky {
+  position: sticky;
+}
+
+.docx-editor .right-2 {
+  right: 0.5rem;
+}
+
+.docx-editor .isolate {
+  isolation: isolate;
+}
+
+.docx-editor .z-50 {
+  z-index: 50;
+}
+
+.docx-editor .-mx-1 {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+
+.docx-editor .mx-1\.5 {
+  margin-left: 0.375rem;
+  margin-right: 0.375rem;
+}
+
+.docx-editor .mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.docx-editor .my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.docx-editor .-ml-1 {
+  margin-left: -0.25rem;
+}
+
+.docx-editor .mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.docx-editor .ml-auto {
+  margin-left: auto;
+}
+
+.docx-editor .block {
+  display: block;
+}
+
+.docx-editor .inline-block {
+  display: inline-block;
+}
+
+.docx-editor .\!inline {
+  display: inline !important;
+}
+
+.docx-editor .inline {
+  display: inline;
+}
+
+.docx-editor .flex {
+  display: flex;
+}
+
+.docx-editor .inline-flex {
+  display: inline-flex;
+}
+
+.docx-editor .\!table {
+  display: table !important;
+}
+
+.docx-editor .table {
+  display: table;
+}
+
+.docx-editor .table-cell {
+  display: table-cell;
+}
+
+.docx-editor .grid {
+  display: grid;
+}
+
+.docx-editor .contents {
+  display: contents;
+}
+
+.docx-editor .hidden {
+  display: none;
+}
+
+.docx-editor .h-10 {
+  height: 2.5rem;
+}
+
+.docx-editor .h-11 {
+  height: 2.75rem;
+}
+
+.docx-editor .h-3\.5 {
+  height: 0.875rem;
+}
+
+.docx-editor .h-4 {
+  height: 1rem;
+}
+
+.docx-editor .h-5 {
+  height: 1.25rem;
+}
+
+.docx-editor .h-6 {
+  height: 1.5rem;
+}
+
+.docx-editor .h-7 {
+  height: 1.75rem;
+}
+
+.docx-editor .h-8 {
+  height: 2rem;
+}
+
+.docx-editor .h-9 {
+  height: 2.25rem;
+}
+
+.docx-editor .h-\[var\(--radix-select-trigger-height\)\] {
+  height: var(--radix-select-trigger-height);
+}
+
+.docx-editor .h-px {
+  height: 1px;
+}
+
+.docx-editor .max-h-72 {
+  max-height: 18rem;
+}
+
+.docx-editor .max-h-\[300px\] {
+  max-height: 300px;
+}
+
+.docx-editor .max-h-\[400px\] {
+  max-height: 400px;
+}
+
+.docx-editor .min-h-\[36px\] {
+  min-height: 36px;
+}
+
+.docx-editor .w-10 {
+  width: 2.5rem;
+}
+
+.docx-editor .w-3\.5 {
+  width: 0.875rem;
+}
+
+.docx-editor .w-4 {
+  width: 1rem;
+}
+
+.docx-editor .w-5 {
+  width: 1.25rem;
+}
+
+.docx-editor .w-7 {
+  width: 1.75rem;
+}
+
+.docx-editor .w-8 {
+  width: 2rem;
+}
+
+.docx-editor .w-9 {
+  width: 2.25rem;
+}
+
+.docx-editor .w-full {
+  width: 100%;
+}
+
+.docx-editor .w-px {
+  width: 1px;
+}
+
+.docx-editor .min-w-0 {
+  min-width: 0px;
+}
+
+.docx-editor .min-w-\[100px\] {
+  min-width: 100px;
+}
+
+.docx-editor .min-w-\[260px\] {
+  min-width: 260px;
+}
+
+.docx-editor .min-w-\[55px\] {
+  min-width: 55px;
+}
+
+.docx-editor .min-w-\[64px\] {
+  min-width: 64px;
+}
+
+.docx-editor .min-w-\[8rem\] {
+  min-width: 8rem;
+}
+
+.docx-editor .min-w-\[var\(--radix-select-trigger-width\)\] {
+  min-width: var(--radix-select-trigger-width);
+}
+
+.docx-editor .max-w-\[300px\] {
+  max-width: 300px;
+}
+
+.docx-editor .flex-1 {
+  flex: 1 1 0%;
+}
+
+.docx-editor .flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.docx-editor .shrink {
+  flex-shrink: 1;
+}
+
+.docx-editor .shrink-0 {
+  flex-shrink: 0;
+}
+
+.docx-editor .transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.docx-editor .cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.docx-editor .cursor-pointer {
+  cursor: pointer;
+}
+
+.docx-editor .select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.docx-editor .resize {
+  resize: both;
+}
+
+.docx-editor .flex-col {
+  flex-direction: column;
+}
+
+.docx-editor .items-center {
+  align-items: center;
+}
+
+.docx-editor .items-stretch {
+  align-items: stretch;
+}
+
+.docx-editor .justify-center {
+  justify-content: center;
+}
+
+.docx-editor .justify-between {
+  justify-content: space-between;
+}
+
+.docx-editor .gap-0\.5 {
+  gap: 0.125rem;
+}
+
+.docx-editor .gap-1 {
+  gap: 0.25rem;
+}
+
+.docx-editor .gap-2 {
+  gap: 0.5rem;
+}
+
+.docx-editor .gap-px {
+  gap: 1px;
+}
+
+.docx-editor .overflow-hidden {
+  overflow: hidden;
+}
+
+.docx-editor .overflow-x-auto {
+  overflow-x: auto;
+}
+
+.docx-editor .truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.docx-editor .whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.docx-editor .rounded {
+  border-radius: 0.25rem;
+}
+
+.docx-editor .rounded-full {
+  border-radius: 9999px;
+}
+
+.docx-editor .rounded-lg {
+  border-radius: var(--radius);
+}
+
+.docx-editor .rounded-md {
+  border-radius: calc(var(--radius) - 2px);
+}
+
+.docx-editor .rounded-none {
+  border-radius: 0px;
+}
+
+.docx-editor .rounded-l-none {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.docx-editor .rounded-r-none {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.docx-editor .border {
+  border-width: 1px;
+}
+
+.docx-editor .border-0 {
+  border-width: 0px;
+}
+
+.docx-editor .border-r {
+  border-right-width: 1px;
+}
+
+.docx-editor .border-border {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
+}
+
+.docx-editor .border-border\/50 {
+  border-color: hsl(var(--border) / 0.5);
+}
+
+.docx-editor .border-input {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
+}
+
+.docx-editor .bg-background {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
+}
+
+.docx-editor .bg-border {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--border) / var(--tw-bg-opacity, 1));
+}
+
+.docx-editor .bg-destructive {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
+}
+
+.docx-editor .bg-doc-bg {
+  background-color: var(--doc-bg);
+}
+
+.docx-editor .bg-doc-bg-input {
+  background-color: var(--doc-bg-input);
+}
+
+.docx-editor .bg-doc-surface {
+  background-color: var(--doc-surface);
+}
+
+.docx-editor .bg-foreground {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--foreground) / var(--tw-bg-opacity, 1));
+}
+
+.docx-editor .bg-muted {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
+}
+
+.docx-editor .bg-popover {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--popover) / var(--tw-bg-opacity, 1));
+}
+
+.docx-editor .bg-primary {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
+}
+
+.docx-editor .bg-secondary {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--secondary) / var(--tw-bg-opacity, 1));
+}
+
+.docx-editor .bg-transparent {
+  background-color: transparent;
+}
+
+.docx-editor .p-1 {
+  padding: 0.25rem;
+}
+
+.docx-editor .px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.docx-editor .px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+
+.docx-editor .px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.docx-editor .px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.docx-editor .px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.docx-editor .px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.docx-editor .py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.docx-editor .py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.docx-editor .py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.docx-editor .py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.docx-editor .py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
+.docx-editor .pb-1 {
+  padding-bottom: 0.25rem;
+}
+
+.docx-editor .pl-3 {
+  padding-left: 0.75rem;
+}
+
+.docx-editor .pr-1 {
+  padding-right: 0.25rem;
+}
+
+.docx-editor .pt-2 {
+  padding-top: 0.5rem;
+}
+
+.docx-editor .text-left {
+  text-align: left;
+}
+
+.docx-editor .text-center {
+  text-align: center;
+}
+
+.docx-editor .text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.docx-editor .text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.docx-editor .text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.docx-editor .font-medium {
+  font-weight: 500;
+}
+
+.docx-editor .font-normal {
+  font-weight: 400;
+}
+
+.docx-editor .uppercase {
+  text-transform: uppercase;
+}
+
+.docx-editor .lowercase {
+  text-transform: lowercase;
+}
+
+.docx-editor .italic {
+  font-style: italic;
+}
+
+.docx-editor .leading-tight {
+  line-height: 1.25;
+}
+
+.docx-editor .text-destructive {
+  --tw-text-opacity: 1;
+  color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
+}
+
+.docx-editor .text-destructive-foreground {
+  --tw-text-opacity: 1;
+  color: hsl(var(--destructive-foreground) / var(--tw-text-opacity, 1));
+}
+
+.docx-editor .text-doc-text {
+  color: var(--doc-text);
+}
+
+.docx-editor .text-foreground {
+  --tw-text-opacity: 1;
+  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
+}
+
+.docx-editor .text-muted-foreground {
+  --tw-text-opacity: 1;
+  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
+}
+
+.docx-editor .text-popover-foreground {
+  --tw-text-opacity: 1;
+  color: hsl(var(--popover-foreground) / var(--tw-text-opacity, 1));
+}
+
+.docx-editor .text-primary {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
+}
+
+.docx-editor .text-primary-foreground {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
+}
+
+.docx-editor .text-secondary-foreground {
+  --tw-text-opacity: 1;
+  color: hsl(var(--secondary-foreground) / var(--tw-text-opacity, 1));
+}
+
+.docx-editor .text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.docx-editor .underline {
+  text-decoration-line: underline;
+}
+
+.docx-editor .underline-offset-4 {
+  text-underline-offset: 4px;
+}
+
+.docx-editor .opacity-30 {
+  opacity: 0.3;
+}
+
+.docx-editor .opacity-50 {
+  opacity: 0.5;
+}
+
+.docx-editor .shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.docx-editor .shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.docx-editor .outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.docx-editor .outline {
+  outline-style: solid;
+}
+
+.docx-editor .ring {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.docx-editor .ring-offset-background {
+  --tw-ring-offset-color: hsl(var(--background) / 1);
+}
+
+.docx-editor .blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.docx-editor .filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.docx-editor .transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.docx-editor .transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.docx-editor .duration-150 {
+  transition-duration: 150ms;
+}
+
+.docx-editor .ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+@keyframes docx-editor-enter {
+
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
+  }
+}
+
+@keyframes docx-editor-exit {
+
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
+  }
+}
+
+.docx-editor .duration-150 {
+  animation-duration: 150ms;
+}
+
+.docx-editor .ease-out {
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.docx-editor .running {
+  animation-play-state: running;
+}
 
 /* ============================================================================
   * CSS CUSTOM PROPERTIES (shadcn theme)
   * ============================================================================ */
 
-/* Scoped to .ep-root to avoid clashing with host application CSS variables */
-.ep-root {
+/* Scoped to .docx-editor to avoid clashing with host application CSS variables */
+.docx-editor {
   /* ----------------------------------------------------------------------
     * shadcn / Tailwind tokens (HSL triples). These back the Tailwind utility
     * classes (bg-primary, text-foreground, bg-muted, ...). These are the
@@ -58,7 +836,7 @@
   /* ======================================================================
     * Document-editor chrome palette — the single source of truth for UI
     * colors. Components reference these via var(--doc-*); component styles
-    * carry no raw hex/rgba. Override the whole set under .ep-root.dark to
+    * carry no raw hex/rgba. Override the whole set under .docx-editor.dark to
     * theme the UI. The document canvas is painted from the .docx and is
     * intentionally NOT themed here (it stays Word-faithful, like a page in
     * Word/Google Docs that stays white regardless of app chrome).
@@ -146,7 +924,7 @@
      something did. */
   /* Per-AUTHOR review colours. OOXML carries no colour on a revision — Word assigns one per
      author in the application — so this ramp is presentation policy, and overriding a slot
-     under `.ep-root` restyles both the painted document and the review cards. Chosen to stay
+     under `.docx-editor` restyles both the painted document and the review cards. Chosen to stay
      distinguishable from each other and from the black body text. */
   --doc-review-author-0: #c0392b;
   --doc-review-author-1: #1f6fb2;
@@ -190,7 +968,7 @@
    *
    * Declared here for the DEFAULT theme, which it was not: `--doc-page-bg` existed only
    * inside the dark block (and a dark print override), so
-   * `.ep-one-surface__page { background: var(--doc-page-bg) }` resolved to nothing in light
+   * `.docx-editor-one-surface__page { background: var(--doc-page-bg) }` resolved to nothing in light
    * mode and the sheet painted TRANSPARENT — a box-shadow around a see-through interior,
    * because neither the viewport nor the surface sets a background either. The same silent
    * `var()` failure as the caret, in the same file, found by the scope-aware token check
@@ -216,10 +994,16 @@
    * for the inverted canvas.
    *
    * This was missing entirely and only ever declared in the dark block, so
-   * `.ep-one-surface__caret { background: var(--doc-caret) }` resolved to nothing in the
+   * `.docx-editor-one-surface__caret { background: var(--doc-caret) }` resolved to nothing in the
    * default theme and painted a 1px transparent div — the caret was correctly positioned,
-   * visible and non-blinking-off, and simply had no colour. */
+   * visible and non-blinking-off, and simply had no colour.
+   *
+   * `--doc-caret-contrast` is its complement, drawn as a 1px ring so the insertion point
+   * survives a backdrop the core colour disappears into (see `.docx-editor-one-surface__caret`).
+   * The two are transformed together by the dark page's inversion, so their contrast with
+   * each other holds in both themes. */
   --doc-caret: #202124;
+  --doc-caret-contrast: #ffffff;
 
   /* Document scroll container scrollbar */
   --doc-scrollbar-size: 14px;
@@ -229,23 +1013,23 @@
 }
 
 /* ========================================================================
-  * Dark theme. Add the `dark` class to the .ep-root element to enable it
+  * Dark theme. Add the `dark` class to the .docx-editor element to enable it
   * (Tailwind darkMode: ['class'] is already configured). Theming is driven by
   * these token overrides — every UI token above is re-pointed here, so all
   * chrome re-themes automatically. The document canvas is left untouched on
   * purpose: it must stay Word-faithful.
   *
-  * NOTE: because `important: '.ep-root'` emits `dark:` utilities as
-  * `.ep-root .dark\:x:is(.dark *)`, those variants only match DESCENDANTS of a
-  * `.dark` element — NOT the `.ep-root.dark` element itself. So theme the root
+  * NOTE: because `important: '.docx-editor'` emits `dark:` utilities as
+  * `.docx-editor .dark\:x:is(.dark *)`, those variants only match DESCENDANTS of a
+  * `.dark` element — NOT the `.docx-editor.dark` element itself. So theme the root
   * via these token overrides (as below), never via a `dark:` utility placed
-  * directly on the `.ep-root` node.
+  * directly on the `.docx-editor` node.
   * ====================================================================== */
-/* Also targets nested `.ep-root` elements (e.g. the paged-editor root, Radix
-  * portals) so the base `.ep-root` light tokens don't shadow these inside a
+/* Also targets nested `.docx-editor` elements (e.g. the paged-editor root, Radix
+  * portals) so the base `.docx-editor` light tokens don't shadow these inside a
   * dark tree. */
-.ep-root.dark,
-.ep-root.dark .ep-root {
+.docx-editor.dark,
+.docx-editor.dark .docx-editor {
   /* Palette sampled from Microsoft Word Online dark mode (chrome + canvas).
     * shadcn / Tailwind tokens (HSL triples) — mirror the --doc-* chrome values
     * below so shadcn-based components (Select, Button) re-theme in lockstep. */
@@ -345,13 +1129,14 @@
     * page (it's a sibling, not filtered), so a black caret would be invisible —
     * point it at a light colour in dark mode. */
   --doc-caret: #e8e8e8;
+  --doc-caret-contrast: #202124;
 }
 
 /* Smart lightness inversion of the document canvas — the heart of dark mode.
   * invert(1) hue-rotate(180deg) flips lightness but preserves hue for ALL
   * authored colors, so nothing is unreadable. Media is double-inverted back so
   * photos/logos render normally. */
-.ep-root.dark .layout-page,
+.docx-editor.dark .layout-page,
 /* The paginated lane paints its content into `.docx-page-content`; inverting the page
    FRAME as well would flip the paper itself, so the sheet keeps its own token background
    and only the content it holds is lightness-inverted. */
@@ -361,8 +1146,8 @@
    where it clamps to zero, landing on a dark olive that reads as a redaction bar. Word keeps
    a highlight its authored colour, so the run is inverted back — the same treatment media
    already gets, for the same reason. */
-.ep-root.dark .docx-page-content [data-highlight],
-.ep-root.dark .layout-page [data-highlight] {
+.docx-editor.dark .docx-page-content [data-highlight],
+.docx-editor.dark .layout-page [data-highlight] {
   filter: invert(1) hue-rotate(180deg);
 }
 
@@ -370,10 +1155,13 @@
    the filter receives, not what the user sees. A normal blue came out orange; this is the
    pre-image that inverts back to the accent blue. The comment further up claiming the
    selection overlay sits outside the inverted page is true of the legacy lane only. */
-.ep-root.dark .docx-page-content ::selection {
+.docx-editor.dark .docx-page-content ::-moz-selection {
+  background-color: rgba(177, 98, 0, 0.32);
+}
+.docx-editor.dark .docx-page-content ::selection {
   background-color: rgba(177, 98, 0, 0.32);
 }
-.ep-root.dark .docx-page-content {
+.docx-editor.dark .docx-page-content {
   /* contrast(0.92) softens the pure black/white extremes a plain invert
     * produces, landing on Word's gentler off-white text / dark-grey fills
     * rather than #fff on #000. */
@@ -385,26 +1173,26 @@
 /* The ring replaces the page frame's drop shadow, so it belongs to the FRAME. Applied to
    the content box as well it outlined the text area — a box Word never draws — while the
    real page edge lost its separation from the workspace. */
-.ep-root.dark .layout-page {
+.docx-editor.dark .layout-page {
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) !important;
 }
-.ep-root.dark .layout-page img,
-.ep-root.dark .layout-page svg,
-.ep-root.dark .layout-page canvas,
-.ep-root.dark .layout-page video,
-.ep-root.dark .layout-page [data-no-color-invert],
-.ep-root.dark .docx-page-content img,
-.ep-root.dark .docx-page-content svg,
-.ep-root.dark .docx-page-content canvas,
-.ep-root.dark .docx-page-content video,
-.ep-root.dark .docx-page-content [data-no-color-invert] {
+.docx-editor.dark .layout-page img,
+.docx-editor.dark .layout-page svg,
+.docx-editor.dark .layout-page canvas,
+.docx-editor.dark .layout-page video,
+.docx-editor.dark .layout-page [data-no-color-invert],
+.docx-editor.dark .docx-page-content img,
+.docx-editor.dark .docx-page-content svg,
+.docx-editor.dark .docx-page-content canvas,
+.docx-editor.dark .docx-page-content video,
+.docx-editor.dark .docx-page-content [data-no-color-invert] {
   filter: invert(1) hue-rotate(180deg);
 }
 
 /* Printing is always on white paper: drop the inversion and paint the page
   * white with black text (matches Word, saves toner). */
 @media print {
-  .ep-root.dark {
+  .docx-editor.dark {
     --doc-page-bg: #ffffff;
     /* The colour a sheet is PAINTED. In the legacy lane the page is lightness-inverted, so
      `--doc-page-bg` is a pre-filter value and this is what it lands on; the paginated lane
@@ -416,11 +1204,11 @@
      lands on near-white. */
     --doc-page-text: #000000;
   }
-  .ep-root.dark .layout-page,
-  .ep-root.dark .layout-page img,
-  .ep-root.dark .layout-page svg,
-  .ep-root.dark .layout-page canvas,
-  .ep-root.dark .layout-page video {
+  .docx-editor.dark .layout-page,
+  .docx-editor.dark .layout-page img,
+  .docx-editor.dark .layout-page svg,
+  .docx-editor.dark .layout-page canvas,
+  .docx-editor.dark .layout-page video {
     filter: none;
   }
 }
@@ -429,40 +1217,40 @@
   * DOCUMENT SCROLLBAR
   * ============================================================================ */
 
-.ep-root .docx-editor__scroll-container,
-.ep-root .docx-editor-vue__pages-viewport {
+.docx-editor .docx-editor__scroll-container,
+.docx-editor .docx-editor-vue__pages-viewport {
   scrollbar-width: auto;
   scrollbar-color: var(--doc-scrollbar-thumb) var(--doc-scrollbar-track);
 }
 
-.ep-root .docx-editor__scroll-container {
+.docx-editor .docx-editor__scroll-container {
   /* `both-edges` reserves a symmetric gutter so the centered page stays centered
       on classic-scrollbar platforms (single-edge nudges it ~7px left). Matches
       the Vue viewport (DocxEditor.css `__pages-viewport`). */
   scrollbar-gutter: stable both-edges;
 }
 
-.ep-root .docx-editor__scroll-container::-webkit-scrollbar,
-.ep-root .docx-editor-vue__pages-viewport::-webkit-scrollbar {
+.docx-editor .docx-editor__scroll-container::-webkit-scrollbar,
+.docx-editor .docx-editor-vue__pages-viewport::-webkit-scrollbar {
   width: var(--doc-scrollbar-size);
   height: var(--doc-scrollbar-size);
 }
 
-.ep-root .docx-editor__scroll-container::-webkit-scrollbar-track,
-.ep-root .docx-editor-vue__pages-viewport::-webkit-scrollbar-track {
+.docx-editor .docx-editor__scroll-container::-webkit-scrollbar-track,
+.docx-editor .docx-editor-vue__pages-viewport::-webkit-scrollbar-track {
   background: var(--doc-scrollbar-track);
 }
 
-.ep-root .docx-editor__scroll-container::-webkit-scrollbar-thumb,
-.ep-root .docx-editor-vue__pages-viewport::-webkit-scrollbar-thumb {
+.docx-editor .docx-editor__scroll-container::-webkit-scrollbar-thumb,
+.docx-editor .docx-editor-vue__pages-viewport::-webkit-scrollbar-thumb {
   background: var(--doc-scrollbar-thumb);
   border: 3px solid transparent;
   border-radius: 9999px;
   background-clip: content-box;
 }
 
-.ep-root .docx-editor__scroll-container:hover::-webkit-scrollbar-thumb,
-.ep-root .docx-editor-vue__pages-viewport:hover::-webkit-scrollbar-thumb {
+.docx-editor .docx-editor__scroll-container:hover::-webkit-scrollbar-thumb,
+.docx-editor .docx-editor-vue__pages-viewport:hover::-webkit-scrollbar-thumb {
   background: var(--doc-scrollbar-thumb-hover);
   border: 3px solid transparent;
   border-radius: 9999px;
@@ -473,8 +1261,10 @@
   * CURSOR / CARET STYLING
   * ============================================================================ */
 
-/* Base cursor styles for all editable elements */
-[contenteditable='true'] {
+/* Base cursor styles for all editable elements. Scoped under .docx-editor: an
+   unscoped [contenteditable] rule reaches into every rich-text field of the
+   HOST application. */
+.docx-editor [contenteditable='true'] {
   /* Black caret for light backgrounds - highly visible */
   caret-color: #000;
 
@@ -542,13 +1332,19 @@
   * - Use rgba for semi-transparent highlight that shows text clearly
   */
 
-/* Base selection styling for all editable elements */
+/* Base selection styling for all editable elements. The bare [contenteditable]
+   variants are scoped under .docx-editor so host-app editors keep their own
+   selection colors. */
+.docx-run-editable::-moz-selection, .docx-run-editable *::-moz-selection, .docx-run::-moz-selection, .docx-run *::-moz-selection, .docx-editor [contenteditable='true']::-moz-selection, .docx-editor [contenteditable='true'] *::-moz-selection {
+  background-color: rgba(26, 115, 232, 0.3) !important;
+  color: inherit !important;
+}
 .docx-run-editable::selection,
 .docx-run-editable *::selection,
 .docx-run::selection,
 .docx-run *::selection,
-[contenteditable='true']::selection,
-[contenteditable='true'] *::selection {
+.docx-editor [contenteditable='true']::selection,
+.docx-editor [contenteditable='true'] *::selection {
   background-color: rgba(26, 115, 232, 0.3) !important;
   color: inherit !important;
 }
@@ -558,13 +1354,17 @@
 .docx-run-editable *::-moz-selection,
 .docx-run::-moz-selection,
 .docx-run *::-moz-selection,
-[contenteditable='true']::-moz-selection,
-[contenteditable='true'] *::-moz-selection {
+.docx-editor [contenteditable='true']::-moz-selection,
+.docx-editor [contenteditable='true'] *::-moz-selection {
   background-color: rgba(26, 115, 232, 0.3) !important;
   color: inherit !important;
 }
 
 /* Selection in paragraphs - ensure runs within get consistent styling */
+.docx-paragraph::-moz-selection, .docx-paragraph *::-moz-selection, .docx-paragraph-editable::-moz-selection, .docx-paragraph-editable *::-moz-selection {
+  background-color: rgba(26, 115, 232, 0.3) !important;
+  color: inherit !important;
+}
 .docx-paragraph::selection,
 .docx-paragraph *::selection,
 .docx-paragraph-editable::selection,
@@ -608,6 +1408,10 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* Selection in hyperlinks */
+.docx-hyperlink::-moz-selection, .docx-hyperlink *::-moz-selection {
+  background-color: rgba(26, 115, 232, 0.3) !important;
+  color: inherit !important;
+}
 .docx-hyperlink::selection,
 .docx-hyperlink *::selection {
   background-color: rgba(26, 115, 232, 0.3) !important;
@@ -621,6 +1425,10 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* Selection on highlighted text - use darker selection for visibility */
+.docx-run-highlighted::-moz-selection, .docx-run-highlighted *::-moz-selection {
+  background-color: rgba(26, 115, 232, 0.5) !important;
+  color: inherit !important;
+}
 .docx-run-highlighted::selection,
 .docx-run-highlighted *::selection {
   background-color: rgba(26, 115, 232, 0.5) !important;
@@ -634,6 +1442,10 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* Selection on dark background text - lighter selection */
+.docx-run-dark-bg::-moz-selection, .docx-run-dark-bg *::-moz-selection {
+  background-color: rgba(100, 181, 246, 0.5) !important;
+  color: inherit !important;
+}
 .docx-run-dark-bg::selection,
 .docx-run-dark-bg *::selection {
   background-color: rgba(100, 181, 246, 0.5) !important;
@@ -647,6 +1459,10 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* Selection on bold text - ensure same style */
+.docx-run-bold::-moz-selection, .docx-run-bold *::-moz-selection {
+  background-color: rgba(26, 115, 232, 0.3) !important;
+  color: inherit !important;
+}
 .docx-run-bold::selection,
 .docx-run-bold *::selection {
   background-color: rgba(26, 115, 232, 0.3) !important;
@@ -660,6 +1476,10 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* Selection on italic text - ensure same style */
+.docx-run-italic::-moz-selection, .docx-run-italic *::-moz-selection {
+  background-color: rgba(26, 115, 232, 0.3) !important;
+  color: inherit !important;
+}
 .docx-run-italic::selection,
 .docx-run-italic *::selection {
   background-color: rgba(26, 115, 232, 0.3) !important;
@@ -736,7 +1556,9 @@ a.docx-hyperlink:focus-visible {
   position: absolute;
   background-color: rgba(66, 133, 244, 0.25);
   pointer-events: none;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 /* ============================================================================
@@ -770,7 +1592,9 @@ a.docx-hyperlink:focus-visible {
 
 .docx-generated-region {
   cursor: pointer;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 /*
@@ -800,7 +1624,9 @@ a.docx-hyperlink:focus-visible {
 .docx-content-control-label,
 .docx-content-control-widget {
   cursor: default;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 /* Content-control boundary furniture — overlay only; never contributes layout. */
@@ -836,27 +1662,35 @@ a.docx-hyperlink:focus-visible {
   opacity: 0;
 }
 
+/* The label tab, shown only while a control is ACTIVE or OPEN — never on plain hover.
+   An inline control sits in running text with no clearance above it, so the tab lands on the
+   previous line; on hover that means moving the pointer across a paragraph flashes labels over
+   the words being read. Word shows it when you are in the control, and so does this. The ring
+   and shadow are what keep it legible over whatever line it does land on. */
 .docx-content-control-label {
   box-sizing: border-box;
   max-width: 12rem;
   overflow: hidden;
   padding: 1px 6px;
-  border-radius: 3px 3px 0 0;
+  border-radius: 3px;
   background: var(--doc-primary);
   color: var(--doc-on-primary);
   font:
-    500 10px/14px system-ui,
+    500 10px/14px ui-sans-serif,
+    system-ui,
     sans-serif;
+  letter-spacing: 0.01em;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: none;
   pointer-events: none;
+  box-shadow:
+    0 0 0 2px var(--doc-page-bg-rendered),
+    0 1px 4px color-mix(in srgb, var(--doc-primary) 35%, transparent);
 }
 
 .docx-content-control-chrome[data-active] .docx-content-control-label,
-.docx-content-control-chrome[data-open] .docx-content-control-label,
-.docx-content-control-chrome[data-hover] .docx-content-control-label,
-.docx-content-control-chrome:hover .docx-content-control-label {
+.docx-content-control-chrome[data-open] .docx-content-control-label {
   display: block;
 }
 
@@ -942,7 +1776,9 @@ a.docx-hyperlink:focus-visible {
   border-radius: 8px;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
   padding: 0.3rem;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 .docx-content-control-menu-item {
@@ -1126,7 +1962,7 @@ a.docx-hyperlink:focus-visible {
   max-height: none;
 }
 
-.ep-root.dark .docx-drawing-placeholder-card,
+.docx-editor.dark .docx-drawing-placeholder-card,
 .dark .docx-drawing-placeholder-card {
   background: var(--doc-surface-muted, #2a2a2a);
   border-color: var(--doc-border, #404040);
@@ -1140,7 +1976,9 @@ a.docx-hyperlink:focus-visible {
 /* Template variable highlighting - non-editable within run */
 .docx-run-has-variable [contenteditable='false'] {
   cursor: default;
-  user-select: all;
+  -webkit-user-select: all;
+     -moz-user-select: all;
+          user-select: all;
 }
 
 /* Table interaction furniture (core-owned, semantic geometry). */
@@ -1496,14 +2334,14 @@ a.docx-hyperlink:focus-visible {
 /* React toolbar toggle buttons (bold/italic/comments/...). Owned here, not via
   * Tailwind utilities: `cn` is clsx-only (no tailwind-merge), so competing
   * hover:bg utilities don't dedupe and the active slab could lose its color on
-  * hover (white icon on a light bg). The `.ep-root` prefix outranks the
+  * hover (white icon on a light bg). The `.docx-editor` prefix outranks the
   * single-class Tailwind hover utilities. */
-.ep-root .ep-toolbar-toggle:hover {
+.docx-editor .docx-editor-toolbar-toggle:hover {
   background-color: var(--doc-bg-hover);
   color: var(--doc-text);
 }
-.ep-root .ep-toolbar-toggle[data-active='true'],
-.ep-root .ep-toolbar-toggle[data-active='true']:hover {
+.docx-editor .docx-editor-toolbar-toggle[data-active='true'],
+.docx-editor .docx-editor-toolbar-toggle[data-active='true']:hover {
   background-color: var(--doc-toggle-active-bg);
   color: var(--doc-toggle-active-fg);
 }
@@ -1691,10 +2529,10 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* Body caret blink for the Vue adapter's painted caret (useSelectionSync sets
-    `animation: ep-caret-blink ...` inline). React drives its caret's blink from a
+    `animation: docx-editor-caret-blink ...` inline). React drives its caret's blink from a
     JS timer instead; both land on the same 530ms half-period, which is the
     platform default. Defined here so the keyframes aren't duplicated per adapter. */
-@keyframes ep-caret-blink {
+@keyframes docx-editor-caret-blink {
   0%,
   49% {
     opacity: 1;
@@ -1736,7 +2574,7 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* Hyperlink popup icon button hover */
-.ep-hyperlink-popup__icon-btn:hover {
+.docx-editor-hyperlink-popup__icon-btn:hover {
   background: var(--doc-bg-hover);
 }
 
@@ -1781,7 +2619,9 @@ a.docx-hyperlink:focus-visible {
   padding: 2px 4px;
   border-radius: 3px 3px 3px 0;
   white-space: nowrap;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   pointer-events: none;
 }
 
@@ -1826,7 +2666,9 @@ a.docx-hyperlink:focus-visible {
   pointer-events: auto;
   border-radius: 2px;
   outline-offset: 1px;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 .layout-inline-sdt-widget:hover,
 .layout-inline-sdt-widget:focus {
@@ -2005,19 +2847,19 @@ a.docx-hyperlink:focus-visible {
   text-decoration: line-through;
 }
 
-.ep-revision-cell.ep-revision-ins {
+.docx-editor-revision-cell.docx-editor-revision-ins {
   box-shadow: inset 0 3px 0 var(--doc-revision-insertion);
   background-color: var(--doc-revision-insertion-tint);
 }
 
-.ep-revision-cell.ep-revision-del {
+.docx-editor-revision-cell.docx-editor-revision-del {
   box-shadow: inset 0 3px 0 var(--doc-revision-deletion);
   background-color: var(--doc-revision-deletion-tint);
   text-decoration: line-through;
   text-decoration-color: color-mix(in srgb, var(--doc-revision-deletion) 60%, transparent);
 }
 
-.ep-revision-cell.ep-revision-merge {
+.docx-editor-revision-cell.docx-editor-revision-merge {
   box-shadow: inset 0 3px 0 var(--doc-text-muted);
   background-color: color-mix(in srgb, var(--doc-text-muted) 8%, transparent);
 }
@@ -2061,11 +2903,11 @@ a.docx-hyperlink:focus-visible {
  *
  * Layer model, bottom to top, inside one scroll container:
  *
- *   .ep-one-surface                 positioning context
- *   └ .ep-one-surface__pages        stacked page boxes
- *     └ .ep-one-surface__page       one engine-sized page box
- *       ├ .ep-one-surface__content  painted DisplayItem[] (engine geometry)
- *       └ .ep-one-surface__overlay  caret + selection, pointer-transparent
+ *   .docx-editor-one-surface                 positioning context
+ *   └ .docx-editor-one-surface__pages        stacked page boxes
+ *     └ .docx-editor-one-surface__page       one engine-sized page box
+ *       ├ .docx-editor-one-surface__content  painted DisplayItem[] (engine geometry)
+ *       └ .docx-editor-one-surface__overlay  caret + selection, pointer-transparent
  *
  * Every box that carries document geometry is positioned by the engine in
  * content pixels through inline styles. Nothing here invents or overrides a
@@ -2076,7 +2918,7 @@ a.docx-hyperlink:focus-visible {
  * and geometry and paint agree by construction.
  * ======================================================================== */
 
-.ep-one-surface {
+.docx-editor-one-surface {
   position: relative;
   /* Page separation is a paint concern; the engine reports the same gap in
    * scrollGeometry so hit testing and paint stay in agreement. */
@@ -2085,7 +2927,7 @@ a.docx-hyperlink:focus-visible {
 
 /* Scroll container. The host reports scrollTop/scrollLeft to the engine as
  * InteractionHostMetrics.scrollOffset — the engine never reads the DOM. */
-.ep-one-surface__viewport {
+.docx-editor-one-surface__viewport {
   position: relative;
   overflow: auto;
   overscroll-behavior: contain;
@@ -2102,9 +2944,10 @@ a.docx-hyperlink:focus-visible {
  * (`align-items: center` on a stretched box) instead offsets every page from the
  * stack origin, which shifts every hit test by that offset and makes clicks land
  * on "page background". */
-.ep-one-surface__pages {
+.docx-editor-one-surface__pages {
   display: flex;
   flex-direction: column;
+  width: -moz-max-content;
   width: max-content;
   margin-inline: auto;
   gap: var(--doc-page-gap);
@@ -2115,7 +2958,7 @@ a.docx-hyperlink:focus-visible {
   transform-origin: 0 0;
 }
 
-.ep-one-surface__page {
+.docx-editor-one-surface__page {
   position: relative;
   flex: none;
   background: var(--doc-page-bg);
@@ -2128,55 +2971,73 @@ a.docx-hyperlink:focus-visible {
 /* Painted display items. Text is selected through the engine's semantic
  * selection, never the browser's, so native selection is suppressed here to
  * stop a second, contradictory selection appearing on the same glyphs. */
-.ep-one-surface__content {
+.docx-editor-one-surface__content {
   position: absolute;
   inset: 0;
-  user-select: none;
+  -moz-user-select: none;
+       user-select: none;
   -webkit-user-select: none;
 }
 
-.ep-one-surface__content > * {
+.docx-editor-one-surface__content > * {
   position: absolute;
 }
 
 /* Overlay layer: caret and selection rectangles, both derived from
  * interaction-frame geometry. Pointer-transparent so a click always reaches
  * the page and resolves through the engine hit test. */
-.ep-one-surface__overlay {
+.docx-editor-one-surface__overlay {
   position: absolute;
   inset: 0;
   pointer-events: none;
 }
 
-.ep-one-surface__selection-rect {
+.docx-editor-one-surface__selection-rect {
   position: absolute;
   background: var(--doc-selection);
 }
 
-.ep-one-surface__caret {
+.docx-editor-one-surface__caret {
   position: absolute;
   /* 2px, not 1: a hairline caret disappears against body text at 100% zoom on a
    * high-DPI screen, and reads as a rendering artefact rather than a cursor.
    * Every desktop word processor draws a two-pixel insertion point. */
   width: 2px;
   background: var(--doc-caret);
-  animation: ep-caret-blink 1.06s steps(1) infinite;
+  /* A CONTRASTING 1px ring, because a caret position is not always beside text: the offset
+   * before an inline image puts the insertion point exactly on the picture's leading edge,
+   * so a full-width dark photo swallowed the near-black bar whole — the user could type
+   * there and see nothing. Dark table shading and dark highlights do it to a lesser degree.
+   *
+   * The ring and the core are a complementary pair, so whichever one the backdrop hides,
+   * the other reads. On an ordinary white page the ring is white on white and the caret
+   * looks exactly as it did before.
+   *
+   * NOT `mix-blend-mode: difference`, which is the textbook XOR caret and is wrong here:
+   * blending resolves against the nearest ISOLATED GROUP, and this stylesheet puts two of
+   * them between the caret and the paper — the dark page's `filter` on
+   * `.docx-page-content`, and the `opacity` that dims the body during header/footer
+   * editing. Inside either, the backdrop is transparent rather than the sheet's paper, so
+   * the caret would blend to white and the dark page's inversion would then paint it black
+   * on black: the very bug this ring exists to fix. The pair needs no backdrop at all. */
+  box-shadow: 0 0 0 1px var(--doc-caret-contrast);
+  animation: docx-editor-caret-blink 1.06s steps(1) infinite;
 }
 
 /* A caret that is being moved or dragged should not blink. */
-.ep-one-surface__caret--steady {
+.docx-editor-one-surface__caret--steady {
   animation: none;
 }
 
 /* Right-to-left runs paint their caret on the trailing edge; the engine
  * supplies the rect, this only marks direction for the host. */
-.ep-one-surface__caret--rtl {
+.docx-editor-one-surface__caret--rtl {
   direction: rtl;
 }
 
 /* Active IME composition. The composed range stays visible under the engine
  * selection so the user can see what the input method is holding. */
-.ep-one-surface__composition {
+.docx-editor-one-surface__composition {
   position: absolute;
   border-bottom: 1px solid var(--doc-text);
   pointer-events: none;
@@ -2186,7 +3047,7 @@ a.docx-hyperlink:focus-visible {
  * object controls that must receive their own pointer events. Anything using
  * this class opts out deliberately — it is not the default for overlay content.
  */
-.ep-one-surface__overlay-control {
+.docx-editor-one-surface__overlay-control {
   pointer-events: auto;
 }
 
@@ -2213,13 +3074,13 @@ a.docx-hyperlink:focus-visible {
 
 /* The host must never expose a second visible or assistive copy of the
  * document, so its projected content is not painted. */
-.ep-one-surface__input-host * {
+.docx-editor-one-surface__input-host * {
   color: transparent;
 }
 
 /* Private browser-feedback checkpoint: one page-like sheet with the real
  * ProseMirror contenteditable. It is deliberately not a pagination claim. */
-.ep-browser-first__page {
+.docx-editor-browser-first__page {
   box-sizing: border-box;
   width: 816px;
   min-height: 1056px;
@@ -2228,12 +3089,12 @@ a.docx-hyperlink:focus-visible {
   cursor: text;
 }
 
-.ep-browser-first__mount,
-.ep-browser-first__mount * {
+.docx-editor-browser-first__mount,
+.docx-editor-browser-first__mount * {
   color: var(--doc-caret);
 }
 
-.ep-browser-first__mount .ProseMirror {
+.docx-editor-browser-first__mount .ProseMirror {
   min-height: 864px;
   outline: none;
   font-size: 11pt;
@@ -2242,12 +3103,12 @@ a.docx-hyperlink:focus-visible {
   overflow-wrap: break-word;
 }
 
-.ep-browser-first__mount .ProseMirror p {
+.docx-editor-browser-first__mount .ProseMirror p {
   margin: 0 0 0.75em;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .ep-one-surface__caret {
+  .docx-editor-one-surface__caret {
     animation: none;
   }
 }
@@ -2260,12 +3121,12 @@ a.docx-hyperlink:focus-visible {
  * toolbar, rulers, and the page indicator.
  *
  * The shell owns CHROME ONLY. It sets no document geometry — the page stack
- * inside `.ep-shell__canvas` is positioned by the engine, and the shell must
+ * inside `.docx-editor-shell__canvas` is positioned by the engine, and the shell must
  * not introduce any horizontal offset the engine does not know about, or hit
  * testing drifts (the lesson from M3's centering bug).
  * ======================================================================== */
 
-.ep-shell {
+.docx-editor-shell {
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -2274,15 +3135,15 @@ a.docx-hyperlink:focus-visible {
   color: var(--doc-text);
 }
 
-.ep-shell__title,
-.ep-shell__toolbar {
+.docx-editor-shell__title,
+.docx-editor-shell__toolbar {
   flex: none;
   border-bottom: 1px solid var(--doc-border);
   background: var(--doc-surface);
 }
 
 /* The scrolling document region — the backdrop the page sits on. */
-.ep-shell__document {
+.docx-editor-shell__document {
   position: relative;
   flex: 1;
   min-height: 0;
@@ -2294,7 +3155,7 @@ a.docx-hyperlink:focus-visible {
 
 /* Sticky horizontal ruler: scrolls horizontally with the document, stays put
  * vertically, and never covers the page content. */
-.ep-shell__ruler-h {
+.docx-editor-shell__ruler-h {
   position: sticky;
   top: 0;
   z-index: 2;
@@ -2305,7 +3166,7 @@ a.docx-hyperlink:focus-visible {
   background: var(--doc-bg);
 }
 
-.ep-shell__canvas {
+.docx-editor-shell__canvas {
   position: relative;
   flex: 1;
   min-height: 0;
@@ -2314,7 +3175,7 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* Vertical ruler pinned to the canvas's left edge so it scrolls with the page. */
-.ep-shell__ruler-v {
+.docx-editor-shell__ruler-v {
   position: absolute;
   left: 0;
   top: 0;
@@ -2323,16 +3184,16 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* The one-surface viewport fills the canvas. Page centering stays the page
- * stack's own job (`margin-inline: auto` on `.ep-one-surface__pages`), so the
+ * stack's own job (`margin-inline: auto` on `.docx-editor-one-surface__pages`), so the
  * shell adds no offset the engine would have to be told about. */
-.ep-shell__canvas > .ep-one-surface {
+.docx-editor-shell__canvas > .docx-editor-one-surface {
   flex: 1;
   min-width: 0;
 }
 
 /* Floating page indicator, out of the document flow and pointer-transparent so
  * it can never swallow a click meant for the page. */
-.ep-shell__page-indicator {
+.docx-editor-shell__page-indicator {
   position: absolute;
   bottom: 16px;
   left: 50%;
@@ -2344,8 +3205,8 @@ a.docx-hyperlink:focus-visible {
 /* Document scroll region padding: breathing room around the sheet, matching the
  * legacy backdrop. Applied to the viewport rather than the page stack so it
  * cannot shift the stack origin away from the engine's page origin. */
-.ep-shell .ep-one-surface__viewport,
-.docx-editor__content .ep-one-surface__viewport {
+.docx-editor-shell .docx-editor-one-surface__viewport,
+.docx-editor__content .docx-editor-one-surface__viewport {
   padding: 24px 0;
   scrollbar-gutter: stable both-edges;
 }
@@ -2354,7 +3215,7 @@ a.docx-hyperlink:focus-visible {
  * stays inline in `DocxEditorShell.tsx`; only what it expressed in CSS is here.
  *
  * A DEVIATION RECORDED HERE EARLIER IS NOW REVERTED: this file used to keep
- * `.ep-one-surface__viewport` as the scroller inside the shell as well. With the shell's
+ * `.docx-editor-one-surface__viewport` as the scroller inside the shell as well. With the shell's
  * container also declaring `overflow: auto`, neither box ended up bounded — the whole
  * chain grew to document height and the window scrolled, so the page indicator never
  * left page 1. Legacy's structure is restored: inside the shell,
@@ -2362,7 +3223,7 @@ a.docx-hyperlink:focus-visible {
  * Bare (no chrome), the viewport still scrolls and nothing about it changes. */
 
 /* Hosted in the shell: the shell's container scrolls, not this box. */
-.ep-one-surface__viewport--hosted {
+.docx-editor-one-surface__viewport--hosted {
   overflow: visible;
 }
 /* The title + menu column, INSIDE the header row (legacy layout). It used to render as
@@ -2392,14 +3253,14 @@ a.docx-hyperlink:focus-visible {
 
 /* Title chrome and page indicator (interactive-paginated-editing M4.3). */
 
-.ep-shell__title-bar {
+.docx-editor-shell__title-bar {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 8px 16px;
 }
 
-.ep-shell__title-input {
+.docx-editor-shell__title-input {
   flex: 1;
   min-width: 0;
   border: 1px solid transparent;
@@ -2415,17 +3276,17 @@ a.docx-hyperlink:focus-visible {
   background: transparent;
 }
 
-.ep-shell__title-input:hover:not([readonly]) {
+.docx-editor-shell__title-input:hover:not([readonly]) {
   border-color: var(--doc-border);
 }
 
-.ep-shell__title-input:focus {
+.docx-editor-shell__title-input:focus {
   outline: none;
   border-color: var(--doc-primary);
   box-shadow: 0 0 0 2px var(--doc-focus-ring);
 }
 
-.ep-shell__title-actions {
+.docx-editor-shell__title-actions {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -2433,7 +3294,7 @@ a.docx-hyperlink:focus-visible {
 
 /* The indicator is a dark scrim in BOTH themes, so its text stays light —
  * --doc-on-primary flips dark in dark mode and would vanish here. */
-.ep-shell__page-indicator-chip {
+.docx-editor-shell__page-indicator-chip {
   background: var(--doc-overlay);
   color: #fff;
   padding: 6px 12px;
@@ -2445,7 +3306,9 @@ a.docx-hyperlink:focus-visible {
     Roboto,
     sans-serif;
   white-space: nowrap;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   transition: opacity 0.3s ease;
   /* A status readout, never a control. Both PageIndicator components document that
    * this element "never intercepts pointer events", but nothing enforced it: Playwright
@@ -2475,16 +3338,18 @@ a.docx-hyperlink:focus-visible {
  * markers and no drag handles: this change owns no section-geometry contract,
  * so a draggable handle would be a control that silently does nothing. */
 
-.ep-ruler {
+.docx-editor-ruler {
   position: relative;
   background: var(--doc-surface);
   border: 1px solid var(--doc-border-light);
   border-radius: 2px;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   pointer-events: none;
 }
 
-.ep-ruler--horizontal {
+.docx-editor-ruler--horizontal {
   height: 22px;
 }
 
@@ -2502,26 +3367,26 @@ a.docx-hyperlink:focus-visible {
   }
 }
 
-.ep-ruler--vertical {
+.docx-editor-ruler--vertical {
   height: 100%;
 }
 
-.ep-ruler__tick {
+.docx-editor-ruler__tick {
   position: absolute;
   background: var(--doc-text-subtle);
 }
 
-.ep-ruler--horizontal .ep-ruler__tick {
+.docx-editor-ruler--horizontal .docx-editor-ruler__tick {
   bottom: 0;
   width: 1px;
 }
 
-.ep-ruler--vertical .ep-ruler__tick {
+.docx-editor-ruler--vertical .docx-editor-ruler__tick {
   right: 0;
   height: 1px;
 }
 
-.ep-ruler__label {
+.docx-editor-ruler__label {
   position: absolute;
   font:
     400 9px/1 -apple-system,
@@ -2532,12 +3397,12 @@ a.docx-hyperlink:focus-visible {
   color: var(--doc-text-muted);
 }
 
-.ep-ruler--horizontal .ep-ruler__label {
+.docx-editor-ruler--horizontal .docx-editor-ruler__label {
   left: 2px;
   bottom: 11px;
 }
 
-.ep-ruler--vertical .ep-ruler__label {
+.docx-editor-ruler--vertical .docx-editor-ruler__label {
   right: 11px;
   top: -4px;
 }
@@ -2557,7 +3422,7 @@ a.docx-hyperlink:focus-visible {
  * (Toolbar.tsx:679: `flex items-center px-2 py-1 bg-muted rounded-full min-h-[36px]
  * overflow-x-auto mx-2 mb-1`). Only the scroll behaviour stays here: the pill scrolls
  * horizontally and must never become a second VERTICAL scroller. */
-.ep-toolbar {
+.docx-editor-toolbar {
   flex-wrap: nowrap;
   flex-shrink: 0;
   overflow-y: hidden;
@@ -2566,12 +3431,12 @@ a.docx-hyperlink:focus-visible {
 
 /* One group plus the separator that precedes it, so the pair wraps together and a
  * separator never becomes the first thing on a wrapped row. */
-.ep-toolbar__group-wrap {
+.docx-editor-toolbar__group-wrap {
   display: inline-flex;
   align-items: center;
 }
 
-.ep-toolbar__group {
+.docx-editor-toolbar__group {
   display: flex;
   align-items: center;
   gap: 2px;
@@ -2579,7 +3444,7 @@ a.docx-hyperlink:focus-visible {
 
 /* Visually hidden but present for assistive technology: a parity-only picker has no
  * tooltip of its own, so its unavailable reason is exposed here instead. */
-.ep-sr-only {
+.docx-editor-sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -2591,7 +3456,7 @@ a.docx-hyperlink:focus-visible {
   border: 0;
 }
 
-.ep-toolbar__separator {
+.docx-editor-toolbar__separator {
   width: 1px;
   align-self: stretch;
   margin: 4px 6px;
@@ -2600,7 +3465,7 @@ a.docx-hyperlink:focus-visible {
 
 /* Sidebar frame (interactive-paginated-editing M4.6). */
 
-.ep-sidebar {
+.docx-editor-sidebar {
   display: flex;
   flex-direction: column;
   width: 300px;
@@ -2609,7 +3474,7 @@ a.docx-hyperlink:focus-visible {
   background: var(--doc-surface);
 }
 
-.ep-sidebar__header {
+.docx-editor-sidebar__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2618,7 +3483,7 @@ a.docx-hyperlink:focus-visible {
   border-bottom: 1px solid var(--doc-border);
 }
 
-.ep-sidebar__title {
+.docx-editor-sidebar__title {
   font:
     500 13px/1.2 -apple-system,
     BlinkMacSystemFont,
@@ -2628,7 +3493,7 @@ a.docx-hyperlink:focus-visible {
   color: var(--doc-text);
 }
 
-.ep-sidebar__close {
+.docx-editor-sidebar__close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2641,11 +3506,11 @@ a.docx-hyperlink:focus-visible {
   cursor: pointer;
 }
 
-.ep-sidebar__close:hover {
+.docx-editor-sidebar__close:hover {
   background: var(--doc-bg-hover);
 }
 
-.ep-sidebar__body {
+.docx-editor-sidebar__body {
   flex: 1;
   min-height: 0;
   overflow: auto;
@@ -2778,7 +3643,7 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* The page floats on the workspace backdrop with a drop shadow, as in the reference. */
-.docx-editor__content .ep-one-surface__page {
+.docx-editor__content .docx-editor-one-surface__page {
   box-shadow:
     0 1px 3px rgb(60 64 67 / 30%),
     0 4px 8px 3px rgb(60 64 67 / 15%);
@@ -2882,14 +3747,14 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* The pill needs enough fill to read AS a pill against the workspace. */
-.ep-toolbar {
+.docx-editor-toolbar {
   background: var(--doc-bg-subtle);
   border: 1px solid var(--doc-border);
 }
 
 /* Ruler margin zones (M6V.6), from the legacy `ui/HorizontalRuler.tsx`:
  * `MARGIN_ZONE_COLOR = var(--doc-shadow-subtle)` with a 1px border on the inner edge. */
-.ep-ruler__margin {
+.docx-editor-ruler__margin {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -2897,26 +3762,26 @@ a.docx-hyperlink:focus-visible {
   pointer-events: none;
 }
 
-.ep-ruler__margin--start {
+.docx-editor-ruler__margin--start {
   left: 0;
   border-right: 1px solid var(--doc-shadow-subtle);
 }
 
-.ep-ruler__margin--end {
+.docx-editor-ruler__margin--end {
   right: 0;
   border-left: 1px solid var(--doc-shadow-subtle);
 }
 
-/* The vertical ruler's zones run the other axis; the shared `.ep-ruler__margin` rule
+/* The vertical ruler's zones run the other axis; the shared `.docx-editor-ruler__margin` rule
  * pins top/bottom, so these override the horizontal defaults. */
-.ep-ruler__margin--top {
+.docx-editor-ruler__margin--top {
   left: 0;
   right: 0;
   bottom: auto;
   border-bottom: 1px solid var(--doc-shadow-subtle);
 }
 
-.ep-ruler__margin--bottom {
+.docx-editor-ruler__margin--bottom {
   left: 0;
   right: 0;
   top: auto;
@@ -2942,7 +3807,9 @@ a.docx-hyperlink:focus-visible {
     transparent 4px 8px
   );
   cursor: default;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 /* A tab renders as whitespace that can still be seen while selecting. */
@@ -2959,19 +3826,19 @@ a.docx-hyperlink:focus-visible {
   position: relative;
   outline: none;
 }
-.ep-root.dark .docx-paginated-surface .docx-page {
+.docx-editor.dark .docx-paginated-surface .docx-page {
   background: var(--doc-page-bg-rendered);
 }
 /* Paper is always white, whatever the screen theme. Without resetting the CONTENT
    inversion here, printing in dark mode left near-white text on paper the printer drops to
    white — blank pages. `print-color-adjust` stops the sheet colour being dropped too. */
 @media print {
-  .ep-root.dark .docx-page-content,
-  .ep-root.dark .docx-page-content img,
-  .ep-root.dark .docx-page-content svg,
-  .ep-root.dark .docx-page-content canvas,
-  .ep-root.dark .docx-page-content video,
-  .ep-root.dark .docx-page-content [data-no-color-invert] {
+  .docx-editor.dark .docx-page-content,
+  .docx-editor.dark .docx-page-content img,
+  .docx-editor.dark .docx-page-content svg,
+  .docx-editor.dark .docx-page-content canvas,
+  .docx-editor.dark .docx-page-content video,
+  .docx-editor.dark .docx-page-content [data-no-color-invert] {
     filter: none !important;
   }
   .docx-paginated-surface .docx-page {
@@ -2994,7 +3861,8 @@ a.docx-hyperlink:focus-visible {
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
   /* Painted text stays selectable so the BROWSER can run drag, double-click-for-a-word and
      triple-click-for-a-paragraph; the surface reads the result back as model positions. */
-  user-select: text;
+  -moz-user-select: text;
+       user-select: text;
   -webkit-user-select: text;
 }
 /* The caret and the TEXT highlight are the BROWSER's, so they follow real glyph shapes and
@@ -3034,7 +3902,8 @@ a.docx-hyperlink:focus-visible {
     sans-serif;
   font-size: 12px;
   color: var(--doc-primary);
-  user-select: none;
+  -moz-user-select: none;
+       user-select: none;
   -webkit-user-select: none;
 }
 
@@ -3044,7 +3913,7 @@ a.docx-hyperlink:focus-visible {
 
 /* Hovering an EXISTING inactive band tints it and floats an edit invitation beside it —
  * without this the enterable header answered a hover with nothing at all. The pill is a
- * sibling because the band clips its own overflow. */
+ * sibling because the `+` selector below needs it right after the band. */
 .docx-pages .docx-hf:not([data-docx-hf-active]):not(.docx-hf--placeholder):hover {
   background: var(--doc-primary-light);
   border-radius: 4px;
@@ -3075,7 +3944,8 @@ a.docx-hyperlink:focus-visible {
   border-radius: 10px;
   padding: 0 10px;
   margin-top: 4px;
-  user-select: none;
+  -moz-user-select: none;
+       user-select: none;
   -webkit-user-select: none;
 }
 
@@ -3179,7 +4049,7 @@ a.docx-hyperlink:focus-visible {
  * - bar: `flex items-center px-2 py-1 bg-muted rounded-full min-h-[36px]`
  *   — the neutral #f1f3f4-family pill.
  * - buttons: 28px ghost squares (h-7 w-7), muted
- *   glyphs, subtle hover, the dark active slab (`.ep-toolbar-toggle`
+ *   glyphs, subtle hover, the dark active slab (`.docx-editor-toolbar-toggle`
  *   [data-active] → --doc-toggle-active tokens), disabled at opacity .3.
  * - pickers (style, font family, editing mode): TRANSPARENT triggers with a
  *   chevron (h-8 rounded px-2 bg-transparent hover:bg-muted/80),
@@ -3323,7 +4193,9 @@ a.docx-hyperlink:focus-visible {
   font-size: 11px;
   font-weight: 600;
   color: var(--doc-text-muted);
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 /* A control row: the registry's name on the left, the real control on the right. */
@@ -3427,7 +4299,9 @@ a.docx-hyperlink:focus-visible {
   background: transparent;
   color: var(--doc-text);
   white-space: nowrap;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 .docx-toolbar__picker[aria-disabled='true'] {
@@ -3554,7 +4428,7 @@ a.docx-hyperlink:focus-visible {
   cursor: default;
 }
 
-.ep-root .docx-menubar__item[aria-disabled='true']:hover {
+.docx-editor .docx-menubar__item[aria-disabled='true']:hover {
   background: transparent;
 }
 
@@ -3564,7 +4438,9 @@ a.docx-hyperlink:focus-visible {
   font-size: 11px;
   font-weight: 600;
   color: var(--doc-text-muted);
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 .docx-toolbar__menu-separator {
@@ -3652,7 +4528,9 @@ a.docx-hyperlink:focus-visible {
   text-align: center;
   color: var(--doc-text);
   font-variant-numeric: tabular-nums;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 /* The boxed font-size value: `h-7 w-10 border bg-doc-bg-input rounded-none`. */
@@ -3885,7 +4763,9 @@ a.docx-hyperlink:focus-visible {
 .docx-toolbar__swatch-heading {
   font-size: 11px;
   color: var(--doc-text-muted);
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   white-space: nowrap;
 }
 
@@ -3979,7 +4859,9 @@ a.docx-hyperlink:focus-visible {
 .docx-toolbar__swatch-hash {
   color: var(--doc-text-muted);
   font-size: 12px;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 .docx-toolbar__swatch-hex {
@@ -4339,20 +5221,20 @@ a.docx-hyperlink:focus-visible {
   }
 }
 
-/* ── Vue registry-toolbar (`ep-toolbar` family) additions for the same shapes:
+/* ── Vue registry-toolbar (`docx-editor-toolbar` family) additions for the same shapes:
  * the parity stepper lookalike and the merged alignment dropdown. */
-.ep-toolbar__stepper {
+.docx-editor-toolbar__stepper {
   display: inline-flex;
   align-items: center;
   height: 28px;
   flex: none;
 }
 
-.ep-toolbar__stepper[aria-disabled='true'] {
+.docx-editor-toolbar__stepper[aria-disabled='true'] {
   opacity: 0.5;
 }
 
-.ep-toolbar__stepper-button {
+.docx-editor-toolbar__stepper-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -4360,22 +5242,26 @@ a.docx-hyperlink:focus-visible {
   height: 28px;
   color: var(--doc-text-muted);
   font-size: 14px;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
-.ep-toolbar__stepper-value {
+.docx-editor-toolbar__stepper-value {
   min-width: 34px;
   text-align: center;
   font-variant-numeric: tabular-nums;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
-.ep-toolbar__alignment {
+.docx-editor-toolbar__alignment {
   position: relative;
   display: inline-flex;
 }
 
-.ep-toolbar__alignment-popup {
+.docx-editor-toolbar__alignment-popup {
   position: absolute;
   top: 100%;
   left: 0;
@@ -4411,7 +5297,7 @@ a.docx-hyperlink:focus-visible {
 
 /* The default screen when the host supplies no children.
    `display` and `box-sizing` are explicit rather than inherited from Tailwind's
-   preflight: the part emits its own `ep-root`, so it can be composed somewhere the
+   preflight: the part emits its own `docx-editor`, so it can be composed somewhere the
    preflight does not reach, and an inline span would otherwise measure 42px and only
    size at all by accident of being a flex item. */
 .docx-editor__loading-spinner {
@@ -4717,7 +5603,7 @@ a.docx-hyperlink:focus-visible {
 /* The page column moves ONLY by what the adapter computed, and only while a pane
  * is open. Absent (no pane mounted, pane closed, gutter wide enough) the custom
  * property falls back to 0 and this rule is inert. */
-.ep-root .docx-editor__scroll-container {
+.docx-editor .docx-editor__scroll-container {
   padding-inline-start: var(--docx-nav-shift, 0px);
   transition: padding-inline-start 0.2s ease;
 }
@@ -4725,7 +5611,7 @@ a.docx-hyperlink:focus-visible {
 /* Positioning frame: the gutter strip to the left of the page. `pointer-events`
  * is off on the frame and back on for its controls, so the strip never eats a
  * click meant for the document behind it. */
-.ep-root .docx-nav {
+.docx-editor .docx-nav {
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
@@ -4736,7 +5622,7 @@ a.docx-hyperlink:focus-visible {
   color: var(--doc-text);
 }
 
-.ep-root .docx-nav > * {
+.docx-editor .docx-nav > * {
   pointer-events: auto;
 }
 
@@ -4748,7 +5634,7 @@ a.docx-hyperlink:focus-visible {
  * contents, so every heading appears to unwrap from the left edge while the
  * text reflows inside the shrinking box. The pane is a tool you open to look
  * something up; it should be there when you ask for it. */
-.ep-root .docx-nav__panel-shell {
+.docx-editor .docx-nav__panel-shell {
   display: none;
   position: absolute;
   inset-block: 0;
@@ -4758,14 +5644,14 @@ a.docx-hyperlink:focus-visible {
   background: var(--doc-bg);
 }
 
-.ep-root .docx-nav--open .docx-nav__panel-shell {
+.docx-editor .docx-nav--open .docx-nav__panel-shell {
   display: flex;
 }
 
 /* The collapsed disc. Aligned with the page's top edge, not the viewport's, so it
  * sits where the panel's back arrow will appear, and inset past the vertical
  * ruler's 20px tick column so it never covers the ticks. */
-.ep-root .docx-nav__toggle {
+.docx-editor .docx-nav__toggle {
   position: absolute;
   inset-block-start: 24px;
   inset-inline-start: var(--docx-nav-inset, 32px);
@@ -4785,25 +5671,25 @@ a.docx-hyperlink:focus-visible {
     box-shadow 0.12s ease;
 }
 
-.ep-root .docx-nav__toggle:hover {
+.docx-editor .docx-nav__toggle:hover {
   background: var(--doc-border);
   color: var(--doc-text);
   box-shadow: 0 1px 3px var(--doc-shadow);
 }
 
-.ep-root .docx-nav__toggle:focus-visible,
-.ep-root .docx-nav__close:focus-visible,
-.ep-root .docx-nav__tab:focus-visible,
-.ep-root .docx-nav__stepper:focus-visible,
-.ep-root .docx-nav__heading:focus-visible,
-.ep-root .docx-nav__result:focus-visible {
+.docx-editor .docx-nav__toggle:focus-visible,
+.docx-editor .docx-nav__close:focus-visible,
+.docx-editor .docx-nav__tab:focus-visible,
+.docx-editor .docx-nav__stepper:focus-visible,
+.docx-editor .docx-nav__heading:focus-visible,
+.docx-editor .docx-nav__result:focus-visible {
   outline: 2px solid var(--doc-primary);
   outline-offset: 2px;
 }
 
 /* ── Header ───────────────────────────────────────────────────────────────── */
 
-.ep-root .docx-nav__header {
+.docx-editor .docx-nav__header {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -4811,7 +5697,7 @@ a.docx-hyperlink:focus-visible {
   flex: none;
 }
 
-.ep-root .docx-nav__close {
+.docx-editor .docx-nav__close {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4825,12 +5711,12 @@ a.docx-hyperlink:focus-visible {
   cursor: pointer;
 }
 
-.ep-root .docx-nav__close:hover {
+.docx-editor .docx-nav__close:hover {
   background: var(--doc-bg-hover);
   color: var(--doc-text);
 }
 
-.ep-root .docx-nav__title {
+.docx-editor .docx-nav__title {
   margin: 0;
   font-size: 17px;
   font-weight: 600;
@@ -4840,7 +5726,7 @@ a.docx-hyperlink:focus-visible {
 
 /* ── Tabs ─────────────────────────────────────────────────────────────────── */
 
-.ep-root .docx-nav__tabs {
+.docx-editor .docx-nav__tabs {
   display: flex;
   align-items: stretch;
   gap: 4px;
@@ -4850,8 +5736,10 @@ a.docx-hyperlink:focus-visible {
   flex: none;
 }
 
-.ep-root .docx-nav__tab {
-  appearance: none;
+.docx-editor .docx-nav__tab {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   border: none;
   background: none;
   padding: 8px 10px;
@@ -4863,11 +5751,11 @@ a.docx-hyperlink:focus-visible {
   margin-block-end: -1px;
 }
 
-.ep-root .docx-nav__tab:hover {
+.docx-editor .docx-nav__tab:hover {
   color: var(--doc-text);
 }
 
-.ep-root .docx-nav__tab--selected {
+.docx-editor .docx-nav__tab--selected {
   color: var(--doc-primary);
   border-block-end-color: var(--doc-primary);
   font-weight: 600;
@@ -4875,7 +5763,7 @@ a.docx-hyperlink:focus-visible {
 
 /* ── Panels ───────────────────────────────────────────────────────────────── */
 
-.ep-root .docx-nav__panel {
+.docx-editor .docx-nav__panel {
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -4884,11 +5772,11 @@ a.docx-hyperlink:focus-visible {
   gap: 8px;
 }
 
-.ep-root .docx-nav__panel[hidden] {
+.docx-editor .docx-nav__panel[hidden] {
   display: none;
 }
 
-.ep-root .docx-nav__empty {
+.docx-editor .docx-nav__empty {
   margin: 0;
   padding: 8px;
   color: var(--doc-text-subtle);
@@ -4896,7 +5784,7 @@ a.docx-hyperlink:focus-visible {
   line-height: 1.45;
 }
 
-.ep-root .docx-nav__list {
+.docx-editor .docx-nav__list {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -4907,7 +5795,7 @@ a.docx-hyperlink:focus-visible {
 
 /* ── Search box ───────────────────────────────────────────────────────────── */
 
-.ep-root .docx-nav__searchbox {
+.docx-editor .docx-nav__searchbox {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -4918,17 +5806,17 @@ a.docx-hyperlink:focus-visible {
   background: var(--doc-bg-input);
 }
 
-.ep-root .docx-nav__searchbox:focus-within {
+.docx-editor .docx-nav__searchbox:focus-within {
   border-color: var(--doc-primary);
   box-shadow: 0 0 0 1px var(--doc-primary);
 }
 
-.ep-root .docx-nav__search-icon {
+.docx-editor .docx-nav__search-icon {
   color: var(--doc-text-muted);
   flex: none;
 }
 
-.ep-root .docx-nav__search-input {
+.docx-editor .docx-nav__search-input {
   flex: 1;
   min-width: 0;
   border: none;
@@ -4939,16 +5827,21 @@ a.docx-hyperlink:focus-visible {
   color: var(--doc-text);
 }
 
-.ep-root .docx-nav__search-input::placeholder {
+.docx-editor .docx-nav__search-input::-moz-placeholder {
+  color: var(--doc-text-placeholder);
+}
+
+.docx-editor .docx-nav__search-input::placeholder {
   color: var(--doc-text-placeholder);
 }
 
 /* The UA's own clear affordance would sit next to ours. */
-.ep-root .docx-nav__search-input::-webkit-search-cancel-button {
-  appearance: none;
+.docx-editor .docx-nav__search-input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+          appearance: none;
 }
 
-.ep-root .docx-nav__search-clear {
+.docx-editor .docx-nav__search-clear {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4962,14 +5855,14 @@ a.docx-hyperlink:focus-visible {
   cursor: pointer;
 }
 
-.ep-root .docx-nav__search-clear:hover {
+.docx-editor .docx-nav__search-clear:hover {
   background: var(--doc-bg-hover);
   color: var(--doc-text);
 }
 
 /* ── Find: options, counter, results ──────────────────────────────────────── */
 
-.ep-root .docx-nav__options {
+.docx-editor .docx-nav__options {
   display: flex;
   flex-wrap: wrap;
   gap: 4px 12px;
@@ -4977,7 +5870,7 @@ a.docx-hyperlink:focus-visible {
   padding-inline: 2px;
 }
 
-.ep-root .docx-nav__option {
+.docx-editor .docx-nav__option {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -4986,7 +5879,7 @@ a.docx-hyperlink:focus-visible {
   cursor: pointer;
 }
 
-.ep-root .docx-nav__resultbar {
+.docx-editor .docx-nav__resultbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4996,18 +5889,18 @@ a.docx-hyperlink:focus-visible {
   padding-inline: 2px;
 }
 
-.ep-root .docx-nav__count {
+.docx-editor .docx-nav__count {
   font-size: 13px;
   font-weight: 600;
   color: var(--doc-text);
 }
 
-.ep-root .docx-nav__steppers {
+.docx-editor .docx-nav__steppers {
   display: flex;
   gap: 4px;
 }
 
-.ep-root .docx-nav__stepper {
+.docx-editor .docx-nav__stepper {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5425,7 +6318,7 @@ a.docx-hyperlink:focus-visible {
 /* Dark paper inverts the arithmetic: multiplying a tint into a dark sheet drives it to
    black, so the band disappears exactly where it is needed. Screen lightens instead, which
    is the same relationship the light theme has — the paper shifts, the glyphs do not. */
-.ep-root.dark .docx-comment-overlay {
+.docx-editor.dark .docx-comment-overlay {
   mix-blend-mode: screen;
 }
 
@@ -5512,17 +6405,17 @@ a.docx-hyperlink:focus-visible {
   cursor: pointer;
 }
 
-.ep-root .docx-nav__stepper:hover:not(:disabled) {
+.docx-editor .docx-nav__stepper:hover:not(:disabled) {
   background: var(--doc-bg-hover);
   color: var(--doc-text);
 }
 
-.ep-root .docx-nav__stepper:disabled {
+.docx-editor .docx-nav__stepper:disabled {
   opacity: 0.4;
   cursor: default;
 }
 
-.ep-root .docx-nav__result {
+.docx-editor .docx-nav__result {
   display: block;
   width: 100%;
   text-align: start;
@@ -5537,24 +6430,24 @@ a.docx-hyperlink:focus-visible {
   cursor: pointer;
 }
 
-.ep-root .docx-nav__result:hover {
+.docx-editor .docx-nav__result:hover {
   background: var(--doc-bg-hover);
 }
 
 /* The active result reads as the one the caret is on: bordered, like Word's. */
-.ep-root .docx-nav__result--active {
+.docx-editor .docx-nav__result--active {
   border-color: var(--doc-primary);
   color: var(--doc-text);
 }
 
-.ep-root .docx-nav__result-text {
+.docx-editor .docx-nav__result-text {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
-.ep-root .docx-nav__result-hit {
+.docx-editor .docx-nav__result-hit {
   background: none;
   color: var(--doc-text);
   font-weight: 700;
@@ -5562,7 +6455,7 @@ a.docx-hyperlink:focus-visible {
 
 /* ── Headings list ────────────────────────────────────────────────────────── */
 
-.ep-root .docx-nav__heading {
+.docx-editor .docx-nav__heading {
   display: block;
   width: 100%;
   text-align: start;
@@ -5581,18 +6474,18 @@ a.docx-hyperlink:focus-visible {
   text-overflow: ellipsis;
 }
 
-.ep-root .docx-nav__heading:hover {
+.docx-editor .docx-nav__heading:hover {
   background: var(--doc-bg-hover);
 }
 
-.ep-root .docx-nav__heading--current {
+.docx-editor .docx-nav__heading--current {
   background: var(--doc-primary-light);
   font-weight: 600;
 }
 
 /* Reduced motion: the page still moves when it has to, it just does not glide. */
 @media (prefers-reduced-motion: reduce) {
-  .ep-root .docx-editor__scroll-container {
+  .docx-editor .docx-editor__scroll-container {
     transition-duration: 0s;
   }
 }
@@ -5604,7 +6497,7 @@ a.docx-hyperlink:focus-visible {
  * shared `.docx-toolbar__menu` card so a menu row and a toolbar dropdown row are the same
  * object. What the menu adds is the ROW GRID: a fixed icon column so labels line up down
  * the panel, and a right-hand shortcut column. */
-.ep-root .docx-menubar {
+.docx-editor .docx-menubar {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -5618,11 +6511,11 @@ a.docx-hyperlink:focus-visible {
     sans-serif;
 }
 
-.ep-root .docx-menubar__menu-root {
+.docx-editor .docx-menubar__menu-root {
   position: relative;
 }
 
-.ep-root .docx-menubar__trigger {
+.docx-editor .docx-menubar__trigger {
   padding: 4px 8px;
   border: none;
   border-radius: 4px;
@@ -5638,7 +6531,7 @@ a.docx-hyperlink:focus-visible {
 /* An OPT-IN trigger icon. The bar has none by default — Word and Docs do not — so this
  * only ever applies where a host passed one, and it inherits the trigger's colour so the
  * glyph tracks hover and open state with the label. */
-.ep-root .docx-menubar__trigger-icon {
+.docx-editor .docx-menubar__trigger-icon {
   display: inline-flex;
   align-items: center;
   margin-right: 5px;
@@ -5646,13 +6539,13 @@ a.docx-hyperlink:focus-visible {
   color: inherit;
 }
 
-.ep-root .docx-menubar__trigger:hover,
-.ep-root .docx-menubar__trigger[data-open] {
+.docx-editor .docx-menubar__trigger:hover,
+.docx-editor .docx-menubar__trigger[data-open] {
   background: var(--doc-bg-hover);
 }
 
 /* The panel: the shared card, dropped below its trigger. */
-.ep-root .docx-menubar__menu {
+.docx-editor .docx-menubar__menu {
   position: absolute;
   top: 100%;
   left: 0;
@@ -5663,11 +6556,11 @@ a.docx-hyperlink:focus-visible {
 
 /* The row grid: icon | label | shortcut. The icon column is reserved even on a row with
  * no glyph, so nothing shifts between rows. */
-.ep-root .docx-menubar__item {
+.docx-editor .docx-menubar__item {
   gap: 12px;
 }
 
-.ep-root .docx-menubar__item-icon {
+.docx-editor .docx-menubar__item-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5677,41 +6570,41 @@ a.docx-hyperlink:focus-visible {
   color: var(--doc-text-muted);
 }
 
-.ep-root .docx-menubar__item-label {
+.docx-editor .docx-menubar__item-label {
   flex: 1;
   text-align: left;
 }
 
-.ep-root .docx-menubar__item-shortcut,
-.ep-root .docx-menubar__item-caret {
+.docx-editor .docx-menubar__item-shortcut,
+.docx-editor .docx-menubar__item-caret {
   flex: none;
   margin-left: 24px;
   color: var(--doc-text-muted);
   font-size: 12px;
 }
 
-.ep-root .docx-menubar__item-caret {
+.docx-editor .docx-menubar__item-caret {
   margin-left: 16px;
   font-size: 14px;
 }
 
 /* An applied toggle row (Bold on bold text) reads as the checked one. */
-.ep-root .docx-menubar__item[data-active] {
+.docx-editor .docx-menubar__item[data-active] {
   background: var(--doc-primary-light);
 }
 
 /* ── Submenus ──────────────────────────────────────────────────────────────────────── */
-.ep-root .docx-menubar__submenu {
+.docx-editor .docx-menubar__submenu {
   position: relative;
 }
 
-.ep-root .docx-menubar__submenu > .docx-menubar__item[data-open] {
+.docx-editor .docx-menubar__submenu > .docx-menubar__item[data-open] {
   background: var(--doc-bg-hover);
 }
 
 /* Opens to the RIGHT of its parent row, top-aligned with it — Word's and Docs' geometry.
  * The small negative offset pulls the panel's padding back onto the row. */
-.ep-root .docx-menubar__submenu-panel {
+.docx-editor .docx-menubar__submenu-panel {
   top: -4px;
   left: 100%;
   margin-top: 0;
@@ -5726,7 +6619,7 @@ a.docx-hyperlink:focus-visible {
 
 /* A named section of rows. The heading is decoration (the group carries the accessible name),
    so it is sized to read as a label rather than as a row. */
-.ep-root .docx-menubar__group-label {
+.docx-editor .docx-menubar__group-label {
   padding: 8px 12px 4px;
   color: var(--doc-text-subtle, #8a8f98);
   font-size: 10px;
@@ -5736,29 +6629,29 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* No leading gap on the first group: the panel's own padding is already there. */
-.ep-root .docx-menubar__group:first-child > .docx-menubar__group-label {
+.docx-editor .docx-menubar__group:first-child > .docx-menubar__group-label {
   padding-top: 2px;
 }
 
 /* ── The insert-table size grid ────────────────────────────────────────────────────── */
-.ep-root .docx-menubar__grid {
+.docx-editor .docx-menubar__grid {
   padding: 8px;
 }
 
 /* Rows are real elements now (`role="row"`), so the cells lay out per row rather than as
  * one grid container. */
-.ep-root .docx-menubar__grid-cells {
+.docx-editor .docx-menubar__grid-cells {
   display: flex;
   flex-direction: column;
   gap: 3px;
 }
 
-.ep-root .docx-menubar__grid-row {
+.docx-editor .docx-menubar__grid-row {
   display: flex;
   gap: 3px;
 }
 
-.ep-root .docx-menubar__grid-cell {
+.docx-editor .docx-menubar__grid-cell {
   width: 22px;
   height: 22px;
   padding: 0;
@@ -5771,12 +6664,12 @@ a.docx-hyperlink:focus-visible {
     border-color 0.06s ease;
 }
 
-.ep-root .docx-menubar__grid-cell[data-filled] {
+.docx-editor .docx-menubar__grid-cell[data-filled] {
   background: var(--doc-primary);
   border-color: var(--doc-primary);
 }
 
-.ep-root .docx-menubar__grid-caption {
+.docx-editor .docx-menubar__grid-caption {
   min-height: 18px;
   padding-top: 6px;
   text-align: center;
@@ -5802,7 +6695,7 @@ a.docx-hyperlink:focus-visible {
  * one definition. What this block adds is only what differs: the panel is placed in client
  * space by the component rather than relative to a trigger, and it sits above the dialogs
  * and dropdowns (z-index 40) because it is opened ON them as often as on the page. */
-.ep-root .docx-contextmenu,
+.docx-editor .docx-contextmenu,
 .docx-contextmenu {
   z-index: 45;
   min-width: 240px;
@@ -5813,7 +6706,7 @@ a.docx-hyperlink:focus-visible {
   overflow-y: auto;
 }
 
-/* The panel is `position: fixed`, so it renders OUTSIDE the `.ep-root` cascade's usual
+/* The panel is `position: fixed`, so it renders OUTSIDE the `.docx-editor` cascade's usual
  * geometry but still inside its subtree — the token values resolve, and this block is
  * duplicated unscoped above so a host that mounts the viewport without the wrapper class
  * still gets the card. Focus ring on the panel itself is suppressed: it takes focus only
@@ -5917,13 +6810,13 @@ a.docx-hyperlink:focus-visible {
   border: 0;
 }
 
-.ep-root .docx-toolbar__image-wrap,
+.docx-editor .docx-toolbar__image-wrap,
 .docx-toolbar__image-wrap {
   position: relative;
   display: inline-flex;
 }
 
-.ep-root .docx-toolbar__image-wrap-menu,
+.docx-editor .docx-toolbar__image-wrap-menu,
 .docx-toolbar__image-wrap-menu {
   position: absolute;
   top: calc(100% + 4px);
@@ -5937,7 +6830,7 @@ a.docx-hyperlink:focus-visible {
   box-shadow: 0 4px 16px var(--doc-shadow);
 }
 
-.ep-root .docx-toolbar__image-wrap-item,
+.docx-editor .docx-toolbar__image-wrap-item,
 .docx-toolbar__image-wrap-item {
   display: block;
   width: 100%;
@@ -5950,18 +6843,18 @@ a.docx-hyperlink:focus-visible {
   cursor: pointer;
 }
 
-.ep-root .docx-toolbar__image-wrap-item[data-active],
+.docx-editor .docx-toolbar__image-wrap-item[data-active],
 .docx-toolbar__image-wrap-item[data-active] {
   background: var(--doc-surface-hover, rgb(0 0 0 / 6%));
 }
 
-.ep-root .docx-toolbar__alt-text,
+.docx-editor .docx-toolbar__alt-text,
 .docx-toolbar__alt-text {
   position: relative;
   display: inline-flex;
 }
 
-.ep-root .docx-toolbar__alt-text-panel,
+.docx-editor .docx-toolbar__alt-text-panel,
 .docx-toolbar__alt-text-panel {
   position: absolute;
   top: calc(100% + 4px);
@@ -6015,3 +6908,199 @@ a.docx-hyperlink:focus-visible {
   outline: 2px solid var(--doc-primary);
   outline-offset: 1px;
 }
+
+.docx-editor .first\:pl-0:first-child {
+  padding-left: 0px;
+}
+
+.docx-editor .last\:border-r-0:last-child {
+  border-right-width: 0px;
+}
+
+.docx-editor .hover\:border-input:hover {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
+}
+
+.docx-editor .hover\:bg-accent:hover {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
+}
+
+.docx-editor .hover\:bg-destructive\/90:hover {
+  background-color: hsl(var(--destructive) / 0.9);
+}
+
+.docx-editor .hover\:bg-doc-bg-hover:hover {
+  background-color: var(--doc-bg-hover);
+}
+
+.docx-editor .hover\:bg-muted:hover {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
+}
+
+.docx-editor .hover\:bg-muted\/80:hover {
+  background-color: hsl(var(--muted) / 0.8);
+}
+
+.docx-editor .hover\:bg-primary\/90:hover {
+  background-color: hsl(var(--primary) / 0.9);
+}
+
+.docx-editor .hover\:bg-secondary\/80:hover {
+  background-color: hsl(var(--secondary) / 0.8);
+}
+
+.docx-editor .hover\:text-accent-foreground:hover {
+  --tw-text-opacity: 1;
+  color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
+}
+
+.docx-editor .hover\:text-foreground:hover {
+  --tw-text-opacity: 1;
+  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
+}
+
+.docx-editor .hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
+.docx-editor .focus\:bg-doc-bg-input:focus {
+  background-color: var(--doc-bg-input);
+}
+
+.docx-editor .focus\:bg-muted:focus {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
+}
+
+.docx-editor .focus\:bg-muted\/80:focus {
+  background-color: hsl(var(--muted) / 0.8);
+}
+
+.docx-editor .focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.docx-editor .focus\:ring-1:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.docx-editor .focus\:ring-ring:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity, 1));
+}
+
+.docx-editor .focus-visible\:outline-none:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.docx-editor .focus-visible\:ring-2:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.docx-editor .focus-visible\:ring-ring:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity, 1));
+}
+
+.docx-editor .focus-visible\:ring-offset-2:focus-visible {
+  --tw-ring-offset-width: 2px;
+}
+
+.docx-editor .disabled\:pointer-events-none:disabled {
+  pointer-events: none;
+}
+
+.docx-editor .disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+
+.docx-editor .disabled\:opacity-50:disabled {
+  opacity: 0.5;
+}
+
+.docx-editor .data-\[disabled\]\:pointer-events-none[data-disabled] {
+  pointer-events: none;
+}
+
+.docx-editor .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
+  --tw-translate-y: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.docx-editor .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
+  --tw-translate-y: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.docx-editor .data-\[disabled\]\:opacity-50[data-disabled] {
+  opacity: 0.5;
+}
+
+.docx-editor .data-\[state\=open\]\:animate-in[data-state="open"] {
+  animation-name: docx-editor-enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+
+.docx-editor .data-\[state\=closed\]\:animate-out[data-state="closed"] {
+  animation-name: docx-editor-exit;
+  animation-duration: 150ms;
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
+
+.docx-editor .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
+  --tw-exit-opacity: 0;
+}
+
+.docx-editor .data-\[state\=open\]\:fade-in-0[data-state="open"] {
+  --tw-enter-opacity: 0;
+}
+
+.docx-editor .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
+  --tw-exit-scale: .95;
+}
+
+.docx-editor .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
+  --tw-enter-scale: .95;
+}
+
+.docx-editor .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
+  --tw-enter-translate-y: -0.5rem;
+}
+
+.docx-editor .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
+  --tw-enter-translate-y: 0.5rem;
+}
+
+.docx-editor .dark\:bg-muted:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
+}
+
+.docx-editor .dark\:text-foreground:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
+}
+
+.docx-editor :is(.\[\&\>span\]\:truncate>span) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}