kward 0.69.1 → 0.71.0

data/templates/default/fulldoc/html/css/kward.css

@@ -10,10 +10,37 @@
   --kward-accent: #9caf35;
   --kward-accent-bright: #d2df62;
   --kward-code: #030604;
+  --kward-syntax-comment: #7f8b67;
+  --kward-syntax-constant: #f0bf6a;
+  --kward-syntax-keyword: #d2df62;
+  --kward-syntax-method: #b8d852;
+  --kward-syntax-string: #8fd15b;
+  --kward-syntax-symbol: #ff7f6f;
+  --kward-syntax-variable: #a7c884;
 }
 
 html {
   background: var(--kward-bg);
+  color-scheme: dark;
+}
+
+.kward-skip-link {
+  background: var(--kward-accent);
+  border-radius: 0 0 8px 8px;
+  color: #030604;
+  font-weight: 700;
+  left: 50%;
+  padding: 10px 20px;
+  position: fixed;
+  text-decoration: none;
+  top: 0;
+  transform: translateY(-100%);
+  transition: transform 120ms ease;
+  z-index: 9400;
+}
+
+.kward-skip-link:focus {
+  transform: translateY(0);
 }
 
 body.kward-docs {
@@ -28,15 +55,9 @@ body.kward-docs {
   min-height: 100%;
   opacity: 1;
   overflow: auto;
-  transition: opacity 120ms ease;
   width: 100%;
 }
 
-html.kward-page-loading body.kward-docs {
-  cursor: progress;
-  opacity: 0.72;
-}
-
 body.kward-docs::before {
   background-image:
     linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
@@ -117,12 +138,31 @@ body.kward-docs::before {
   width: 1px;
 }
 
-.kward-guide-search {
+.kward-guide-search,
+.kward-api-index-link {
   justify-self: end;
+}
+
+.kward-guide-search {
   position: relative;
   width: min(280px, 24vw);
 }
 
+.kward-api-index-link {
+  border: 1px solid rgba(156, 175, 53, 0.42);
+  border-radius: 999px;
+  color: var(--kward-ink);
+  padding: 10px 14px;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.kward-api-index-link:hover,
+.kward-api-index-link:focus {
+  background: rgba(156, 175, 53, 0.13);
+  color: var(--kward-accent-bright);
+}
+
 .kward-guide-search input {
   background: rgba(3, 6, 4, 0.72);
   border: 1px solid rgba(156, 175, 53, 0.42);
@@ -180,6 +220,11 @@ body.kward-docs::before {
   color: var(--kward-ink);
 }
 
+.kward-guide-search-results a.kward-search-active {
+  background: rgba(156, 175, 53, 0.2);
+  color: var(--kward-accent-bright);
+}
+
 .kward-guide-search-results strong {
   color: var(--kward-accent-bright);
   display: block;
@@ -195,23 +240,58 @@ body.kward-docs::before {
 }
 
 .kward-nav-toggle {
+  align-items: center;
   background: transparent;
   border: 1px solid rgba(156, 175, 53, 0.52);
   border-radius: 8px;
   color: var(--kward-accent-bright);
   cursor: pointer;
   display: none;
+  flex-direction: column;
   font: inherit;
+  gap: 5px;
+  justify-content: center;
   justify-self: end;
-  padding: 12px 16px;
+  padding: 10px 12px;
   text-decoration: none;
 }
 
+.kward-nav-toggle-bar {
+  background: var(--kward-accent-bright);
+  border-radius: 2px;
+  display: block;
+  height: 2px;
+  transition: transform 140ms ease, opacity 140ms ease;
+  width: 22px;
+}
+
+body.kward-nav-open .kward-nav-toggle-bar:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+
+body.kward-nav-open .kward-nav-toggle-bar:nth-child(2) {
+  opacity: 0;
+}
+
+body.kward-nav-open .kward-nav-toggle-bar:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
 .kward-nav-toggle:hover {
   background: rgba(156, 175, 53, 0.12);
   color: var(--kward-accent-bright);
 }
 
+/* Keyboard focus indicators for interactive elements. */
+body.kward-docs a:focus-visible,
+body.kward-docs button:focus-visible,
+body.kward-docs input:focus-visible,
+body.kward-docs .kward-nav-toggle:focus-visible,
+body.kward-docs .kward-nav-menu-button:focus-visible {
+  outline: 2px solid var(--kward-accent-bright);
+  outline-offset: 2px;
+}
+
 body.kward-docs .nav_wrap,
 body.kward-docs #resizer {
   display: none;
@@ -274,6 +354,90 @@ body.kward-docs code {
   border-radius: 6px;
 }
 
+body.kward-docs pre.code .comment {
+  color: var(--kward-syntax-comment);
+  font-style: italic;
+}
+
+body.kward-docs pre.code .const,
+body.kward-docs pre.code .constant,
+body.kward-docs #content .summary_desc pre.code .const > .object_link a,
+body.kward-docs #content .docstring pre.code .const > .object_link a {
+  color: var(--kward-syntax-constant);
+}
+
+body.kward-docs pre.code .kw,
+body.kward-docs pre.code .rubyid_require,
+body.kward-docs pre.code .rubyid_extend,
+body.kward-docs pre.code .rubyid_include {
+  color: var(--kward-syntax-keyword);
+  font-weight: 700;
+}
+
+body.kward-docs pre.code .id,
+body.kward-docs #content .summary_desc pre.code .id > .object_link a,
+body.kward-docs #content .docstring pre.code .id > .object_link a {
+  color: var(--kward-syntax-method);
+}
+
+body.kward-docs pre.code .tstring_content,
+body.kward-docs pre.code .heredoc_beg,
+body.kward-docs pre.code .heredoc_end,
+body.kward-docs pre.code .qwords_beg,
+body.kward-docs pre.code .qwords_end,
+body.kward-docs pre.code .qwords_sep,
+body.kward-docs pre.code .words_beg,
+body.kward-docs pre.code .words_end,
+body.kward-docs pre.code .words_sep,
+body.kward-docs pre.code .qsymbols_beg,
+body.kward-docs pre.code .qsymbols_end,
+body.kward-docs pre.code .qsymbols_sep,
+body.kward-docs pre.code .symbols_beg,
+body.kward-docs pre.code .symbols_end,
+body.kward-docs pre.code .symbols_sep,
+body.kward-docs pre.code .tstring,
+body.kward-docs pre.code .dstring,
+body.kward-docs pre.code .regexp,
+body.kward-docs .dregexp {
+  color: var(--kward-syntax-string);
+}
+
+body.kward-docs pre.code .label,
+body.kward-docs pre.code .symbol {
+  color: var(--kward-syntax-symbol);
+}
+
+body.kward-docs pre.code .ivar,
+body.kward-docs pre.code .gvar,
+body.kward-docs pre.code .rubyid_backref,
+body.kward-docs pre.code .rubyid_nth_ref {
+  color: var(--kward-syntax-variable);
+}
+
+body.kward-docs pre.code .op,
+body.kward-docs pre.code .period,
+body.kward-docs pre.code .comma,
+body.kward-docs pre.code .lparen,
+body.kward-docs pre.code .rparen,
+body.kward-docs pre.code .lbrace,
+body.kward-docs pre.code .rbrace,
+body.kward-docs pre.code .lbracket,
+body.kward-docs pre.code .rbracket {
+  color: rgba(239, 232, 208, 0.74);
+}
+
+body.kward-docs pre.code a,
+body.kward-docs pre.code a:visited {
+  text-decoration-color: rgba(210, 223, 98, 0.45);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+body.kward-docs pre.code a:hover {
+  background: rgba(156, 175, 53, 0.16);
+  color: var(--kward-accent-bright);
+}
+
 body.kward-docs .copy-code-button {
   background: transparent;
   border: 1px solid rgba(156, 175, 53, 0.48);
@@ -310,12 +474,13 @@ body.kward-docs #footer {
   }
 
   .kward-topnav,
-  .kward-guide-search {
+  .kward-guide-search,
+  .kward-api-index-link {
     display: none;
   }
 
   .kward-nav-toggle {
-    display: inline-block;
+    display: flex;
   }
 
 
@@ -371,6 +536,101 @@ body.kward-docs #footer {
   color: var(--kward-accent-bright);
 }
 
+/*
+  Hero tagline "swosh": "Your terminal." flies out to the left and is
+  replaced by "Your RPC frontend." flying in from the right, then cycles
+  back. The second line mirrors it from the opposite side — "Your agent."
+  flies out to the right and is replaced by "Your engine." flying in from
+  the left — both lines swap in sync. Pure CSS — no JS. The global
+  @media (prefers-reduced-motion) rule above collapses the animation to
+  the static original copy ("Your terminal. Your agent.") so it remains
+  accessible and calm.
+*/
+.kward-swosh {
+  box-sizing: content-box;
+  display: inline-block;
+  height: 0.98em;
+  line-height: 0.98;
+  margin: -0.16em -0.08em;
+  overflow: hidden;
+  padding: 0.16em 0.08em;
+  position: relative;
+  vertical-align: top;
+}
+
+.kward-hero h1 .kward-swosh-text {
+  color: var(--kward-ink);
+  display: inline-block;
+  line-height: 0.98;
+  white-space: nowrap;
+  will-change: transform, opacity;
+}
+
+/* The longer text ("Your RPC frontend.") stays in flow to size the box;
+   the shorter "Your terminal." overlays it absolutely. */
+.kward-swosh-text-a {
+  left: 0.08em;
+  position: absolute;
+  top: 0.16em;
+}
+
+.kward-swosh-text-a {
+  animation: kward-swosh-a 12s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+}
+
+.kward-swosh-text-b {
+  animation: kward-swosh-b 12s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+  position: relative;
+}
+
+@keyframes kward-swosh-a {
+  0%, 40%   { transform: translateX(0);     opacity: 1; filter: none; }
+  50%       { transform: translateX(-140%); opacity: 0; filter: blur(3px); }
+  51%, 88%  { transform: translateX(140%);  opacity: 0; filter: none; }
+  100%      { transform: translateX(0);     opacity: 1; filter: none; }
+}
+
+@keyframes kward-swosh-b {
+  0%, 40%   { transform: translateX(140%);  opacity: 0; filter: none; }
+  50%       { transform: translateX(0);     opacity: 1; filter: none; }
+  88%       { transform: translateX(0);     opacity: 1; filter: none; }
+  100%      { transform: translateX(-140%); opacity: 0; filter: blur(3px); }
+}
+
+/*
+  Second line, mirrored: "Your agent." exits to the right while
+  "Your LLM engine." enters from the left (left-to-right), in sync with
+  the first swosh. Both texts keep the accent-bright color of the
+  original "Your agent." span.
+*/
+.kward-hero h1 .kward-swosh-text-c {
+  animation: kward-swosh-c 12s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+  color: var(--kward-accent-bright);
+  left: 0.08em;
+  position: absolute;
+  top: 0.16em;
+}
+
+.kward-hero h1 .kward-swosh-text-d {
+  animation: kward-swosh-d 12s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+  color: var(--kward-accent-bright);
+  position: relative;
+}
+
+@keyframes kward-swosh-c {
+  0%, 40%  { transform: translateX(0);     opacity: 1; filter: none; }
+  50%       { transform: translateX(140%);  opacity: 0; filter: blur(3px); }
+  51%, 88%  { transform: translateX(-140%); opacity: 0; filter: none; }
+  100%      { transform: translateX(0);     opacity: 1; filter: none; }
+}
+
+@keyframes kward-swosh-d {
+  0%, 40%  { transform: translateX(-140%); opacity: 0; filter: none; }
+  50%       { transform: translateX(0);     opacity: 1; filter: none; }
+  88%       { transform: translateX(0);     opacity: 1; filter: none; }
+  100%      { transform: translateX(140%);  opacity: 0; filter: blur(3px); }
+}
+
 .kward-lede {
   color: var(--kward-ink);
   font-size: 19px;
@@ -759,10 +1019,17 @@ body.kward-docs #content li,
 body.kward-docs #filecontents p,
 body.kward-docs #filecontents li {
   color: var(--kward-ink);
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   font-size: 17px;
   line-height: 1.72;
 }
 
+body.kward-docs #filecontents p,
+body.kward-docs #filecontents li,
+body.kward-docs #content p {
+  max-width: 72ch;
+}
+
 body.kward-docs #content ul,
 body.kward-docs #filecontents ul,
 body.kward-docs #content ol,
@@ -925,17 +1192,26 @@ body.kward-docs .kward-home #footer {
   border-radius: 12px;
   box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
   display: none;
-  gap: 22px;
-  grid-template-columns: repeat(4, minmax(170px, 1fr));
+  gap: 16px;
+  grid-template-columns: repeat(2, minmax(160px, 220px));
   left: 50%;
+  max-width: calc(100vw - 48px);
   opacity: 0;
-  padding: 28px 22px 22px;
+  padding: 20px;
   pointer-events: none;
   position: absolute;
   top: 100%;
   transform: translate(-50%, -8px);
   transition: opacity 140ms ease, transform 140ms ease;
-  width: min(920px, calc(100vw - 48px));
+  width: max-content;
+}
+
+.kward-advanced-nav-dropdown {
+  grid-template-columns: repeat(3, minmax(150px, 200px));
+}
+
+.kward-api-nav-dropdown {
+  grid-template-columns: repeat(2, minmax(170px, 210px));
 }
 
 .kward-nav-dropdown::before {
@@ -991,69 +1267,107 @@ body.kward-docs .kward-home #footer {
 }
 
 @media (max-width: 920px) {
-  .kward-topnav {
+  /* The nav panel: hidden until the hamburger is tapped. */
+  body.kward-docs .kward-topnav {
     background: rgba(5, 9, 5, 0.98);
     border: 1px solid rgba(156, 175, 53, 0.32);
     border-radius: 12px;
     box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
-    display: none;
-    gap: 0;
-    height: auto;
-    left: 16px;
-    padding: 12px;
+    display: none !important;
+    flex-direction: column;
+    gap: 2px;
+    height: auto !important;
+    left: 12px;
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+    padding: 8px;
     position: fixed;
-    right: 16px;
+    right: 12px;
     top: 88px;
     z-index: 40;
   }
 
-  body.kward-nav-open .kward-topnav {
-    display: block;
+  body.kward-docs.kward-nav-open .kward-topnav {
+    display: flex !important;
+  }
+
+  /* Every nav item: reset desktop stretch/height, force visibility. */
+  body.kward-docs .kward-nav-menu,
+  body.kward-docs .kward-topnav > a,
+  body.kward-docs .kward-nav-menu-link,
+  body.kward-docs .kward-nav-menu-button {
+    height: auto !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    visibility: visible !important;
   }
 
-  .kward-nav-menu {
-    display: block;
+  body.kward-docs .kward-nav-menu {
+    display: flex !important;
+    flex-direction: column;
+    position: relative;
   }
 
-  .kward-topnav > a,
-  .kward-nav-menu-link,
-  .kward-nav-menu-button {
+  body.kward-docs .kward-topnav > a,
+  body.kward-docs .kward-nav-menu-link {
+    align-items: center;
     border: 0;
     border-radius: 8px;
     box-sizing: border-box;
-    display: inline-flex;
-    height: auto;
-    padding: 11px 12px;
+    color: var(--kward-ink) !important;
+    display: flex !important;
+    font-weight: 700;
+    padding: 14px 16px;
+    text-decoration: none;
+    width: 100%;
   }
 
-  .kward-topnav > a {
-    width: 100%;
+  body.kward-docs .kward-nav-menu-button {
+    display: none !important;
   }
 
-  .kward-nav-menu-link {
-    width: calc(100% - 48px);
+  /* All dropdown links visible directly — no accordion on mobile. */
+  body.kward-docs .kward-nav-dropdown {
+    background: transparent !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    display: block !important;
+    grid-template-columns: 1fr !important;
+    left: auto !important;
+    opacity: 1 !important;
+    padding: 0 0 4px 8px !important;
+    pointer-events: auto !important;
+    position: static !important;
+    top: auto !important;
+    transform: none !important;
+    transition: none !important;
+    width: auto !important;
   }
 
-  .kward-nav-menu-button {
-    justify-content: center;
-    width: 44px;
+  body.kward-docs .kward-nav-dropdown section {
+    margin-bottom: 2px;
   }
 
-  .kward-nav-dropdown {
-    background: rgba(255, 255, 255, 0.03);
-    border: 0;
-    box-shadow: none;
-    grid-template-columns: 1fr;
-    left: auto;
-    opacity: 1;
-    padding: 8px 0 8px 14px;
-    pointer-events: auto;
-    position: static;
-    top: auto;
-    transform: none;
-    width: auto;
+  body.kward-docs .kward-nav-dropdown h2 {
+    border-bottom: 0;
+    color: var(--kward-muted);
+    font-size: 11px;
+    letter-spacing: 0.1em;
+    margin: 8px 10px 4px;
+    padding: 0;
   }
 
+  body.kward-docs .kward-nav-dropdown a {
+    border-radius: 8px;
+    color: var(--kward-ink) !important;
+    display: block !important;
+    padding: 12px 14px;
+    text-decoration: none;
+  }
+
+  /* Search is hidden on mobile; it lives only in the desktop topbar. */
+
   .kward-page {
     padding: 104px 16px 42px;
   }
@@ -1063,6 +1377,134 @@ body.kward-docs .kward-home #footer {
   }
 }
 
+/* YARD's class/method/file list pages use a separate full_list template. */
+.kward-full-list-body .kward-topbar {
+  position: relative;
+}
+
+.kward-full-list-body .kward-page {
+  padding-top: 40px;
+}
+
+.kward-full-list-body #content {
+  background: var(--kward-panel-strong);
+  border: 1px solid var(--kward-border);
+  border-radius: 14px;
+  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
+  padding: 38px;
+}
+
+.kward-full-list-body .fixed_header {
+  background: transparent;
+  height: auto;
+  margin: 0 0 24px;
+  padding: 0;
+  position: static;
+  width: auto;
+}
+
+.kward-full-list-body #full_list_header {
+  color: var(--kward-ink);
+  font-size: clamp(36px, 5vw, 62px);
+  letter-spacing: -0.04em;
+  line-height: 0.98;
+  margin: 0 0 18px;
+  padding: 0;
+}
+
+.kward-full-list-body #full_list_nav {
+  color: var(--kward-muted);
+  font-size: 14px;
+  margin: 0 0 18px;
+}
+
+.kward-full-list-body #full_list_nav a,
+.kward-full-list-body #full_list_nav a:visited {
+  color: var(--kward-accent-bright);
+}
+
+.kward-full-list-body #full_list_nav a:hover {
+  color: #f0f7a0;
+}
+
+.kward-full-list-body #search {
+  color: var(--kward-muted);
+  font-size: 14px;
+  margin: 0;
+  padding: 0;
+  width: auto;
+}
+
+.kward-full-list-body #search input {
+  background: rgba(3, 6, 4, 0.72);
+  border: 1px solid rgba(156, 175, 53, 0.42);
+  border-radius: 999px;
+  color: var(--kward-ink);
+  font: inherit;
+  margin-left: 8px;
+  outline: none;
+  padding: 8px 12px;
+  width: min(260px, 60vw);
+}
+
+.kward-full-list-body #search input:focus {
+  border-color: var(--kward-accent-bright);
+  box-shadow: 0 0 0 3px rgba(156, 175, 53, 0.18);
+}
+
+.kward-full-list-body #full_list {
+  background: rgba(3, 6, 4, 0.42);
+  border: 1px solid rgba(156, 175, 53, 0.22);
+  border-radius: 12px;
+  font-size: 15px;
+  margin: 0;
+  overflow: auto;
+  padding: 8px;
+}
+
+.kward-full-list-body #full_list li {
+  color: var(--kward-muted);
+}
+
+.kward-full-list-body #full_list li.odd,
+.kward-full-list-body #full_list li.even {
+  background: transparent;
+}
+
+.kward-full-list-body #full_list li .item {
+  border-radius: 8px;
+  padding-bottom: 7px;
+  padding-top: 7px;
+}
+
+.kward-full-list-body #full_list .item:hover {
+  background: rgba(156, 175, 53, 0.13);
+}
+
+.kward-full-list-body #full_list a,
+.kward-full-list-body #full_list a:visited {
+  color: var(--kward-ink);
+}
+
+.kward-full-list-body #full_list a:hover {
+  color: var(--kward-accent-bright);
+}
+
+.kward-full-list-body #full_list li.clicked > .item {
+  background: rgba(156, 175, 53, 0.22);
+  color: var(--kward-ink);
+}
+
+.kward-full-list-body #full_list li.clicked > .item a,
+.kward-full-list-body #full_list li.clicked > .item a:visited {
+  color: var(--kward-accent-bright);
+}
+
+.kward-full-list-body #noresults {
+  background: transparent;
+  color: var(--kward-muted);
+}
+
 /* Pages no longer use YARD's iframe/sidebar layout. */
 .kward-page {
   box-sizing: border-box;
@@ -1295,37 +1737,12 @@ body.kward-docs .kward-nav-toggle {
   z-index: 9200;
 }
 
-/* Mobile navigation fallback: make the toggle independent of YARD JS timing. */
+/* Mobile navigation: z-index and color highlights. */
 @media (max-width: 920px) {
   body.kward-docs .kward-topnav {
     z-index: 9300;
   }
 
-  body.kward-docs.kward-nav-open #kward-primary-nav,
-  body.kward-docs.kward-nav-open .kward-topnav {
-    display: block !important;
-  }
-}
-
-/* Mobile uses tap state, not hover, for the Guides dropdown. */
-@media (max-width: 920px) {
-  body.kward-docs .kward-nav-menu:hover .kward-nav-dropdown,
-  body.kward-docs .kward-nav-menu:focus-within .kward-nav-dropdown {
-    display: none;
-  }
-
-  body.kward-docs .kward-nav-menu.open .kward-nav-dropdown {
-    display: grid;
-    opacity: 1;
-    pointer-events: auto;
-    transform: none;
-  }
-
-  body.kward-docs .kward-nav-menu:hover .kward-nav-menu-link,
-  body.kward-docs .kward-nav-menu:hover .kward-nav-menu-button {
-    border-bottom-color: transparent;
-  }
-
   body.kward-docs .kward-nav-menu.open .kward-nav-menu-link,
   body.kward-docs .kward-nav-menu.open .kward-nav-menu-button,
   body.kward-docs .kward-nav-menu.active .kward-nav-menu-link,
@@ -1418,7 +1835,10 @@ body.kward-docs #filecontents table {
   border: 1px solid rgba(149, 169, 52, 0.34);
   border-collapse: collapse;
   color: var(--kward-ink);
-  width: 100%;
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  width: fit-content;
 }
 
 body.kward-docs #content th,
@@ -1499,3 +1919,75 @@ body.kward-docs ul.toplevel a:active {
   color: #f0f7a0 !important;
   text-decoration: none;
 }
+
+/* Respect users who prefer reduced motion. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Printable documentation: white background, black text, hide navigation. */
+@media print {
+  body.kward-docs {
+    background: #fff;
+    color: #000;
+  }
+
+  .kward-topbar,
+  .kward-skip-link,
+  .kward-guide-search,
+  .kward-nav-toggle,
+  #toc,
+  .copy-code-button,
+  .code-copy-wrapper .copy-code-button {
+    display: none !important;
+  }
+
+  body.kward-docs #content,
+  body.kward-docs #filecontents {
+    background: #fff;
+    border: 0;
+    box-shadow: none;
+    color: #000;
+    padding: 0;
+  }
+
+  body.kward-docs #content h1,
+  body.kward-docs #content h2,
+  body.kward-docs #content h3,
+  body.kward-docs #filecontents h1,
+  body.kward-docs #filecontents h2,
+  body.kward-docs #filecontents h3 {
+    color: #000;
+  }
+
+  body.kward-docs #content p,
+  body.kward-docs #content li,
+  body.kward-docs #filecontents p,
+  body.kward-docs #filecontents li {
+    color: #000;
+  }
+
+  body.kward-docs #content a,
+  body.kward-docs #filecontents a {
+    color: #000;
+    text-decoration: underline;
+  }
+
+  body.kward-docs pre {
+    background: #f4f4f4;
+    border: 1px solid #ccc;
+    color: #000;
+  }
+
+  .kward-page {
+    padding: 0;
+    max-width: none;
+  }
+}