diff --git a/common/content/bindings.xml b/common/content/bindings.xml
index edde99e8..43cce80f 100644
--- a/common/content/bindings.xml
+++ b/common/content/bindings.xml
@@ -13,6 +13,13 @@
         </content>
     </binding>
 
+    <binding id="magic" inheritstyle="false">
+        <content>
+            <html:span xbl:inherits="dactyl:highlight=dactyl:highlight,number,style" />
+        </content>
+    </binding>
+
+
     <binding id="compitem-td">
         <!-- No white space. The table is white-space: pre; :( -->
         <content><html:span class="td-strut"/><html:span class="td-span"><children/></html:span></content>
diff --git a/common/content/configbase.js b/common/content/configbase.js
index ebf9d0c7..e1e1df1f 100644
--- a/common/content/configbase.js
+++ b/common/content/configbase.js
@@ -146,7 +146,7 @@ const ConfigBase = Class(ModuleBase, {
      * @property {string} The default highlighting rules.
      * See {@link Highlights#loadCSS} for details.
      */
-    CSS: UTF8(<><![CDATA[
+    CSS: UTF8(String.replace(<><![CDATA[
         // <css>
         Boolean      color: red;
         Function     color: navy;
@@ -162,22 +162,14 @@ const ConfigBase = Class(ModuleBase, {
 
         // Hack to give these groups slightly higher precedence
         // than their unadorned variants.
-        CmdCmdLine;[dactyl|highlight]>*
-        StatusCmdLine;[dactyl|highlight]>*
-        CmdNormal;[dactyl|highlight]
-        StatusNormal;[dactyl|highlight]
-        CmdErrorMsg;[dactyl|highlight]
-        StatusErrorMsg;[dactyl|highlight]
-        CmdInfoMsg;[dactyl|highlight]
-        StatusInfoMsg;[dactyl|highlight]
-        CmdModeMsg;[dactyl|highlight]
-        StatusModeMsg;[dactyl|highlight]
-        CmdMoreMsg;[dactyl|highlight]
-        StatusMoreMsg;[dactyl|highlight]
-        CmdQuestion;[dactyl|highlight]
-        StatusQuestion;[dactyl|highlight]
-        CmdWarningMsg;[dactyl|highlight]
-        StatusWarningMsg;[dactyl|highlight]
+        CmdCmdLine;[dactyl|highlight]>*  &#x0d; StatusCmdLine;[dactyl|highlight]>*
+        CmdNormal;[dactyl|highlight]     &#x0d; StatusNormal;[dactyl|highlight]
+        CmdErrorMsg;[dactyl|highlight]   &#x0d; StatusErrorMsg;[dactyl|highlight]
+        CmdInfoMsg;[dactyl|highlight]    &#x0d; StatusInfoMsg;[dactyl|highlight]
+        CmdModeMsg;[dactyl|highlight]    &#x0d; StatusModeMsg;[dactyl|highlight]
+        CmdMoreMsg;[dactyl|highlight]    &#x0d; StatusMoreMsg;[dactyl|highlight]
+        CmdQuestion;[dactyl|highlight]   &#x0d; StatusQuestion;[dactyl|highlight]
+        CmdWarningMsg;[dactyl|highlight] &#x0d; StatusWarningMsg;[dactyl|highlight]
 
         !Normal           color: black   !important; background: white   !important; font-weight: normal !important;
         !StatusNormal     color: inherit !important; background: inherit !important;
@@ -270,19 +262,21 @@ const ConfigBase = Class(ModuleBase, {
         !Bell         background-color: black !important;
         Hint;;* {
             /* This gets released into the wild, so everything is important */
-            font: bold 10px monospace !important;
+            font-size: 10px        !important;
+            font-family: monospace !important;
+            font-weight: bold      !important;
             background-color: red   !important;
             color:            white !important;
             border:  0px solid ButtonShadow !important;
             padding: 0px 1px                !important;
         }
-        !Hint::after;;*  content: attr(number) !important;
-        !HintElem;;*     background-color: yellow  !important; color: black !important;
-        !HintActive;;*   background-color: #88FF00 !important; color: black !important;
-        !HintImage;;*    opacity: .5 !important;
+        Hint::after;;*  content: attr(number) !important;
+        HintElem;;*     background-color: yellow  !important; color: black !important;
+        HintActive;;*   background-color: #88FF00 !important; color: black !important;
+        HintImage;;*    opacity: .5 !important;
 
         // </css>
-    ]]></>),
+    ]]></>, /&#x0d;/g, "\n")),
 
     helpCSS: UTF8(<><![CDATA[
         // <css>
diff --git a/common/content/hints.js b/common/content/hints.js
index 0fe7ab4a..e511570a 100644
--- a/common/content/hints.js
+++ b/common/content/hints.js
@@ -287,7 +287,7 @@ const Hints = Module("hints", {
             return true;
         }
 
-        let baseNodeAbsolute = util.xmlToDom(<span highlight="Hint"/>, doc);
+        let baseNodeAbsolute = util.xmlToDom(<span highlight="Hint" dactyl:class="magic" xmlns:dactyl={NS}/>, doc);
 
         let mode = this._hintMode;
         let res = util.evaluateXPath(mode.xpath, doc, null, true);
@@ -371,11 +371,11 @@ const Hints = Module("hints", {
      * @param {boolean} active Whether it is the currently active hint or not.
      */
     _setClass: function _setClass(elem, active) {
-        let prefix = (elem.getAttributeNS(NS, "class") || "") + " ";
+        let prefix = (elem.getAttributeNS(NS, "hl") || "") + " ";
         if (active)
-            elem.setAttributeNS(NS, "highlight", prefix + "HintActive");
+            highlight.highlightNode(elem, prefix + "HintActive");
         else if (active != null)
-            elem.setAttributeNS(NS, "highlight", prefix + "HintElem");
+            highlight.highlightNode(elem, prefix + "HintElem");
         else
             elem.removeAttributeNS(NS, "highlight");
     },
@@ -412,7 +412,7 @@ const Hints = Module("hints", {
                         if (!rect)
                             continue;
 
-                        hint.imgSpan = util.xmlToDom(<span highlight="Hint" dactyl:class="HintImage" xmlns:dactyl={NS}/>, doc);
+                        hint.imgSpan = util.xmlToDom(<span dactyl:class="magic" dactyl:hl="Hint" dactyl:hl="HintImage" xmlns:dactyl={NS}/>, doc);
                         hint.imgSpan.style.left = (rect.left + offsetX) + "px";
                         hint.imgSpan.style.top = (rect.top + offsetY) + "px";
                         hint.imgSpan.style.width = (rect.right - rect.left) + "px";
diff --git a/common/skin/dactyl.css b/common/skin/dactyl.css
index 44ec214d..521b4b7f 100644
--- a/common/skin/dactyl.css
+++ b/common/skin/dactyl.css
@@ -3,7 +3,18 @@
 
 /* Applied to all content */
 [dactyl|activeframe] {
-    -moz-binding: url(chrome://dactyl/content/bindings.xml#frame);
+    -moz-binding: url(chrome://dactyl/content/bindings.xml#frame) !important;
+}
+
+[dactyl|class~=magic] > [dactyl|highlight=Hint] {
+    visibility: visible !important;
+}
+[dactyl|class~=magic] {
+    -moz-binding: url(chrome://dactyl/content/bindings.xml#magic) !important;
+    visibility: hidden !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
 }
 
 [dactyl|highlight~=HintImage],