diff --git a/content/programming/cxx.tree b/content/programming/cxx.tree
index ebd3c84..d9f4030 100644
--- a/content/programming/cxx.tree
+++ b/content/programming/cxx.tree
@@ -1,14 +1,20 @@
+% id = "01H9R1KJESR2F420HE67HW4AVR"
 - design lessons from the best programming language of all time that everyone loves (not really)
 
+% id = "programming/cxx/access-modifiers-as-labels"
 + access modifiers as labels (`private:`, `protected:`, and `public:`)
 
+    % id = "01H9R1KJES39Z6RBCKY4E71PYD"
     - although Java and C#'s approach to symbol privacy may be verbose, it has one great advantage: it is stateless.
 
+    % id = "01H9R1KJES17626QXYEGM7XBC7"
     - the way they're implemented in C++, it's essentially a bit more parsing state you have to keep track of
 
+        % id = "01H9R1KJESG4K8T1K1G36T7HBP"
         - and you know what other parsing state you have to keep track of in C++? - that's right, the preprocessor.\
-        access modifiers, like all tokens, are affected by the preprocessor, and you have to take that into account
+        access modifiers, like all tokens, are affected by the preprocessor, and you have to take that into account.
 
+            % id = "01H9R1KJESJ0G0VQAW994ZHR0S"
             - take the following example:
             ```cpp
             class ComfyZone
@@ -26,20 +32,29 @@
             };
             ```
 
-                - although quite contrived, it illustrates the problem pretty well
+                % id = "01H9R1KJESDDX4089WVHVV8N3H"
+                + although quite contrived, it illustrates the problem pretty well
 
+                    % id = "01H9R1KJESD2KED5TAFBY426A6"
                     - (before you ask, `_remaining_hugs` needs to be always present because it has to be (de)serialized no matter if hugging functionality is compiled in. otherwise we'd get data loss.)
 
+                % id = "01H9R1KJESES27VKVW4A0ZVM11"
                 - we intended for `_remaining_hugs` to be private, but if hugs are enabled, it becomes public.
 
+                    % id = "01H9R1KJESTKW90R788SSPMNC6"
                     - this can be _very_ hard to spot if you have a big class with lots of declarations inside.
 
+            % id = "01H9R1KJESCJ3VC8ATPYFDCPSP"
             - this can be worked around by banning access modifiers from appearing in `#ifdef`s, but you have to *realize* that this might happen
 
-                - and I've seen instances of this exact thing occurring in the Unreal Engine codebase, which is *full* of long lists of declarations (made even longer by the prevalence of `UPROPERTY()`s)
+                % id = "01H9R1KJES4ZYHVADDF80WAXH6"
+                - and I've seen instances of this exact thing occurring in the Unreal Engine codebase, which is *full* of long lists of declarations (made even longer by the prevalence of `UPROPERTY()` specifiers)
 
+    % id = "01H9R1KJES182MCV2V0A4VHKKX"
     - even if we didn't have the preprocessor, that access modifier is state _you_ have to keep track of
 
+        % id = "01H9R1KJESH7PWNKCKW3H0WJHW"
         - I very often find myself needing to scroll upward after <kbd>Ctrl</kbd>-clicking on a field or function declaration, just to find out if I can use it
 
+            % id = "01H9R1KJESFE6F1D4J5PA5Q381"
             - (thankfully IDEs are helpful here and Rider shows you a symbol's visibility in the tooltip on hover, but I don't have Rider on code reviews)
diff --git a/static/css/main.css b/static/css/main.css
index 224b8e4..43516ff 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -75,7 +75,8 @@ body::selection {
 
 body,
 pre,
-code {
+code,
+kbd {
     font-family: 'RecVar', sans-serif;
     font-size: 14px;
     line-height: 1.5;
@@ -133,7 +134,8 @@ h4 {
 }
 
 pre,
-code {
+code,
+kbd {
     --recursive-mono: 1.0;
     --recursive-casl: 0.0;
     --recursive-slnt: 0.0;
@@ -179,6 +181,12 @@ code {
     border-radius: 4px;
 }
 
+kbd {
+    padding: 3px 6px;
+    border: 1px solid var(--border-1);
+    border-radius: 6px;
+}
+
 pre {
     padding: 8px 12px;
     margin: 12px 0;
@@ -187,7 +195,9 @@ pre {
 }
 
 pre>code {
+    padding: 0;
     background: none;
+    border-radius: 0px;
 }
 
 /* And don't let code examples fly off and overflow the window */