diff --git a/docs/source/_assets/less/main.less b/docs/source/_assets/less/main.less
index cd616ddfa..aab860df3 100644
--- a/docs/source/_assets/less/main.less
+++ b/docs/source/_assets/less/main.less
@@ -1,7 +1,7 @@
 @tailwind reset;
 
 html {
-  font-size: 12px;
+  font-size: 14px;
 
   @media (min-width: 420px) {
     font-size: 16px;
@@ -13,10 +13,16 @@ a {
   text-decoration: none;
 }
 
-ol, ul {
+ol,
+ul {
   @apply .list-reset;
 }
 
+@import "prism";
+@import "markdown";
+
+@tailwind utilities;
+
 .bg-pattern {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='778' viewBox='0 0 600 778' %3E%3Cg fill='%23E8ECEF'%3E%3Cpath d='M0 31h133V0h2v237a2 2 0 0 1-2 2H0v-2h133v-18H0v-2h133v-42H0v-2h133v-72H0v-2h133V33H0v-2zm0 20h14a1 1 0 0 1 0 2H0v-2zm0 89h11a1 1 0 1 1 0 2H0v-2zm0 6h16a1 1 0 1 1 0 2H0v-2zm0 4h14a1 1 0 1 1 0 2H0v-2zm0 4h16a1 1 0 1 1 0 2H0v-2zm0 4h12a1 1 0 1 1 0 2H0v-2zm0-99h36a1 1 0 0 1 0 2H0v-2zm0 4h34a1 1 0 0 1 0 2H0v-2zm0 4h32a1 1 0 0 1 0 2H0v-2zm0 4h34a1 1 0 0 1 0 2H0v-2zm0 4h32a1 1 0 0 1 0 2H0v-2zm0 39.46a10 10 0 0 1 0 19.08v-2.12a8 8 0 0 0 0-14.84v-2.12zM12 2h66a1 1 0 0 1 0 2H12a1 1 0 0 1 0-2zm10 4h46a1 1 0 0 1 0 2H22a1 1 0 0 1 0-2zm9 6h10a3 3 0 0 1 0 6H31a3 3 0 0 1 0-6zm-6 186h40a3 3 0 0 1 0 6H25a3 3 0 0 1 0-6zM49 12h10a3 3 0 0 1 0 6H49a3 3 0 0 1 0-6zm-4 220a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm12 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-20-92h28a1 1 0 1 1 0 2H31a1 1 0 1 1 0-2zm-10 48h48a1 1 0 1 1 0 2H21a1 1 0 1 1 0-2zm5 36h38a1 1 0 1 1 0 2H26a1 1 0 1 1 0-2zm-15-32h68a1 1 0 1 1 0 2H11a1 1 0 1 1 0-2zm17-46h34a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm2 4h30a1 1 0 1 1 0 2H30a1 1 0 1 1 0-2zm2 4h26a1 1 0 1 1 0 2H32a1 1 0 1 1 0-2zm-4 4h34a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm53-18h24a1 1 0 1 1 0 2H81a1 1 0 1 1 0-2zm-3 6h30a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm-4 4h38a1 1 0 1 1 0 2H74a1 1 0 1 1 0-2zm2 4h34a1 1 0 1 1 0 2H76a1 1 0 1 1 0-2zm2 4h30a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zM55 46h56a2 2 0 0 1 2 2v36a2 2 0 0 1-2 2H55a2 2 0 0 1-2-2V48c0-1.1.9-2 2-2zm38 88a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm-48 0a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm48-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-48 0a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm10-84v36h56V48H55zm13 32h-8a1 1 0 0 1-1-1v-8a1 1 0 0 1 1.7-.7l8 8A1 1 0 0 1 68 80zM56 200v2h9a1 1 0 1 0 0-2h-9zm-2 0H25a1 1 0 1 0 0 2h29v-2zM31 14a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2H31zm18 0a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2H49zM0 761v-2h133v-12H0v-2h133a2 2 0 0 1 2 2v31h-2v-17H0zm22 13h46a1 1 0 1 1 0 2H22a1 1 0 1 1 0-2zm82-22h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zM0 471v-2h133v-87H0v-2h17v-44H0v-2h103v-6H0v-2h103v-1a1 1 0 0 0-1-1H0v-2h102a3 3 0 0 1 3 3v55h28V261H0v-2h133a2 2 0 0 1 2 2v270a2 2 0 0 1-2 2H0v-2h133v-16H0v-2h133v-42H0zm8-68a1 1 0 1 1 0 2H0v-2h8zM0 522h6a1 1 0 1 1 0 2H0v-2zm0-113h12a1 1 0 1 1 0 2H0v-2zm0 4h8a1 1 0 1 1 0 2H0v-2zm0 4h6a1 1 0 1 1 0 2H0v-2zm6 23a1 1 0 1 1 0 2H0v-2h6zm-6 6h6a1 1 0 1 1 0 2H0v-2zm0 4h10a1 1 0 1 1 0 2H0v-2zm0 4h6a1 1 0 1 1 0 2H0v-2zm103-74v-44H19v44h84zm-81-95h46a1 1 0 1 1 0 2H22a1 1 0 1 1 0-2zm-10 8h66a1 1 0 1 1 0 2H12a1 1 0 1 1 0-2zm10 4h46a1 1 0 1 1 0 2H22a1 1 0 1 1 0-2zm15 6h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H37a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm1 4h14v-2H38v2zm0-32h14a1 1 0 1 1 0 2H38a1 1 0 1 1 0-2zm7-2a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm60 252a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm12 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-75-41h18a1 1 0 1 1 0 2H36a1 1 0 1 1 0-2zm-25 4h68a1 1 0 1 1 0 2H11a1 1 0 1 1 0-2zm-10 6h88a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2zm12 4h64a1 1 0 1 1 0 2H13a1 1 0 1 1 0-2zm15-95h24a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm1-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-1 10h29a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm0 4h35a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm0 4h32a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm50-14h22a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm1-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-1 10h34a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm0 4h30a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm0 4h33a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm-50 23h20a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm1-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-1 10h29a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm0 4h31a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm0 4h34a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm50-14h26a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm1-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-1 10h30a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm0 4h26a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm0 4h29a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2z'/%3E%3Cpath d='M0 555v-2h133a2 2 0 0 1 2 2v168a2 2 0 0 1-2 2H0v-2h133V569H0v-2h133v-12H0zm16 3h58a3 3 0 0 1 0 6H16a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h58a1 1 0 1 0 0-2H16zm88 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-14 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-75 21h60a2 2 0 0 1 2 2v46a2 2 0 0 1-2 2H15a2 2 0 0 1-2-2v-46c0-1.1.9-2 2-2zm0 52h60a2 2 0 0 1 2 2v36a2 2 0 0 1-2 2H15a2 2 0 0 1-2-2v-36c0-1.1.9-2 2-2zm0 42h60a2 2 0 0 1 2 2v36a2 2 0 0 1-2 2H15a2 2 0 0 1-2-2v-36c0-1.1.9-2 2-2zm68-94h28a2 2 0 0 1 2 2v24a2 2 0 0 1-2 2H83a2 2 0 0 1-2-2v-24c0-1.1.9-2 2-2zm0 2v24h28v-24H83zm0 28h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2H83a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm0 2v26h28v-26H83zm-8 8H15v8h60v-8zm0 82v-26H15v26h60zm0 2H15v8h60v-8zm0-44v-26H15v26h60zm0 2H15v8h60v-8zm0-44v-36H15v36h60zm-61-44h15a1 1 0 1 1 0 2H14a1 1 0 1 1 0-2zm68 0h15a1 1 0 1 1 0 2H82a1 1 0 1 1 0-2zm0 70h30a1 1 0 1 1 0 2H82a1 1 0 1 1 0-2zm0 4h30a1 1 0 1 1 0 2H82a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2H82a1 1 0 1 1 0-2z'/%3E%3Cpath d='M600 31v2h-43v66h43v2h-43v72h43v2h-43v42h43v2h-43v18h43v2h-43a2 2 0 0 1-2-2V0h2v31h43zm0 20v2h-22a1 1 0 1 1 0-2h22zm0 89v2h-17a1 1 0 1 1 0-2h17zm0 6v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-20a1 1 0 1 1 0-2h20zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-18a1 1 0 1 1 0-2h18zm0-99v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 39.46v2.12a8 8 0 1 0 0 14.84v2.12a10 10 0 1 1 0-19.08zM578 79h17a1 1 0 1 1 0 2h-17a1 1 0 1 1 0-2zm22 682h-43v17h-2v-31c0-1.1.9-2 2-2h43v2h-43v12h43v2zm-21-6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm21-284h-43v42h43v2h-43v16h43v2h-43a2 2 0 0 1-2-2V261c0-1.1.9-2 2-2h43v2h-43v119h28v-55a3 3 0 0 1 3-3h12v2h-12a1 1 0 0 0-1 1v1h13v2h-13v6h13v2h-13v44h13v2h-43v87h43v2zm0-68v2h-22a1 1 0 1 1 0-2h22zm0 119v2h-22a1 1 0 1 1 0-2h22zm0-113v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 23v2h-22a1 1 0 1 1 0-2h22zm0 6v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm-21-55a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 37a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3Cpath d='M600 555h-43v12h43v2h-43v154h43v2h-43a2 2 0 0 1-2-2V555c0-1.1.9-2 2-2h43v2zm-16 5h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm-2 27h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm-4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm4-24h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm0 6h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm0 6h11a1 1 0 1 1 0 2h-11a1 1 0 1 1 0-2zm0 6h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm0 6h11a1 1 0 1 1 0 2h-11a1 1 0 1 1 0-2zm4-42h11a1 1 0 1 1 0 2h-11a1 1 0 1 1 0-2zm0 4h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-8-4h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm1 2v2h2v-2h-2zm0-14a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3Cpath d='M157 201h176a2 2 0 0 1 2 2v334a2 2 0 0 1-2 2H157a2 2 0 0 1-2-2V203c0-1.1.9-2 2-2zm176 294v-78H157v78h176zm0 2H157v40h176v-40zm0-82v-44H157v44h176zm0-46V267H157v102h176zm0-104v-62H157v62h176zm-155-38h56a1 1 0 1 1 0 2h-56a1 1 0 1 1 0-2zm0 6h76a1 1 0 1 1 0 2h-76a1 1 0 1 1 0-2zm0 4h66a1 1 0 1 1 0 2h-66a1 1 0 1 1 0-2zm0 6h14a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-14a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm1 2v2h12v-2h-12zm17-2h14a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-14a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm1 4h12v-2h-12v2zm107-39h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-93 3a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm2 180v4a1 1 0 0 1-1.7.7l-2-2a1 1 0 0 1 0-1.4l2-2a1 1 0 0 1 1.7.7zm128 0a1 1 0 0 1 1.7-.7l2 2a1 1 0 0 1 0 1.4l-2 2a1 1 0 0 1-1.7-.7v-4zM178 283h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 6h78a1 1 0 1 1 0 2h-78a1 1 0 1 1 0-2zm0 4h66a1 1 0 1 1 0 2h-66a1 1 0 1 1 0-2zm28 94h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm-28 82h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 36h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm36 0h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36 0h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36 0h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm-108 4h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36 0h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm36 0h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm36 0h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm-108 4h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm36 0h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36 0h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm36 0h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm-108 4h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm0 10h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36-10h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm36 0h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36 0h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm-108-44h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm48-8h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm48-8h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h32a1 1 0 1 1 0 2h-32a1 1 0 1 1 0-2zm0 4h34a1 1 0 1 1 0 2h-34a1 1 0 1 1 0-2zm-68-84h78a1 1 0 1 1 0 2h-78a1 1 0 1 1 0-2zm0 4h66a1 1 0 1 1 0 2h-66a1 1 0 1 1 0-2zm-28-56h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 6h58a1 1 0 1 1 0 2h-58a1 1 0 1 1 0-2zm0 4h54a1 1 0 1 1 0 2h-54a1 1 0 1 1 0-2zm72-10h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 6h60a1 1 0 1 1 0 2h-60a1 1 0 1 1 0-2zm0 4h46a1 1 0 1 1 0 2h-46a1 1 0 1 1 0-2zm1-52h60a2 2 0 0 1 2 2v32a2 2 0 0 1-2 2h-60a2 2 0 0 1-2-2v-32c0-1.1.9-2 2-2zm0 2v32h60v-32h-60zm-72-2h60a2 2 0 0 1 2 2v32a2 2 0 0 1-2 2h-60a2 2 0 0 1-2-2v-32c0-1.1.9-2 2-2zm0 2v32h60v-32h-60zm5 28a1 1 0 0 1-1-1v-6a1 1 0 0 1 1.7-.7l6 6a1 1 0 0 1-.7 1.7h-6zm72 0a1 1 0 0 1-1-1v-6a1 1 0 0 1 1.7-.7l6 6a1 1 0 0 1-.7 1.7h-6zm49 201a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm12 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-132-97h36a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-36a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm48 0h36a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-36a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm48 0h36a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-36a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm36 22v-20h-36v20h36zm0 2h-36v4h36v-4zm-48-2v-20h-36v20h36zm0 2h-36v4h36v-4zm-48-2v-20h-36v20h36zm0 2h-36v4h36v-4zM157 7h176a2 2 0 0 1 2 2v170a2 2 0 0 1-2 2H157a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2zm176 55.48l-8.55 3.42-9.94 5.96a1 1 0 0 1-.41.14l-10 1a1 1 0 0 1-.55-.1l-9.88-4.95-9.57-1.91-9.73 3.89a1 1 0 0 1-1-.15l-9.3-7.44-9.36 9.37a1 1 0 0 1-.9.27l-9.71-1.94-9.73 3.89a1 1 0 0 1-.74 0l-9.73-3.9-9.4 1.9-9.5 9.48V93h128V62.48zm0-2.16V45H205v33.59l8.3-8.3a1 1 0 0 1 .5-.27l10-2a1 1 0 0 1 .57.05l9.63 3.85 9.63-3.85a1 1 0 0 1 .57-.05l9.47 1.9 9.62-9.63a1 1 0 0 1 1.33-.07l9.55 7.64 9.46-3.79a1 1 0 0 1 .57-.05l10 2a1 1 0 0 1 .25.09l9.74 4.87 9.49-.95 9.8-5.89.15-.07 9.37-3.75zm0 42.68v-8H205v8h128zm0 2H205v64h128v-64zm0-62V23H205v20h128zm0-22V9H205v12h128zM157 169h46V9h-46v160zm0 2v8h176v-8H157zm53-143h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 80h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 8h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm0 8h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 8h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm0 8h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 8h13a1 1 0 1 1 0 2h-13a1 1 0 1 1 0-2zm0 8h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 8h15a1 1 0 1 1 0 2h-15a1 1 0 1 1 0-2zm32-56h13a1 1 0 1 1 0 2h-13a1 1 0 1 1 0-2zm0 8h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm0 8h17a1 1 0 1 1 0 2h-17a1 1 0 1 1 0-2zm0 8h13a1 1 0 1 1 0 2h-13a1 1 0 1 1 0-2zm0 8h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm0 8h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 8h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm0 8h15a1 1 0 1 1 0 2h-15a1 1 0 1 1 0-2zm32-56h13a1 1 0 1 1 0 2h-13a1 1 0 1 1 0-2zm0 8h17a1 1 0 1 1 0 2h-17a1 1 0 1 1 0-2zm0 8h11a1 1 0 1 1 0 2h-11a1 1 0 1 1 0-2zm0 8h15a1 1 0 1 1 0 2h-15a1 1 0 1 1 0-2zm0 8h13a1 1 0 1 1 0 2h-13a1 1 0 1 1 0-2zm0 8h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm0 8h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 8h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm32-56h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm0 8h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 8h15a1 1 0 1 1 0 2h-15a1 1 0 1 1 0-2zm0 8h15a1 1 0 1 1 0 2h-15a1 1 0 1 1 0-2zm0 8h13a1 1 0 1 1 0 2h-13a1 1 0 1 1 0-2zm0 8h15a1 1 0 1 1 0 2h-15a1 1 0 1 1 0-2zm0 8h17a1 1 0 1 1 0 2h-17a1 1 0 1 1 0-2zm0 8h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zM210 36h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm16 0h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm16 0h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm16 0h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm-46-24h38a3 3 0 0 1 0 6h-38a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h38a1 1 0 1 0 0-2h-38zm90 12h8a3 3 0 0 1 0 6h-8a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-8zm16-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm8-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-164-3h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 6h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm0 6h15a1 1 0 1 1 0 2h-15a1 1 0 1 1 0-2zm0 6h11a1 1 0 1 1 0 2h-11a1 1 0 1 1 0-2zm0 10h13a1 1 0 1 1 0 2h-13a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h19a1 1 0 1 1 0 2h-19a1 1 0 1 1 0-2zm0 6h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm166-57a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-6 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-6 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-148 0h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm-5 3a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-6 542h176a2 2 0 0 1 2 2v202a2 2 0 0 1-2 2H157a2 2 0 0 1-2-2V561c0-1.1.9-2 2-2zm176 20H157v10h176v-10zm0-2v-16H157v16h176zm0 14H157v172h176V591zm-33-25h10a3 3 0 0 1 0 6h-10a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2h-10zM178 703h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm48-8h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm-48 12h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm48-8h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm-48 12h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm48-8h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm48-146h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm-96-8h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm96 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-96-14h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm0-17h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm0 4h9a1 1 0 1 1 0 2h-9a1 1 0 1 1 0-2zm16 13h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm14 0h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm16 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm12 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm-4-11h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm16 11h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm18 0h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm16 0h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm-8 26h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 12h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h34a1 1 0 1 1 0 2h-34a1 1 0 1 1 0-2zm0 4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 12h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h34a1 1 0 1 1 0 2h-34a1 1 0 1 1 0-2zm0 12h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h32a1 1 0 1 1 0 2h-32a1 1 0 1 1 0-2zm0 4h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm0 12h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h30a1 1 0 1 1 0 2h-30a1 1 0 1 1 0-2zm0 12h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 12h32a1 1 0 1 1 0 2h-32a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 12h32a1 1 0 1 1 0 2h-32a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm-96-100h83a1 1 0 1 1 0 2h-83a1 1 0 1 1 0-2zm0 4h86a1 1 0 1 1 0 2h-86a1 1 0 1 1 0-2zm0 4h54a1 1 0 1 1 0 2h-54a1 1 0 1 1 0-2zm1-52h84a2 2 0 0 1 2 2v36a2 2 0 0 1-2 2h-84a2 2 0 0 1-2-2v-36c0-1.1.9-2 2-2zm0 2v36h84v-36h-84zm0 62h36a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-36a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm0 2v26h36v-26h-36zm48-2h36a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-36a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm0 2v26h36v-26h-36zm18-101a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm60 16a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-8-15a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm20 15a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm46-399h176a2 2 0 0 1 2 2v272a2 2 0 0 1-2 2H357a2 2 0 0 1-2-2V189c0-1.1.9-2 2-2zm176 118v-38h-57v38h57zm0 2H357v66h176v-66zm-176-2h57v-38h-57v38zm59 0h58v-38h-58v38zm117-40v-62H357v62h176zm0 110H357v36h176v-36zm0 38H357v48h176v-48zm0-212v-12H357v12h176zm-53-7h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-53 3a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm42 120h48a1 1 0 1 1 0 2h-48a1 1 0 1 1 0-2zm-10 4h68a1 1 0 1 1 0 2h-68a1 1 0 1 1 0-2zm14 74h40a3 3 0 0 1 0 6h-40a3 3 0 0 1 0-6zm-4-10h48a1 1 0 1 1 0 2h-48a1 1 0 1 1 0-2zm-10 4h68a1 1 0 1 1 0 2h-68a1 1 0 1 1 0-2zm-33 40h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm36 0h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm36 0h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36-8h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm-108 12h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36 0h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0-12h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm72 0h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm-108 12h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm36 0h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm36-16h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 4h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm36 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm-108-8h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 4h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm101-80a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm11-7h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 4h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm-11 23a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm11-7h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 4h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm-59-13a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm11-7h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 4h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm-11 23a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm11-7h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 4h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm-59-13a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm11-7h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 4h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm-11 23a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm11-7h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 4h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm-16 93h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36-10h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm72-8h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm19 21a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm12 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-89-231h46a1 1 0 1 1 0 2h-46a1 1 0 1 1 0-2zm-50 70h27a1 1 0 1 1 0 2h-27a1 1 0 1 1 0-2zm2 4h23a1 1 0 1 1 0 2h-23a1 1 0 1 1 0-2zm60-4h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm-2 4h24a1 1 0 1 1 0 2h-24a1 1 0 1 1 0-2zm59-4h27a1 1 0 1 1 0 2h-27a1 1 0 1 1 0-2zm3 4h21a1 1 0 1 1 0 2h-21a1 1 0 1 1 0-2zm-82-68h66a1 1 0 1 1 0 2h-66a1 1 0 1 1 0-2zm12 8h18a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-18a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1zm24 0h18a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-18a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1zm-23 6h16v-4h-16v4zm24 0h16v-4h-16v4zm49-51h12a3 3 0 0 1 0 6h-12a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h12a1 1 0 1 0 0-2h-12zm-44 203h-29a1 1 0 1 0 0 2h29v-2zm2 0v2h9a1 1 0 1 0 0-2h-9zm-99 86h176a2 2 0 0 1 2 2v186a2 2 0 0 1-2 2H357a2 2 0 0 1-2-2V485c0-1.1.9-2 2-2zm176 16H357v172h176V499zm0-2v-12H357v12h176zm-31-9h8a3 3 0 0 1 0 6h-8a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-8zm-18 13h26a3 3 0 0 1 0 6h-26a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h26a1 1 0 1 0 0-2h-26zm-64-15h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm14 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm14 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm14 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-83 23h96a2 2 0 0 1 2 2v144a2 2 0 0 1-2 2h-96a2 2 0 0 1-2-2V515c0-1.1.9-2 2-2zm0 2v144h96V515h-96zm103 8h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm-98-4h70a1 1 0 1 1 0 2h-70a1 1 0 1 1 0-2zm0 4h60a1 1 0 1 1 0 2h-60a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm78-12h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm0 14h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 6h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h23a1 1 0 1 1 0 2h-23a1 1 0 1 1 0-2zm0 6h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 6h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 6h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 6h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm-98-117h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm-6 15h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm1-12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm90 30a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-85 14h64a1 1 0 1 1 0 2h-64a1 1 0 1 1 0-2zm0 4h73a1 1 0 1 1 0 2h-73a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm65-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-85 14h67a1 1 0 1 1 0 2h-67a1 1 0 1 1 0-2zm0 4h65a1 1 0 1 1 0 2h-65a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm65-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-85 14h72a1 1 0 1 1 0 2h-72a1 1 0 1 1 0-2zm0 4h65a1 1 0 1 1 0 2h-65a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm65-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-85 14h70a1 1 0 1 1 0 2h-70a1 1 0 1 1 0-2zm0 4h50a1 1 0 1 1 0 2h-50a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm65-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-85 14h65a1 1 0 1 1 0 2h-65a1 1 0 1 1 0-2zm0 4h70a1 1 0 1 1 0 2h-70a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm65-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-85 14h70a1 1 0 1 1 0 2h-70a1 1 0 1 1 0-2zm0 4h60a1 1 0 1 1 0 2h-60a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm65-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-85 14h67a1 1 0 1 1 0 2h-67a1 1 0 1 1 0-2zm0 4h65a1 1 0 1 1 0 2h-65a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm65-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM533 0h2v165a2 2 0 0 1-2 2H357a2 2 0 0 1-2-2V0h2v165h176V0zM380 3h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2zm0 2v26h28V5h-28zm0 54h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2V61c0-1.1.9-2 2-2zm0 2v26h28V61h-28zm0 54h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm0 2v26h28v-26h-28zM414 3h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2zm0 2v26h28V5h-28zm0 54h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2V61c0-1.1.9-2 2-2zm0 2v26h28V61h-28zm0 54h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm0 2v26h28v-26h-28zM448 3h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2zm0 2v26h28V5h-28zm0 54h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2V61c0-1.1.9-2 2-2zm0 2v26h28V61h-28zm0 54h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm0 2v26h28v-26h-28zm-69-80h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm34-4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm34-4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm-68 52h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0-40h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 44h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm34-4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm34-4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm-68 52h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0-40h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 44h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm34-4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm34-4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zM485 5h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 6h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h23a1 1 0 1 1 0 2h-23a1 1 0 1 1 0-2zm0 20h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0-8h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm0 14h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 6h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h23a1 1 0 1 1 0 2h-23a1 1 0 1 1 0-2zm0 20h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0-8h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm0 14h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 6h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h23a1 1 0 1 1 0 2h-23a1 1 0 1 1 0-2zm48 661v-7H357v7h-2v-83c0-1.1.9-2 2-2h176a2 2 0 0 1 2 2v83h-2zm0-9v-46H357v46h176zm0-58H357v10h176v-10zm0-2v-14H357v14h176zm-34 4h10a3 3 0 0 1 0 6h-10a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2h-10zm-89-16h70a3 3 0 0 1 0 6h-70a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h70a1 1 0 1 0 0-2h-70zm-2 14h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm-29-2h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm0 4h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm45-2h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm14 0h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm16 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm12 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm-81-14h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm-5 3a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm110 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-111 57h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm106 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-63-41h46a1 1 0 1 1 0 2h-46a1 1 0 1 1 0-2zm-10 6h66a1 1 0 1 1 0 2h-66a1 1 0 1 1 0-2zm10 4h46a1 1 0 1 1 0 2h-46a1 1 0 1 1 0-2zm17 6h12a4 4 0 1 1 0 8h-12a4 4 0 1 1 0-8zm0 2a2 2 0 0 0 0 4h12a2 2 0 0 0 0-4h-12z'/%3E%3C/g%3E%3C/svg%3E");
 }
@@ -25,7 +31,6 @@ ol, ul {
   text-decoration: underline;
 }
 
-@import "prism";
-@import "markdown";
-
-@tailwind utilities;
+.\!hidden {
+  display: none !important;
+}
diff --git a/docs/source/_layouts/documentation.blade.php b/docs/source/_layouts/documentation.blade.php
index 278265f9b..14257b11c 100644
--- a/docs/source/_layouts/documentation.blade.php
+++ b/docs/source/_layouts/documentation.blade.php
@@ -2,177 +2,229 @@
 
 @section('body')
 
-<div class="fixed pin-y pin-l bg-smoke-light w-full max-w-xs flex-none border-r-2 border-smoke flex flex-col">
-    <div class="border-b border-smoke flex-none p-8">
-        <div class="text-center mb-8">
-            <a href="/" class="inline-block">
-                <svg class="h-8" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#a)" fill-rule="evenodd"></path></svg>
-            </a>
-        </div>
-        <div class="relative">
-            <input class="rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full" type="text" placeholder="Search">
-            <div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
-                <svg class="pointer-events-none text-slate h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
+<div class="min-h-screen">
+    <div id="sidebar" class="z-50 fixed pin-y pin-l overflow-y-scroll bg-smoke-light w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col">
+        <div class="border-b border-smoke flex-none p-8">
+            <div class="hidden md:block text-center mb-8">
+                <a href="/" class="inline-block">
+                    <svg class="h-8" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#logoGradient)" fill-rule="evenodd"></path></svg>
+                </a>
             </div>
+            <div class="relative">
+                <input class="rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full" type="text" placeholder="Search">
+                <div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
+                    <svg class="pointer-events-none text-slate h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
+                </div>
+            </div>
+        </div>
+        <div class="p-8 flex-1 overflow-y-scroll">
+            <nav id="nav" class="text-base overflow-y-scroll">
+                <div class="mb-8">
+                    <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Introduction</p>
+                    <ul>
+                        <li class="mb-3"><a class="{{ $page->active('/docs/what-is-tailwind') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/what-is-tailwind">What is Tailwind?</a></li>
+                    </ul>
+                </div>
+                <div class="mb-8">
+                    <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Getting Started</p>
+                    <ul>
+                        <li class="mb-3"><a class="{{ $page->active('/docs/installation') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/installation">Installation</a></li>
+                        <li class="mb-3">
+                            <a class="{{ $page->active('/docs/configuration') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/configuration">
+                                Configuration
+                            </a>
+                        </li>
+                        <li class="mb-3">
+                            <a class="{{ $page->active('/docs/colors') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/colors">
+                                Colors
+                            </a>
+                        </li>
+                        <li class="mb-3">
+                            <a class="{{ $page->active('/docs/responsive-design') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/responsive-design">
+                                Responsive Design
+                            </a>
+                        </li>
+                        <li class="mb-3">
+                            <a class="{{ $page->active('/docs/adding-new-utilities') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/adding-new-utilities">
+                                Adding New Utilities
+                            </a>
+                        </li>
+                        <li class="mb-3">
+                            <a class="{{ $page->active('/docs/extracting-components') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/extracting-components">
+                                Extracting Components
+                            </a>
+                        </li>
+                        <li class="mb-3">
+                            <a class="{{ $page->active('/docs/functions-and-directives') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/functions-and-directives">
+                                Functions &amp; Directives
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="mt-8">
+                    <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Styles</p>
+                    <ul class="mb-8">
+                        <li class="mb-3">
+                            <a href="{{ $page->baseUrl }}/docs/background-color" class="block mb-2 {{ $page->active('/docs/background-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Backgrounds</a>
+                            <ul class="pl-4 {{ $page->active('/docs/background-') ? 'block' : 'hidden' }}">
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/background-color" class="{{ $page->active('/docs/background-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/background-position" class="{{ $page->active('/docs/background-position') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Position</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/background-size" class="{{ $page->active('/docs/background-size') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Size</a></li>
+                            </ul>
+                        </li>
+                        <li class="mb-3">
+                            <a href="{{ $page->baseUrl }}/docs/border-width" class="block mb-2 {{ $page->active(['/docs/border-width', '/docs/border-color', '/docs/border-style']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Borders</a>
+                            <ul class="pl-4 {{ $page->active(['/docs/border-width', '/docs/border-color', '/docs/border-style']) ? 'block' : 'hidden' }}">
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-width" class="{{ $page->active('/docs/border-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Width</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-color" class="{{ $page->active('/docs/border-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-style" class="{{ $page->active('/docs/border-style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style</a></li>
+                            </ul>
+                        </li>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-radius" class="{{ $page->active('/docs/border-radius') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Border Radius</a></li>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/container" class="{{ $page->active('/docs/container') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Container</a></li>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/display" class="{{ $page->active('/docs/display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
+                        <li class="mb-3">
+                            <a href="{{ $page->baseUrl }}/docs/flexbox-display" class="block mb-2 {{ $page->active('/docs/flexbox-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flexbox</a>
+                            <ul class="pl-4 {{ $page->active('/docs/flexbox-') ? 'block' : 'hidden' }}">
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-display" class="{{ $page->active('/docs/flexbox-display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-direction" class="{{ $page->active('/docs/flexbox-direction') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Direction</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-wrapping" class="{{ $page->active('/docs/flexbox-wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Wrapping</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-justify-content" class="{{ $page->active('/docs/flexbox-justify-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Justify Content</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-align-items" class="{{ $page->active('/docs/flexbox-align-items') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Items</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-align-content" class="{{ $page->active('/docs/flexbox-align-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Content</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-align-self" class="{{ $page->active('/docs/flexbox-align-self') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Self</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-flex-grow-shrink" class="{{ $page->active('/docs/flexbox-flex-grow-shrink') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flex, Grow, &amp; Shrink</a></li>
+                            </ul>
+                        </li>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/floats" class="{{ $page->active('/docs/floats') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Floats</a></li>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/forms" class="{{ $page->active('/docs/forms') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Forms</a></li>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/grid" class="{{ $page->active('/docs/grid') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Grid</a></li>
+                        <li class="mb-3">
+                            <a href="{{ $page->baseUrl }}/docs/cursor" class="block mb-2 {{ $page->active(['/docs/cursor', '/docs/resize', '/docs/pointer-events', '/docs/user-select']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Interactivity</a>
+                            <ul class="pl-4 {{ $page->active(['/docs/cursor', '/docs/resize', '/docs/pointer-events', '/docs/user-select']) ? 'block' : 'hidden' }}">
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/cursor" class="{{ $page->active('/docs/cursor') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Cursor</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/resize" class="{{ $page->active('/docs/resize') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Resize</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/pointer-events" class="{{ $page->active('/docs/pointer-events') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Pointer Events</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/user-select" class="{{ $page->active('/docs/user-select') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">User Select</a></li>
+                            </ul>
+                        </li>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/lists" class="{{ $page->active('/docs/lists') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Lists</a></li>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/opacity" class="{{ $page->active('/docs/opacity') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Opacity</a></li>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/overflow" class="{{ $page->active('/docs/overflow') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Overflow</a></li>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/positioning" class="{{ $page->active('/docs/positioning') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Positioning</a></li>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/shadows" class="{{ $page->active('/docs/shadows') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Shadows</a></li>
+                        <li class="mb-3">
+                            <a href="{{ $page->baseUrl }}/docs/width" class="block mb-2 {{ $page->active(['/docs/width', '/docs/min-width', '/docs/max-width', '/docs/height', '/docs/min-height', '/docs/max-height']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a>
+                            <ul class="pl-4 {{ $page->active(['/docs/width', '/docs/min-width', '/docs/max-width', '/docs/height', '/docs/min-height', '/docs/max-height']) ? 'block' : 'hidden' }}">
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/width" class="{{ $page->active('/docs/width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Width</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/min-width" class="{{ $page->active('/docs/min-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Width</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/max-width" class="{{ $page->active('/docs/max-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Width</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/height" class="{{ $page->active('/docs/height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Height</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/min-height" class="{{ $page->active('/docs/min-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Height</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/max-height" class="{{ $page->active('/docs/max-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Height</a></li>
+                            </ul>
+                        </li>
+                        <li class="mb-3">
+                            <a href="{{ $page->baseUrl }}/docs/padding" class="block mb-2 {{ $page->active(['/docs/padding', '/docs/margin', '/docs/negative-margin']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Spacing</a>
+                            <ul class="pl-4 {{ $page->active(['/docs/padding', '/docs/margin', '/docs/negative-margin']) ? 'block' : 'hidden' }}">
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/padding" class="{{ $page->active('/docs/padding') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Padding</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/margin" class="{{ $page->active('/docs/margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Margin</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/negative-margin" class="{{ $page->active('/docs/negative-margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Negative Margin</a></li>
+                            </ul>
+                        </li>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/svg" class="{{ $page->active('/docs/svg') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">SVG</a></li>
+                        <li class="mb-3">
+                            <a href="{{ $page->baseUrl }}/docs/fonts" class="block mb-2 {{ $page->active(['/docs/fonts', '/docs/text-color', '/docs/text-sizing', '/docs/font-weight', '/docs/line-height', '/docs/letter-spacing', '/docs/whitespace-and-wrapping', '/docs/text-style']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Typography</a>
+                            <ul class="pl-4 {{ $page->active(['/docs/fonts', '/docs/text-color', '/docs/text-sizing', '/docs/font-weight', '/docs/line-height', '/docs/letter-spacing', '/docs/whitespace-and-wrapping', '/docs/text-style']) ? 'block' : 'hidden' }}">
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/fonts" class="{{ $page->active('/docs/fonts') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Fonts</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-color" class="{{ $page->active('/docs/text-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-sizing" class="{{ $page->active('/docs/text-sizing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/font-weight" class="{{ $page->active('/docs/font-weight') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Weight</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/line-height" class="{{ $page->active('/docs/line-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Line Height</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/letter-spacing" class="{{ $page->active('/docs/letter-spacing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Letter Spacing</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-style" class="{{ $page->active('/docs/text-style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style &amp; Decoration</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/whitespace-and-wrapping" class="{{ $page->active('/docs/whitespace-and-wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Whitespace &amp; Wrapping</a></li>
+                            </ul>
+                        </li>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/vertical-alignment" class="{{ $page->active('/docs/vertical-alignment') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Vertical Alignment</a></li>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/visibility" class="{{ $page->active('/docs/visibility') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Visibility</a></li>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/z-index" class="{{ $page->active('/docs/z-index') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Z-Index</a></li>
+                    </ul>
+                </div>
+                <div class="mb-8">
+                    <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Examples</p>
+                    <ul>
+                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/examples/buttons" class="{{ $page->active('/docs/examples/buttons') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Buttons</a></li>
+                        <li class="mb-3"><a class="{{ $page->active('/examples/alerts') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/examples/alerts">Alerts</a></li>
+                        <li class="mb-3"><a class="{{ $page->active('/examples/cards') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/examples/cards">Cards</a></li>
+                    </ul>
+                </div>
+            </nav>
         </div>
     </div>
-    <div class="p-8 flex-1 overflow-y-scroll">
-        <nav id="nav" class="text-base overflow-y-scroll">
-            <div class="mb-8">
-                <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Introduction</p>
-                <ul>
-                    <li class="mb-3"><a class="{{ $page->active('/docs/what-is-tailwind') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/what-is-tailwind">What is Tailwind?</a></li>
-                </ul>
-            </div>
-            <div class="mb-8">
-                <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Getting Started</p>
-                <ul>
-                    <li class="mb-3"><a class="{{ $page->active('/docs/installation') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/installation">Installation</a></li>
-                    <li class="mb-3">
-                        <a class="{{ $page->active('/docs/configuration') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/configuration">
-                            Configuration
-                        </a>
-                    </li>
-                    <li class="mb-3">
-                        <a class="{{ $page->active('/docs/colors') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/colors">
-                            Colors
-                        </a>
-                    </li>
-                    <li class="mb-3">
-                        <a class="{{ $page->active('/docs/responsive-design') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/responsive-design">
-                            Responsive Design
-                        </a>
-                    </li>
-                    <li class="mb-3">
-                        <a class="{{ $page->active('/docs/adding-new-utilities') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/adding-new-utilities">
-                            Adding New Utilities
-                        </a>
-                    </li>
-                    <li class="mb-3">
-                        <a class="{{ $page->active('/docs/extracting-components') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/extracting-components">
-                            Extracting Components
-                        </a>
-                    </li>
-                    <li class="mb-3">
-                        <a class="{{ $page->active('/docs/functions-and-directives') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/functions-and-directives">
-                            Functions &amp; Directives
-                        </a>
-                    </li>
-                </ul>
-            </div>
-            <div class="mt-8">
-                <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Styles</p>
-                <ul class="mb-8">
-                    <li class="mb-3">
-                        <a href="{{ $page->baseUrl }}/docs/background-color" class="block mb-2 {{ $page->active('/docs/background-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Backgrounds</a>
-                        <ul class="pl-4 {{ $page->active('/docs/background-') ? 'block' : 'hidden' }}">
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/background-color" class="{{ $page->active('/docs/background-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/background-position" class="{{ $page->active('/docs/background-position') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Position</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/background-size" class="{{ $page->active('/docs/background-size') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Size</a></li>
-                        </ul>
-                    </li>
-                    <li class="mb-3">
-                        <a href="{{ $page->baseUrl }}/docs/border-width" class="block mb-2 {{ $page->active(['/docs/border-width', '/docs/border-color', '/docs/border-style']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Borders</a>
-                        <ul class="pl-4 {{ $page->active(['/docs/border-width', '/docs/border-color', '/docs/border-style']) ? 'block' : 'hidden' }}">
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-width" class="{{ $page->active('/docs/border-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Width</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-color" class="{{ $page->active('/docs/border-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-style" class="{{ $page->active('/docs/border-style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style</a></li>
-                        </ul>
-                    </li>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-radius" class="{{ $page->active('/docs/border-radius') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Border Radius</a></li>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/container" class="{{ $page->active('/docs/container') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Container</a></li>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/display" class="{{ $page->active('/docs/display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
-                    <li class="mb-3">
-                        <a href="{{ $page->baseUrl }}/docs/flexbox-display" class="block mb-2 {{ $page->active('/docs/flexbox-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flexbox</a>
-                        <ul class="pl-4 {{ $page->active('/docs/flexbox-') ? 'block' : 'hidden' }}">
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-display" class="{{ $page->active('/docs/flexbox-display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-direction" class="{{ $page->active('/docs/flexbox-direction') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Direction</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-wrapping" class="{{ $page->active('/docs/flexbox-wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Wrapping</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-justify-content" class="{{ $page->active('/docs/flexbox-justify-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Justify Content</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-align-items" class="{{ $page->active('/docs/flexbox-align-items') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Items</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-align-content" class="{{ $page->active('/docs/flexbox-align-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Content</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-align-self" class="{{ $page->active('/docs/flexbox-align-self') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Self</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-flex-grow-shrink" class="{{ $page->active('/docs/flexbox-flex-grow-shrink') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flex, Grow, &amp; Shrink</a></li>
-                        </ul>
-                    </li>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/floats" class="{{ $page->active('/docs/floats') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Floats</a></li>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/forms" class="{{ $page->active('/docs/forms') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Forms</a></li>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/grid" class="{{ $page->active('/docs/grid') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Grid</a></li>
-                    <li class="mb-3">
-                        <a href="{{ $page->baseUrl }}/docs/cursor" class="block mb-2 {{ $page->active(['/docs/cursor', '/docs/resize', '/docs/pointer-events', '/docs/user-select']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Interactivity</a>
-                        <ul class="pl-4 {{ $page->active(['/docs/cursor', '/docs/resize', '/docs/pointer-events', '/docs/user-select']) ? 'block' : 'hidden' }}">
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/cursor" class="{{ $page->active('/docs/cursor') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Cursor</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/resize" class="{{ $page->active('/docs/resize') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Resize</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/pointer-events" class="{{ $page->active('/docs/pointer-events') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Pointer Events</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/user-select" class="{{ $page->active('/docs/user-select') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">User Select</a></li>
-                        </ul>
-                    </li>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/lists" class="{{ $page->active('/docs/lists') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Lists</a></li>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/opacity" class="{{ $page->active('/docs/opacity') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Opacity</a></li>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/overflow" class="{{ $page->active('/docs/overflow') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Overflow</a></li>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/positioning" class="{{ $page->active('/docs/positioning') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Positioning</a></li>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/shadows" class="{{ $page->active('/docs/shadows') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Shadows</a></li>
-                    <li class="mb-3">
-                        <a href="{{ $page->baseUrl }}/docs/width" class="block mb-2 {{ $page->active(['/docs/width', '/docs/min-width', '/docs/max-width', '/docs/height', '/docs/min-height', '/docs/max-height']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a>
-                        <ul class="pl-4 {{ $page->active(['/docs/width', '/docs/min-width', '/docs/max-width', '/docs/height', '/docs/min-height', '/docs/max-height']) ? 'block' : 'hidden' }}">
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/width" class="{{ $page->active('/docs/width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Width</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/min-width" class="{{ $page->active('/docs/min-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Width</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/max-width" class="{{ $page->active('/docs/max-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Width</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/height" class="{{ $page->active('/docs/height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Height</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/min-height" class="{{ $page->active('/docs/min-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Height</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/max-height" class="{{ $page->active('/docs/max-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Height</a></li>
-                        </ul>
-                    </li>
-                    <li class="mb-3">
-                        <a href="{{ $page->baseUrl }}/docs/padding" class="block mb-2 {{ $page->active(['/docs/padding', '/docs/margin', '/docs/negative-margin']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Spacing</a>
-                        <ul class="pl-4 {{ $page->active(['/docs/padding', '/docs/margin', '/docs/negative-margin']) ? 'block' : 'hidden' }}">
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/padding" class="{{ $page->active('/docs/padding') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Padding</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/margin" class="{{ $page->active('/docs/margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Margin</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/negative-margin" class="{{ $page->active('/docs/negative-margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Negative Margin</a></li>
-                        </ul>
-                    </li>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/svg" class="{{ $page->active('/docs/svg') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">SVG</a></li>
-                    <li class="mb-3">
-                        <a href="{{ $page->baseUrl }}/docs/fonts" class="block mb-2 {{ $page->active(['/docs/fonts', '/docs/text-color', '/docs/text-sizing', '/docs/font-weight', '/docs/line-height', '/docs/letter-spacing', '/docs/whitespace-and-wrapping', '/docs/text-style']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Typography</a>
-                        <ul class="pl-4 {{ $page->active(['/docs/fonts', '/docs/text-color', '/docs/text-sizing', '/docs/font-weight', '/docs/line-height', '/docs/letter-spacing', '/docs/whitespace-and-wrapping', '/docs/text-style']) ? 'block' : 'hidden' }}">
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/fonts" class="{{ $page->active('/docs/fonts') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Fonts</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-color" class="{{ $page->active('/docs/text-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-sizing" class="{{ $page->active('/docs/text-sizing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/font-weight" class="{{ $page->active('/docs/font-weight') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Weight</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/line-height" class="{{ $page->active('/docs/line-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Line Height</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/letter-spacing" class="{{ $page->active('/docs/letter-spacing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Letter Spacing</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-style" class="{{ $page->active('/docs/text-style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style &amp; Decoration</a></li>
-                            <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/whitespace-and-wrapping" class="{{ $page->active('/docs/whitespace-and-wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Whitespace &amp; Wrapping</a></li>
-                        </ul>
-                    </li>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/vertical-alignment" class="{{ $page->active('/docs/vertical-alignment') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Vertical Alignment</a></li>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/visibility" class="{{ $page->active('/docs/visibility') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Visibility</a></li>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/z-index" class="{{ $page->active('/docs/z-index') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Z-Index</a></li>
-                </ul>
-            </div>
-            <div class="mb-8">
-                <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Examples</p>
-                <ul>
-                    <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/examples/buttons" class="{{ $page->active('/docs/examples/buttons') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Buttons</a></li>
-                    <li class="mb-3"><a class="{{ $page->active('/examples/alerts') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/examples/alerts">Alerts</a></li>
-                    <li class="mb-3"><a class="{{ $page->active('/examples/cards') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/examples/cards">Cards</a></li>
-                </ul>
-            </div>
-        </nav>
-    </div>
-</div>
-<div class="ml-80">
-    <div id="content" class="px-6 py-8 w-full max-w-xl mx-auto">
-        <div id="app">
-            <div class="markdown">
-                @if ($page->category)
-                    <div class="font-semibold text-slate-light text-base uppercase tracking-wide mb-2">{{ $page->category }}</div>
-                @endif
-                @yield('content')
+    <div class="md:ml-80">
+        <div class="fixed w-full">
+            <div class="pin-t bg-white md:hidden relative border-b border-dark h-12 flex items-center">
+                  <div class="js-open-sidebar absolute pin-l pin-y px-4 flex items-center">
+                      <svg class="h-4" fill="#777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+                  </div>
+                  <div class="mx-auto inline-flex items-center">
+                      <svg class="h-4" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg">
+                          <path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#logoGradient)" fill-rule="evenodd"></path>
+                      </svg>
+                  </div>
+                  <div class="js-close-sidebar">
+                    <div class="flex items-center absolute pin-r pin-y px-4">
+                      <svg class="h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
+                    </div>
+                  </div>
             </div>
         </div>
-        <script src="{{ mix('/js/app.js') }}"></script>
+        <div id="content" class="px-6 py-16 md:py-8 w-full max-w-xl mx-auto">
+            <div id="app">
+                <div class="markdown">
+                    @if ($page->category)
+                        <div class="font-semibold text-slate-light text-base uppercase tracking-wide mb-2">{{ $page->category }}</div>
+                    @endif
+                    @yield('content')
+                </div>
+            </div>
+            <script src="/js/app.js"></script>
+            <script>
+                anchors.options = { placement: 'left', class: 'text-slate-light' };
+                anchors.add();
+
+                var closeSidebar = function () {
+                    $('#sidebar').addClass("hidden");
+                    $('.js-close-sidebar').addClass("hidden");
+                }
+
+                $('.js-close-sidebar').on('click', function () {
+                  closeSidebar();
+                });
+
+                $('.js-open-sidebar').on('click', function () {
+                    $('#sidebar').removeClass("hidden");
+                    $('.js-close-sidebar').removeClass("hidden");
+                });
+
+                $(document).ready(function () {
+                  if ($(window).width() <= 767) {
+                    closeSidebar();
+                  }
+                });
+            </script>
+        </div>
     </div>
 </div>
 
+<svg>
+  <defs>
+    <linearGradient x1="0%" y1="0%" y2="100%" id="logoGradient">
+      <stop stop-color="#2383AE" offset="0%"></stop>
+      <stop stop-color="#6DD7B9" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+</svg>
+
 @endsection
diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index 6cc77c542..8af4d710c 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -18,7 +18,7 @@
         <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
         <script src="{{ mix('/js/nav.js') }}"></script>
     </head>
-    <body class="font-sans font-normal text-slate-darker leading-normal min-h-screen">
+    <body data-sidebar-visible="true" class="font-sans font-normal text-slate-darker leading-normal">
         @yield('body')
     </body>
 </html>
diff --git a/docs/source/docs/background-color.blade.md b/docs/source/docs/background-color.blade.md
index 73c413135..69a850f74 100644
--- a/docs/source/docs/background-color.blade.md
+++ b/docs/source/docs/background-color.blade.md
@@ -248,20 +248,3 @@ Using the utilities in HTML:
 <div class="bg-slate"></div>
 <div class="bg-slate-light"></div>
 ```
-
-Using the utilities in Less:
-
-```less
-div {
-  .bg-white;
-  .bg-smoke-lighter;
-  .bg-smoke-light;
-  .bg-smoke;
-
-  .bg-slate-darker;
-  .bg-slate-dark;
-  .bg-slate;
-  .bg-slate-light;
-}
-```
-
diff --git a/docs/source/docs/border-color.blade.md b/docs/source/docs/border-color.blade.md
index f2aebffa0..1cbc472f5 100644
--- a/docs/source/docs/border-color.blade.md
+++ b/docs/source/docs/border-color.blade.md
@@ -4,53 +4,3 @@ title: "Border Color"
 ---
 
 # Border Color
-
-<div class="subnav">
-    <a class="subnav-link" href="#color">Color</a>
-    <a class="subnav-link" href="#responsive">Responsive</a>
-</div>
-
-<h2 id="colors">Colors</h2>
-
-By default, borders use the `@default-border-color`. To override a border color, add one of the border color utilities.
-
-```html
-<div class="border border-smoke-darker"></div>
-<div class="border border-smoke-dark"></div>
-<div class="border border-smoke"></div>
-
-<div class="border border-white"></div>
-<div class="border border-smoke-lighter"></div>
-<div class="border border-smoke-light"></div>
-
-<div class="border border-invisible"></div>
-```
-
-```less
-div {
-  .border-smoke-darker;
-  .border-smoke-dark;
-  .border-smoke;
-
-  .border-white;
-  .border-smoke-lighter;
-  .border-smoke-light;
-
-  .border-invisible;
-}
-```
-
-The default border colors can also be modified using the following variables.
-
-```less
-// Variable:            Default:
-@border-smoke-darker:           hsl(0, 0%, 82%);
-@border-smoke-dark:      hsl(0, 0%, 90%);
-@border-smoke:    hsl(0, 0%, 96%);
-
-@border-white:          hsl(0, 0%, 100%);
-@border-smoke-lighter:     hsl(0, 0%, 60%);
-@border-smoke-light:   hsl(0, 0%, 35%);
-
-@default-border-color:  @border-smoke-dark;
-```
diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md
index 8498d1b99..5ed973b98 100644
--- a/docs/source/docs/fonts.blade.md
+++ b/docs/source/docs/fonts.blade.md
@@ -4,31 +4,3 @@ title: "Font Families"
 ---
 
 # Font Families
-
-<div class="subnav">
-    <a class="subnav-link" href="#usage">Usage</a>
-    <a class="subnav-link" href="#responsive">Responsive</a>
-    <a class="subnav-link" href="#customizing">Customizing</a>
-</div>
-
-```html
-<div class="font-sans"></div>
-<div class="font-serif"></div>
-<div class="font-mono"></div>
-```
-
-```less
-div {
-  .font-sans;
-  .font-serif;
-  .font-mono;
-}
-```
-
-```less
-// Customize the font stack
-@font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
-@font-family-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
-@font-family-mono: Consolas, "Andale font-mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus font-mono L", Monaco, "Courier New", Courier, monospace;
-@font-family-base: @font-family-sans;
-```
diff --git a/docs/source/docs/margin.blade.md b/docs/source/docs/margin.blade.md
index d1eecdfbc..55f6b5559 100644
--- a/docs/source/docs/margin.blade.md
+++ b/docs/source/docs/margin.blade.md
@@ -47,43 +47,8 @@ The syntax below is combined to create a system for padding and margins. For exa
 
 You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
 
-```less
-// The default sizing scale
-@sizing-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  '3' 0.75rem,
-  '4' 1rem,
-  '6' 1.5rem,
-  '8' 2rem,
-  '12' 3rem,
-  '16' 4rem,
-;
-```
-
-By default the `@sizing-scale` is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the `@margin-scale`, `@pull-scale` and `@padding-scale` variables.
-
-```less
-// Override the margin scale
-@margin-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  // ...
-;
-
-// Override the pull scale
-@pull-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  // ...
-;
-
-// Override the padding scale
-@padding-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  // ...
-;
+```css
+// Scale customization here
 ```
 
 <h2 id="responsive">Responsive spacing utilities</h2>
@@ -96,10 +61,6 @@ The spacing utilities can also be used with [responsive](/docs/responsive-design
 <div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
 ```
 
-```less
-div {
-  .screen(lg, {
-    .mt-6;
-  });
-}
+```css
+// Responsive example here
 ```
diff --git a/docs/source/docs/negative-margin.blade.md b/docs/source/docs/negative-margin.blade.md
index ac1bddd3a..1f7d9caf9 100644
--- a/docs/source/docs/negative-margin.blade.md
+++ b/docs/source/docs/negative-margin.blade.md
@@ -45,45 +45,8 @@ The syntax below is combined to create a system for padding and margins. For exa
 
 <h2 id="customizing">Customizing the spacing scale</h2>
 
-You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
-
-```less
-// The default sizing scale
-@sizing-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  '3' 0.75rem,
-  '4' 1rem,
-  '6' 1.5rem,
-  '8' 2rem,
-  '12' 3rem,
-  '16' 4rem,
-;
-```
-
-By default the `@sizing-scale` is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the `@margin-scale`, `@pull-scale` and `@padding-scale` variables.
-
-```less
-// Override the margin scale
-@margin-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  // ...
-;
-
-// Override the pull scale
-@pull-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  // ...
-;
-
-// Override the padding scale
-@padding-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  // ...
-;
+```css
+// Scale customization here
 ```
 
 <h2 id="responsive">Responsive spacing utilities</h2>
@@ -96,11 +59,6 @@ The spacing utilities can also be used with [responsive](/docs/responsive-design
 <div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
 ```
 
-```less
-div {
-  .screen(lg, {
-    .mt-6;
-  });
-}
+```css
+// Responsive example here
 ```
-
diff --git a/docs/source/docs/padding.blade.md b/docs/source/docs/padding.blade.md
index e75ef66d2..afdaf205e 100644
--- a/docs/source/docs/padding.blade.md
+++ b/docs/source/docs/padding.blade.md
@@ -47,43 +47,9 @@ The syntax below is combined to create a system for padding and margins. For exa
 
 You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
 
-```less
-// The default sizing scale
-@sizing-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  '3' 0.75rem,
-  '4' 1rem,
-  '6' 1.5rem,
-  '8' 2rem,
-  '12' 3rem,
-  '16' 4rem,
-;
-```
 
-By default the `@sizing-scale` is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the `@margin-scale`, `@pull-scale` and `@padding-scale` variables.
-
-```less
-// Override the margin scale
-@margin-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  // ...
-;
-
-// Override the pull scale
-@pull-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  // ...
-;
-
-// Override the padding scale
-@padding-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  // ...
-;
+```css
+// Scale customization here
 ```
 
 <h2 id="responsive">Responsive spacing utilities</h2>
@@ -96,11 +62,6 @@ The spacing utilities can also be used with [responsive](/docs/responsive-design
 <div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
 ```
 
-```less
-div {
-  .screen(lg, {
-    .mt-6;
-  });
-}
+```css
+// Responsive example here
 ```
-