@mgks/docmd 0.1.3 → 0.2.0

package/src/assets/css/docmd-main.css

@@ -1,598 +1,777 @@
-/* src/assets/css/docmd-main.css */
 :root {
-    --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  
-    /* Light Theme (default) */
-    --bg-color: #ffffff;
-    --text-color: #333333;
-    --sidebar-bg: #f4f7f9;
-    --sidebar-text: #2c3e50;
-    --sidebar-link-active-bg: #e0e7ec;
-    --sidebar-link-active-parent-bg: #e9eff3; /* New variable for parent items */
-    --link-color: #007bff;
-    --border-color: #e0e0e0;
-    --code-bg: #f8f8f8;
-    --code-text: #333;
-    --header-bg: #ffffff; /* Added for header */
-    --header-border: #e0e0e0; /* Added for header border */
-    
-    /* Image styling variables */
-    --image-border-color: #e0e0e0;
-    --image-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    --image-caption-bg: #f8f8f8;
-    --image-caption-text: #666;
-    --lightbox-bg: rgba(0, 0, 0, 0.9);
-    --lightbox-text: #fff;
-  }
-  
-  body[data-theme="dark"] {
-    --bg-color: #1a1a1a;
-    --text-color: #e0e0e0;
-    --sidebar-bg: #2c2c2c;
-    --sidebar-text: #bdc3c7;
-    --sidebar-link-active-bg: #3a3a3a;
-    --sidebar-link-active-parent-bg: #343434; /* New variable for parent items in dark mode */
-    --link-color: #58a6ff;
-    --border-color: #444444;
-    --code-bg: #282c34; /* Common dark code bg */
-    --code-text: #abb2bf;
-    --header-bg: #1a1a1a; /* Added for header */
-    --header-border: #444444; /* Added for header border */
-    
-    /* Image styling variables for dark mode */
-    --image-border-color: #444444;
-    --image-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    --image-caption-bg: #2c2c2c;
-    --image-caption-text: #bdc3c7;
-    --lightbox-bg: rgba(0, 0, 0, 0.95);
-    --lightbox-text: #fff;
-  }
-  
-  body {
-    font-family: var(--font-family-sans);
-    background-color: var(--bg-color);
-    color: var(--text-color);
-    margin: 0;
-    display: flex;
-    min-height: 100vh;
-    line-height: 1.6;
-  }
-  
-  .sidebar {
-    width: 260px;
-    background-color: var(--sidebar-bg);
-    color: var(--sidebar-text);
-    padding: 20px;
-    border-right: 1px solid var(--border-color);
-    height: 100vh; /* Full height */
-    position: fixed; /* Fixed position */
-    top: 0;
-    left: 0;
-    overflow-y: auto; /* Scrollable if content overflows */
-    box-sizing: border-box;
-  }
-  
-  .sidebar h1 {
-    font-size: 1.5em;
-    margin-top: 0;
-    margin-bottom: 20px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid var(--border-color);
-  }
-  
-  .sidebar nav ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-  
-  .sidebar nav li a {
-    display: block;
-    padding: 8px 10px;
-    text-decoration: none;
-    color: var(--sidebar-text);
-    border-radius: 4px;
-    transition: background-color 0.2s ease;
-  }
-  
-  .sidebar nav li a:hover,
-  .sidebar nav li a.active {
-    background-color: var(--sidebar-link-active-bg);
-  }
+  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --bg-color: #ffffff;
+  --text-color: #333333;
+  --sidebar-bg: #f4f7f9;
+  --sidebar-text: #2c3e50;
+  --sidebar-link-active-bg: #e0e7ec;
+  --sidebar-link-active-parent-bg: #e9eff3;
+  --link-color: #007bff;
+  --border-color: #e0e0e0;
+  --code-bg: #f8f8f8;
+  --code-text: #333;
+  --header-bg: #ffffff;
+  --header-border: #e0e0e0;
+  --image-border-color: #e0e0e0;
+  --image-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --image-caption-bg: #f8f8f8;
+  --image-caption-text: #666;
+  --lightbox-bg: rgba(0, 0, 0, 0.9);
+  --lightbox-text: #fff;
+}
 
-  /* Additional active highlight for the active page itself */
-  .sidebar nav li a.active {
-    font-weight: 600;
-    color: var(--link-color);
-  }
+body[data-theme="dark"] {
+  --bg-color: #1a1a1a;
+  --text-color: #e0e0e0;
+  --sidebar-bg: #2c2c2c;
+  --sidebar-text: #bdc3c7;
+  --sidebar-link-active-bg: #3a3a3a;
+  --sidebar-link-active-parent-bg: #343434;
+  --link-color: #58a6ff;
+  --border-color: #444444;
+  --code-bg: #282c34;
+  --code-text: #abb2bf;
+  --header-bg: #1a1a1a;
+  --header-border: #444444;
+  --image-border-color: #444444;
+  --image-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --image-caption-bg: #2c2c2c;
+  --image-caption-text: #bdc3c7;
+  --lightbox-bg: rgba(0, 0, 0, 0.95);
+  --lightbox-text: #fff;
+}
 
-  /* Specific style for parent items with active children */
-  .sidebar nav li.active-parent > a {
-    background-color: var(--sidebar-link-active-parent-bg);
-    font-weight: 500;
-    position: relative; /* For the indicator */
-  }
+body {
+  font-family: var(--font-family-sans);
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  margin: 0px;
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.6;
+}
 
-  /* Add a subtle indicator for active parents */
-  .sidebar nav li.active-parent > a::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background-color: var(--link-color);
-    opacity: 0.5;
-  }
+.sidebar {
+  width: 260px;
+  background-color: var(--sidebar-bg);
+  color: var(--sidebar-text);
+  padding: 20px;
+  border-right: 1px solid var(--border-color);
+  height: 100vh;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  overflow-y: auto;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
 
-  /* Make the indicator more prominent when it's the actual active page */
-  .sidebar nav li.active-parent > a.active::before {
-    opacity: 1;
-  }
+.sidebar h1 {
+  font-size: 1.5em;
+  margin-top: 0px;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--border-color);
+}
 
-  .sidebar nav ul ul { /* Nested lists */
-    padding-left: 20px;
-    margin-top: 5px;
-  }
-  
-  
-  .main-content-wrapper {
-    margin-left: 260px; /* Same as sidebar width */
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .page-header {
-    padding: 15px 30px;
-    border-bottom: 1px solid var(--header-border);
-    background-color: var(--header-bg);
-    /* position: sticky;
-    top: 0;
-    z-index: 10; Removed sticky header for now for simplicity */
-  }
-  
-  .page-header h1 {
-    margin: 0;
-    font-size: 1.8em;
-  }
-  
-  
-  .content-area {
-    padding: 2.5rem 2rem;
-    max-width: 1200px;
-    margin: 0 auto;
-    width: 100%;
-    box-sizing: border-box;
+.sidebar nav ul {
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+}
 
+.sidebar nav li a {
+  display: block;
+  padding: 8px 10px;
+  text-decoration: none;
+  color: var(--sidebar-text);
+  border-radius: 4px;
+  transition: background-color 0.2s;
 }
-  
-  
-  /* Code blocks */
-  pre {
-    background-color: var(--code-bg);
-    color: var(--code-text);
-    padding: 1em;
-    border-radius: 4px;
-    overflow-x: auto;
-    font-family: var(--font-family-mono);
-  }
-  
-  code {
-    font-family: var(--font-family-mono);
-    background-color: var(--code-bg);
-    padding: 0.2em 0.4em;
-    border-radius: 3px;
-    font-size: 0.9em;
-  }
-  
-  pre code {
-    background-color: transparent;
-    padding: 0;
-    font-size: inherit;
-  }
 
-  .sidebar-header {
-    padding-bottom: 10px;
-    margin-bottom: 10px;
-    border-bottom: 1px solid var(--border-color);
-    text-align: center; /* Or left, depending on design */
-  }
-  .sidebar-header h1 { /* If no logo */
-    font-size: 1.5em;
-    margin-top: 0;
-    margin-bottom: 0; /* Handled by sidebar-header */
-  }
-  .logo-link img {
-    max-height: 40px; /* Default max height, can be overridden by inline style from config */
-    width: auto;
-    display: block;
-    margin: 0 auto; /* Center if text-align: center on parent */
-  }
-  .logo-link img.logo-light { display: block; } /* Show light logo by default */
-  .logo-link img.logo-dark { display: none; } /* Hide dark logo by default */
-
-  /* In dark mode, show dark logo and hide light logo */
-  body[data-theme="dark"] .logo-link img.logo-light { display: none; }
-  body[data-theme="dark"] .logo-link img.logo-dark { display: block; }
-
-  /* Navigation Icons (Lucide SVGs will have these classes) */
-  .sidebar-nav .lucide-icon { /* General class for all lucide icons in nav */
-    width: 1em; /* Default, can be overridden by specific icon classes if needed */
-    height: 1em;
-    margin-right: 0.5em;
-    vertical-align: -0.15em; /* Fine-tune alignment */
-    stroke-width: 2; /* Default Lucide stroke width */
-  }
-  .sidebar-nav .nav-external-icon {
-    width: 1em;
-    height: 1.5em;
-    float: right;
-    margin-left: 0.3em;
-    opacity: 0.7;
-
-}
-
-  /* Theme Toggle Button */
-  .theme-toggle-button {
-    background: transparent;
-    border: 1px solid var(--border-color);
-    color: var(--sidebar-text); /* Not directly used as icon has its own color */
-    padding: 8px;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-top: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-  }
-  .theme-toggle-button:hover {
-    background-color: var(--sidebar-link-active-bg);
-  }
-  .theme-toggle-button .lucide-icon { /* Styles for sun/moon icons in button */
-    width: 1.2em;
-    height: 1.2em;
-  }
-  .theme-toggle-button .icon-moon { display: none; } /* icon-moon is class from renderIcon */
-  .theme-toggle-button .icon-sun { display: block; }
-  body[data-theme="dark"] .theme-toggle-button .icon-moon { display: block; }
-  body[data-theme="dark"] .theme-toggle-button .icon-sun { display: none; }
-
-
-  /* Custom Containers */
-  .docmd-container {
-    padding: 1rem 1.5rem; /* More horizontal padding */
-    margin-bottom: 1.5rem;
-    border-radius: 6px;
-    border: 1px solid var(--border-color);
-    background-color: var(--code-bg); /* Default background, can be overridden */
-  }
-  .docmd-container > :first-child { margin-top: 0; }
-  .docmd-container > :last-child { margin-bottom: 0; }
+.sidebar nav li a:hover, .sidebar nav li a.active {
+  background-color: var(--sidebar-link-active-bg);
+}
 
-  /* Callouts */
-  .callout {
-    border-left-width: 5px;
-    background-color: transparent; /* Override default docmd-container bg */
-  }
-  .callout-title {
-    font-weight: bold;
-    margin-bottom: 0.5em;
-  }
-  .callout-info { border-left-color: #3498db; background-color: rgba(52, 152, 219, 0.07); }
-  .callout-warning { border-left-color: #f39c12; background-color: rgba(243, 156, 18, 0.07); }
-  .callout-tip { border-left-color: #2ecc71; background-color: rgba(46, 204, 113, 0.07); }
-  .callout-success { border-left-color: #2ecc71; background-color: rgba(46, 204, 113, 0.07); }
-  .callout-danger { border-left-color: #e74c3c; background-color: rgba(231, 76, 60, 0.07); }
-  .callout .callout-content > :first-child { margin-top: 0; }
-  .callout .callout-content > :last-child { margin-bottom: 0; }
-
-  .card .card-title {
-    font-weight: bold;
-    font-size: 1.1em;
-    margin: -1rem -1.5rem 1rem -1.5rem; /* Extend to edges of padding */
-    padding: 0.75rem 1.5rem;
-    border-bottom: 1px solid var(--border-color);
-  }
-  .card .card-content > :first-child { margin-top: 0; }
-  .card .card-content > :last-child { margin-bottom: 0; }
-
-  /* Steps (using CSS counters for H4 headings within .steps) */
-  .steps {
-    /* counter-reset is set inline on the div by markdown-it-container render function */
-    background-color: transparent; /* Often steps don't need a strong background */
-    border: none; /* Or a very light border */
-    padding-left: 0; padding-right: 0; /* Remove default container padding if steps are full-width */
-  }
-  .steps h4 { /* Assuming users use H4 for step titles */
-    counter-increment: step-counter;
-    position: relative;
-    padding-left: 3em; /* Space for number */
-    margin-bottom: 0.5em;
-    margin-top: 1.5em; /* Space between steps */
-    font-size: 1.2em; /* Make step titles prominent */
-  }
-  .steps h4:first-child {
-    margin-top: 0.5em; /* Less top margin for the very first step */
-  }
-  .steps h4::before {
-    content: counter(step-counter);
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 2em; /* Larger circle */
-    height: 2em;
-    border-radius: 50%;
-    background-color: var(--link-color);
-    color: white;
-    font-size: 0.9em; /* Number font size relative to H4 */
-    font-weight: bold;
-    line-height: 2em; /* Ensure number is centered in circle */
-  }
-  .steps h4 + * { /* Content immediately after step title */
-    margin-left: 3em; /* Align with title text */
-    margin-top: 0.5em;
-    padding-bottom: 1em; /* Space before next step title or end of container */
-  }
-  .steps > :last-child { margin-bottom: 0; }
-
-
-  /* Footer */
-  .page-footer {
-    text-align: center;
-    padding: 20px 30px;
-    margin-top: auto; /* Pushes footer to bottom if content is short */
-    border-top: 1px solid var(--border-color);
-    font-size: 0.9em;
-    color: var(--text-color);
-    background-color: var(--sidebar-bg); /* Or a distinct footer background */
-  }
-  .page-footer a {
-    color: var(--link-color);
-    text-decoration: none;
-  }
-  .page-footer a:hover {
-    text-decoration: underline;
-  }
+.sidebar nav li a.active {
+  font-weight: 600;
+  color: var(--link-color);
+}
+
+.sidebar nav li.active-parent > a {
+  background-color: var(--sidebar-link-active-parent-bg);
+  font-weight: 500;
+  position: relative;
+}
+
+.sidebar nav li.active-parent > a::before {
+  content: "";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  bottom: 0px;
+  width: 3px;
+  background-color: var(--link-color);
+  opacity: 0.5;
+}
+
+.sidebar nav li.active-parent > a.active::before {
+  opacity: 1;
+}
+
+.sidebar nav ul ul {
+  padding-left: 20px;
+  margin-top: 5px;
+}
 
-  /* Focus Visible */
-  :focus-visible {
+.sidebar-toggle-button {
+  background: none;
+  border: 1px solid transparent;
+  color: var(--text-color);
+  cursor: pointer;
+  padding: 0px;
+  margin: .5em 0 0;
+  display: none;
+  border-radius: 4px;
+}
+
+.sidebar-toggle-button:hover {
+  background-color: var(--sidebar-bg);
+  border-color: var(--border-color);
+}
+
+.sidebar-toggle-button .lucide-icon {
+  width: 2em;
+  height: 2em;
+}
+
+body.sidebar-collapsible .sidebar-toggle-button {
+  display: block;
+}
+
+body.sidebar-collapsed .sidebar {
+  transform: translateX(-100%);
+  visibility: hidden;
+}
+
+body.sidebar-collapsed .main-content-wrapper {
+  margin-left: 0px;
+}
+
+.sidebar, .main-content-wrapper {
+  transition: transform 0.3s, margin-left 0.3s, visibility 0.3s;
+}
+
+.main-content-wrapper {
+  margin-left: 260px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.page-header {
+  padding: 15px 30px;
+  border-bottom: 1px solid var(--header-border);
+  background-color: var(--header-bg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 2.5em;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.page-header h1 {
+  margin: 0px;
+  font-size: 1.8em;
+}
+
+.theme-toggle-header {
+  padding: 8px;
+  background: var(--content-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.theme-toggle-header:hover {
+  background: var(--sidebar-bg);
+  border-color: var(--accent-color);
+}
+
+.content-area {
+  padding: 2.5rem 2rem;
+  max-width: 1200px;
+  margin: 0px auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+pre {
+  background-color: var(--code-bg);
+  color: var(--code-text);
+  padding: 1em;
+  border-radius: 4px;
+  overflow-x: auto;
+  font-family: var(--font-family-mono);
+}
+
+code {
+  font-family: var(--font-family-mono);
+  background-color: var(--code-bg);
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0px;
+  font-size: inherit;
+}
+
+.sidebar-header {
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid var(--border-color);
+  text-align: center;
+  height: 2.5em;
+}
+
+.sidebar-header h1 {
+  font-size: 1.5em;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.logo-link img {
+  max-height: 40px;
+  width: auto;
+  display: block;
+  margin: 0px auto;
+}
+
+.logo-link img.logo-light {
+  display: block;
+}
+
+.logo-link img.logo-dark {
+  display: none;
+}
+
+body[data-theme="dark"] .logo-link img.logo-light {
+  display: none;
+}
+
+body[data-theme="dark"] .logo-link img.logo-dark {
+  display: block;
+}
+
+.sidebar-nav .lucide-icon {
+  width: 1em;
+  height: 1em;
+  margin-right: 0.5em;
+  vertical-align: -0.15em;
+  stroke-width: 2;
+}
+
+.sidebar-nav .nav-external-icon {
+  width: 1em;
+  height: 1.5em;
+  float: right;
+  margin-left: 0.3em;
+  opacity: 0.7;
+}
+
+.theme-toggle-button {
+  background: none;
+  border: 1px solid var(--border-color);
+  color: var(--sidebar-text);
+  padding: 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 0.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.theme-toggle-button:hover {
+  background-color: var(--sidebar-link-active-bg);
+}
+
+.theme-toggle-button .lucide-icon {
+  width: 1.2em;
+  height: 1.2em;
+}
+
+.theme-toggle-button .icon-moon {
+  display: none;
+}
+
+.theme-toggle-button .icon-sun {
+  display: block;
+}
+
+body[data-theme="dark"] .theme-toggle-button .icon-moon {
+  display: block;
+}
+
+body[data-theme="dark"] .theme-toggle-button .icon-sun {
+  display: none;
+}
+
+.docmd-container {
+  padding: 1rem 1.5rem;
+  margin-bottom: 1.5rem;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background-color: var(--code-bg);
+}
+
+.docmd-container > :first-child {
+  margin-top: 0px;
+}
+
+.docmd-container > :last-child {
+  margin-bottom: 0px;
+}
+
+.callout {
+  border-left-width: 5px;
+  background-color: transparent;
+}
+
+.callout-title {
+  font-weight: bold;
+  margin-bottom: 0.5em;
+}
+
+.callout-info {
+  border-left-color: rgb(52, 152, 219);
+  background-color: rgba(52, 152, 219, 0.07);
+}
+
+.callout-warning {
+  border-left-color: rgb(243, 156, 18);
+  background-color: rgba(243, 156, 18, 0.07);
+}
+
+.callout-tip {
+  border-left-color: rgb(46, 204, 113);
+  background-color: rgba(46, 204, 113, 0.07);
+}
+
+.callout-success {
+  border-left-color: rgb(46, 204, 113);
+  background-color: rgba(46, 204, 113, 0.07);
+}
+
+.callout-danger {
+  border-left-color: rgb(231, 76, 60);
+  background-color: rgba(231, 76, 60, 0.07);
+}
+
+.callout .callout-content > :first-child {
+  margin-top: 0px;
+}
+
+.callout .callout-content > :last-child {
+  margin-bottom: 0px;
+}
+
+.card .card-title {
+  font-weight: bold;
+  font-size: 1.1em;
+  margin: -1rem -1.5rem 1rem;
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.card .card-content > :first-child {
+  margin-top: 0px;
+}
+
+.card .card-content > :last-child {
+  margin-bottom: 0px;
+}
+
+.docmd-container.steps {
+  position: relative;
+  padding-left: 3rem;
+  border: medium;
+  background: none;
+  box-shadow: none;
+}
+
+.docmd-container.steps::before {
+  content: "";
+  position: absolute;
+  top: 1rem;
+  bottom: 1rem;
+  left: 2.5rem;
+  width: 2px;
+  background-color: var(--border-color);
+}
+
+.step {
+  position: relative;
+  padding-bottom: 1.5rem;
+}
+
+.step:last-child {
+  padding-bottom: 0px;
+}
+
+.step::before {
+  content: attr(data-step);
+  position: absolute;
+  left: -3rem;
+  top: 0.1rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  background-color: var(--bg-color);
+  border: 2px solid var(--border-color);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--link-color);
+  z-index: 1;
+}
+
+.step-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 0px;
+  margin-bottom: 0.5rem;
+}
+
+.step-content > :first-child {
+  margin-top: 0px;
+}
+
+.step-content > :last-child {
+  margin-bottom: 0px;
+}
+
+.docmd-container.steps-reset {
+  counter-reset: step-counter 0;
+}
+
+.docmd-container.steps-reset ol.steps-list {
+  counter-reset: list-counter 0;
+  list-style: none;
+}
+
+.docmd-container.steps-reset ol.steps-list > li.step-item {
+  counter-increment: list-counter 1;
+  position: relative;
+  padding-left: 0px;
+  margin-bottom: 2.5rem;
+}
+
+.docmd-container.steps-reset ol.steps-list > li.step-item::before {
+  content: counter(list-counter) ".";
+  font-weight: bold;
+  margin-right: 0.5em;
+  font-size: 2rem;
+  color: var(--accent-color, #007acc);
+}
+
+.docmd-container.steps-reset .docmd-container.steps-reset ol.steps-list {
+  counter-reset: list-counter 0;
+}
+
+.docmd-container.steps-reset .docmd-container.steps-reset ol.steps-list > li.step-item {
+  counter-increment: list-counter 1;
+}
+
+.docmd-container.steps-reset .docmd-container.steps-reset ol.steps-list > li.step-item::before {
+  content: counter(list-counter) ".";
+  font-weight: bold;
+  margin-right: 0.5em;
+  color: var(--accent-color, #007acc);
+}
+
+.docmd-container.steps-reset ol.steps-list[start] {
+  counter-reset: list-counter 0;
+}
+
+.docmd-container.steps-reset ol.steps-list[start] > li.step-item {
+  counter-increment: list-counter 1;
+}
+
+.docmd-container.steps-reset ol.steps-list[start] > li.step-item::before {
+  content: counter(list-counter) ".";
+  font-weight: bold;
+  margin-right: 0.5em;
+  color: var(--accent-color, #007acc);
+}
+
+.docmd-container.steps-reset ol:not(.steps-list) > li::before, .docmd-container.steps-reset ul > li::before, .docmd-container.steps-reset ol:not(.steps-list)::before, .docmd-container.steps-reset ul::before {
+  width: 0.75rem;
+  height: 0.75rem;
+  left: -1.5rem;
+  top: 0.5rem;
+  content: "" !important;
+}
+
+.page-footer {
+  text-align: center;
+  padding: 20px 30px;
+  margin-top: auto;
+  border-top: 1px solid var(--border-color);
+  font-size: 0.9em;
+  color: var(--text-color);
+  background-color: var(--sidebar-bg);
+}
+
+.page-footer a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+.page-footer a:hover {
+  text-decoration: underline;
+}
+
+:focus-visible {
   outline: 2px solid var(--link-color);
   outline-offset: 2px;
-  /* box-shadow: 0 0 0 4px var(--bg-color), 0 0 0 6px var(--link-color); Optional halo */
-  }
-  :focus:not(:focus-visible) {
-  outline: none;
-  }
-  .sidebar nav li a:focus-visible {
-    background-color: var(--sidebar-link-active-bg);
-    outline: 2px solid var(--link-color);
-    outline-offset: -2px;
-  }
-  .theme-toggle-button:focus-visible {
-    border-color: var(--link-color);
-    box-shadow: 0 0 0 2px var(--link-color);
-  }
+}
+
+:focus:not(:focus-visible) {
+  outline: currentcolor;
+}
+
+.sidebar nav li a:focus-visible {
+  background-color: var(--sidebar-link-active-bg);
+  outline: 2px solid var(--link-color);
+  outline-offset: -2px;
+}
 
-  /* Responsive */
-  @media (max-width: 768px) {
-    body {
+.theme-toggle-button:focus-visible {
+  border-color: var(--link-color);
+  box-shadow: 0 0 0 2px var(--link-color);
+}
+
+@media (max-width: 768px) {
+  body {
       flex-direction: column;
-    }
-    .sidebar {
+  }
+
+  .sidebar {
       width: 100%;
       height: auto;
-      position: static; /* Static on mobile */
-      border-right: none;
+      position: static;
+      border-right-width: medium;
+      border-right-style: none;
+      border-right-color: currentcolor;
       border-bottom: 1px solid var(--border-color);
-    }
-    .main-content-wrapper {
-      margin-left: 0;
-    }
-    .content-area {
-      padding: 15px;
-    }
   }
 
-  /* Page Navigation at Bottom */
-  .page-navigation {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 3rem;
-    padding-top: 1.5rem;
-    border-top: 1px solid var(--border-color);
+  .sidebar-toggle-button {
+      display: block;
   }
 
-  .prev-page,
-  .next-page {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    color: var(--link-color);
-    padding: 0.75rem;
-    border-radius: 6px;
-    transition: background-color 0.2s ease;
-    width: 48%;
-    max-width: 48%;
+  .main-content-wrapper {
+      margin-left: 0px;
   }
 
-  .prev-page:hover,
-  .next-page:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-    text-decoration: none;
+  .content-area {
+      padding: 15px;
   }
+}
 
-  body[data-theme="dark"] .prev-page:hover,
-  body[data-theme="dark"] .next-page:hover {
-    background-color: rgba(255, 255, 255, 0.05);
-  }
+.page-navigation {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border-color);
+}
 
-  .prev-page {
-    justify-content: flex-start;
-  }
+.prev-page, .next-page {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--link-color);
+  padding: 0.75rem;
+  border-radius: 6px;
+  transition: background-color 0.2s;
+  width: 48%;
+  max-width: 48%;
+}
 
-  .next-page {
-    justify-content: flex-end;
-    text-align: right;
-  }
+.prev-page:hover, .next-page:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  text-decoration: none;
+}
 
-  .prev-page-placeholder,
-  .next-page-placeholder {
-    width: 48%;
-  }
+body[data-theme="dark"] .prev-page:hover, body[data-theme="dark"] .next-page:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
 
-  .prev-page span,
-  .next-page span {
-    display: flex;
-    flex-direction: column;
-  }
+.prev-page {
+  justify-content: flex-start;
+}
 
-  .prev-page small,
-  .next-page small {
-    font-size: 0.8rem;
-    opacity: 0.8;
-    margin-bottom: 0.25rem;
-  }
+.next-page {
+  justify-content: flex-end;
+  text-align: right;
+}
 
-  .prev-page strong,
-  .next-page strong {
-    font-weight: 500;
-  }
+.prev-page-placeholder, .next-page-placeholder {
+  width: 48%;
+}
 
-  .page-nav-icon {
-    width: 1.2rem;
-    height: 1.2rem;
-  }
+.prev-page span, .next-page span {
+  display: flex;
+  flex-direction: column;
+}
 
-  .prev-page .page-nav-icon {
-    margin-right: 0.75rem;
-  }
+.prev-page small, .next-page small {
+  font-size: 0.8rem;
+  opacity: 0.8;
+  margin-bottom: 0.25rem;
+}
 
-  .next-page .page-nav-icon {
-    margin-left: 0.75rem;
-  }
+.prev-page strong, .next-page strong {
+  font-weight: 500;
+}
 
-  /* Footer with Branding */
-  .page-footer {
-    text-align: center;
-    padding: 20px 30px;
-    margin-top: auto; /* Pushes footer to bottom if content is short */
-    border-top: 1px solid var(--border-color);
-    font-size: 0.9em;
-    color: var(--text-color);
-    background-color: var(--sidebar-bg); /* Or a distinct footer background */
-  }
+.page-nav-icon {
+  width: 1.2rem;
+  height: 1.2rem;
+}
 
-  .footer-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 0 auto;
-    width: 100%;
+.prev-page .page-nav-icon {
+  margin-right: 0.75rem;
+}
 
+.next-page .page-nav-icon {
+  margin-left: 0.75rem;
 }
 
-  .user-footer {
-    text-align: left;
-  }
+.page-footer {
+  text-align: center;
+  padding: 20px 30px;
+  margin-top: auto;
+  border-top: 1px solid var(--border-color);
+  font-size: 0.9em;
+  color: var(--text-color);
+  background-color: var(--sidebar-bg);
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0px auto;
+  width: 100%;
+}
+
+.user-footer {
+  text-align: left;
+}
 
-  .branding-footer {
-    text-align: right;
-    opacity: 0.9;
-    font-weight: 500;
+.branding-footer {
+  text-align: right;
+  opacity: 0.9;
+  font-weight: 500;
 }
+
 .branding-footer svg {
   color: rgb(251, 58, 58);
-  }
+}
 
-  .page-footer a {
-    color: var(--link-color);
-    text-decoration: none;
-  }
+.page-footer a {
+  color: var(--link-color);
+  text-decoration: none;
+}
 
-  .page-footer a:hover {
-    text-decoration: underline;
-  }
+.page-footer a:hover {
+  text-decoration: underline;
+}
 
-  /* Mobile responsiveness for footer and navigation */
-  @media (max-width: 768px) {
-    .footer-content {
+@media (max-width: 768px) {
+  .footer-content {
       flex-direction: column;
       gap: 1rem;
-    }
-    
-    .user-footer,
-    .branding-footer {
+  }
+
+  .user-footer, .branding-footer {
       text-align: center;
-    }
-    
-    .page-navigation {
+  }
+
+  .page-navigation {
       flex-direction: column;
       gap: 1rem;
-    }
-    
-    .prev-page,
-    .next-page,
-    .prev-page-placeholder,
-    .next-page-placeholder {
-      width: 100%;
-      max-width: 100%;
-    }
   }
 
-  /* Content layout with TOC */
-  .content-layout {
-    display: flex;
-    gap: 2rem;
-    width: 100%;
+  .prev-page, .next-page, .prev-page-placeholder, .next-page-placeholder {
+      width: 100%;
+      max-width: 100%;
   }
+}
 
-  .main-content {
-    flex: 1;
-    -webkit-min-logical-width: 0;
+.content-layout {
+  display: flex;
+  gap: 2rem;
+  width: 100%;
+}
 
+.main-content {
+  flex: 1 1 0%;
+  min-inline-size: 0px;
 }
 
-  /* Hide TOC on mobile */
-  @media (max-width: 1024px) {
-    .content-layout {
+@media (max-width: 1024px) {
+  .content-layout {
       flex-direction: column;
-    }
-    
-    /* Show TOC before content on mobile */
-    .content-layout {
+  }
+
+  .content-layout {
       display: flex;
       flex-direction: column-reverse;
-    }
   }
+}
 
-  /* TOC Styles - Simplified Hyperlink Style */
 .toc-container {
-  margin: 0;
-  padding: 0;
-  border: none;
+  margin: 0px;
+  padding: 0px;
+  border: medium;
   background-color: transparent;
 }
 
 .toc-title {
-    margin-top: 0;
-    margin-bottom: 0.5rem;
-    font-size: 1rem;
-    font-weight: bold;
-    color: var(--text-muted);
-
+  margin-top: 0px;
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+  font-weight: bold;
+  color: var(--text-muted);
 }
 
 .toc-list {
   list-style: none;
-  padding-left: 0;
-  margin: 0;
+  padding-left: 0px;
+  margin: 0px;
 }
 
 .toc-item {
@@ -601,22 +780,20 @@
 }
 
 .toc-link {
-    text-decoration: none;
-    color: var(--link-color);
-    display: inline-block;
-    padding: 0.1rem 0;
-    font-size: 0.9rem;
-    font-weight: 500;
-
+  text-decoration: none;
+  color: var(--link-color);
+  display: inline-block;
+  padding: 0.1rem 0px;
+  font-size: 0.9rem;
+  font-weight: 500;
 }
 
 .toc-link:hover {
   text-decoration: underline;
 }
 
-/* Indentation for different heading levels */
 .toc-level-2 {
-  margin-left: 0;
+  margin-left: 0px;
 }
 
 .toc-level-3 {
@@ -629,35 +806,30 @@
   font-size: 0.8rem;
 }
 
-/* TOC sidebar should only display on active pages */
 .toc-sidebar {
-    width: 180px;
-    position: sticky;
-    top: 2rem;
-    max-height: calc(100vh - 4rem);
-    overflow-y: auto;
-    align-self: flex-start;
-
+  width: 180px;
+  position: sticky;
+  top: 2rem;
+  max-height: calc(-4rem + 100vh);
+  overflow-y: auto;
+  align-self: flex-start;
 }
 
-/* Hide TOC on mobile */
 @media (max-width: 1024px) {
   .toc-sidebar {
-    width: 100%;
-    position: static;
-    margin-bottom: 1rem;
+      width: 100%;
+      position: static;
+      margin-bottom: 1rem;
   }
 }
 
-/* Basic image styling */
 img {
   max-width: 100%;
   height: auto;
   display: block;
-  margin: 1.5rem 0;
+  margin: 1.5rem 0px;
 }
 
-/* Image alignment classes */
 img.align-left {
   float: left;
   margin-right: 1.5rem;
@@ -675,7 +847,6 @@ img.align-right {
   margin-bottom: 1rem;
 }
 
-/* Image size classes */
 img.size-small {
   max-width: 300px;
 }
@@ -688,7 +859,6 @@ img.size-large {
   max-width: 800px;
 }
 
-/* Image borders and shadows */
 img.with-border {
   border: 1px solid var(--image-border-color);
   padding: 4px;
@@ -698,9 +868,8 @@ img.with-shadow {
   box-shadow: var(--image-shadow);
 }
 
-/* Figure and caption styling */
 .docmd-container figure {
-  margin: 2rem 0;
+  margin: 2rem 0px;
 }
 
 .docmd-container figure img {
@@ -713,34 +882,127 @@ img.with-shadow {
   text-align: center;
   padding: 0.5rem;
   background-color: var(--image-caption-bg);
-  border-radius: 0 0 4px 4px;
+  border-radius: 0px 0px 4px 4px;
 }
 
-/* Image gallery */
 .docmd-container .image-gallery {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 1rem;
-  margin: 2rem 0;
+  margin: 2rem 0px;
 }
 
 .docmd-container .image-gallery figure {
-  margin: 0;
+  margin: 0px;
 }
 
-/* Clear floats after aligned images */
 .docmd-container .clear-float::after {
   content: "";
   display: table;
   clear: both;
 }
 
-/* Lightbox styling */
+.docmd-tabs {
+  margin: 1.5rem 0px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px;
+}
+
+.docmd-tabs-nav {
+  display: flex;
+  background-color: var(--sidebar-bg);
+  border-bottom: 1px solid var(--border-color);
+  overflow: auto hidden;
+}
+
+.docmd-tabs-nav-item {
+  padding: 0.75rem 1.25rem;
+  cursor: pointer;
+  border-bottom-width: 3px;
+  border-bottom-style: solid;
+  border-bottom-color: transparent;
+  margin-bottom: -1px;
+  font-weight: 500;
+  color: var(--sidebar-text);
+  white-space: nowrap;
+}
+
+.docmd-tabs-nav-item:hover {
+  background-color: var(--sidebar-link-active-bg);
+}
+
+.docmd-tabs-nav-item.active {
+  color: var(--link-color);
+  border-bottom-color: var(--link-color);
+  background-color: var(--bg-color);
+}
+
+.docmd-tabs-content {
+  padding: 1.5rem;
+}
+
+.docmd-tab-pane {
+  display: none;
+}
+
+.docmd-tab-pane.active {
+  display: block;
+}
+
+.tabs-container {
+  margin: 1rem 0px;
+  border: 1px solid rgb(225, 229, 233);
+  border-radius: 0.375rem;
+}
+
+.tab-navigation {
+  display: flex;
+  background-color: rgb(248, 249, 250);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: rgb(225, 229, 233);
+  border-radius: 0.375rem 0.375rem 0px 0px;
+}
+
+.tab-button {
+  padding: 0.75rem 1rem;
+  border-width: medium medium 2px;
+  border-style: none none solid;
+  border-color: currentcolor currentcolor transparent;
+  border-image: none;
+  background: none;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.tab-button:hover {
+  background-color: rgb(233, 236, 239);
+}
+
+.tab-button.active {
+  border-bottom-color: rgb(0, 123, 255);
+  background-color: white;
+}
+
+.tab-content {
+  padding: 1rem;
+}
+
+.tab-panel {
+  display: none;
+}
+
+.tab-panel.active {
+  display: block;
+}
+
 .docmd-lightbox {
   display: none;
   position: fixed;
-  top: 0;
-  left: 0;
+  top: 0px;
+  left: 0px;
   width: 100%;
   height: 100%;
   background-color: var(--lightbox-bg);
@@ -761,8 +1023,8 @@ img.with-shadow {
   max-width: 100%;
   max-height: 80vh;
   object-fit: contain;
-  margin: 0 auto;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  margin: 0px auto;
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px;
 }
 
 .docmd-lightbox-caption {
@@ -783,25 +1045,125 @@ img.with-shadow {
 }
 
 .docmd-lightbox-close:hover {
-  color: #ddd;
+  color: rgb(221, 221, 221);
 }
 
-/* Cursor for lightbox images */
-img.lightbox,
-.docmd-container .image-gallery img {
+img.lightbox, .docmd-container .image-gallery img {
   cursor: zoom-in;
 }
 
-/* Responsive image handling */
 @media (max-width: 768px) {
-  img.align-left,
-  img.align-right {
-    float: none;
-    margin-left: auto;
-    margin-right: auto;
+  img.align-left, img.align-right {
+      float: none;
+      margin-left: auto;
+      margin-right: auto;
   }
-  
+
   .docmd-container .image-gallery {
-    grid-template-columns: 1fr;
+      grid-template-columns: 1fr;
+  }
+}
+
+.docmd-button {
+  display: inline-block;
+  padding: 0.6rem 1.2rem;
+  margin: 0.5rem;
+  border-radius: 6px;
+  background-color: var(--link-color);
+  color: rgb(255, 255, 255);
+  text-decoration: none;
+  font-weight: 500;
+  transition: background-color 0.2s, transform 0.2s;
+  border: medium;
+  cursor: pointer;
+}
+
+.docmd-button:hover {
+  text-decoration: none;
+  filter: brightness(90%);
+  transform: translateY(-1px);
+}
+
+/* Sponsor Ribbon */
+.sponsor-ribbon {
+    position: fixed;
+    bottom: 60px;
+    right: 10px;
+    z-index: 1000;
+    transform: rotate(0deg);
+    transform-origin: center;
+
+}
+
+.sponsor-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
+    color: white;
+    text-decoration: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 5px;
+    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
+    font-weight: 600;
+    font-size: 0.875rem;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+
+}
+
+.sponsor-link:hover {
+    transform: scale(1.02);
+    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
+    color: white;
+    text-decoration: none;
+
+}
+
+.sponsor-icon {
+  width: 1rem;
+  height: 1rem;
+  animation: heartbeat 2s ease-in-out infinite;
+}
+
+.sponsor-text {
+  font-family: inherit;
+}
+
+@keyframes heartbeat {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .sponsor-ribbon {
+    bottom: 10px;
+    right: 10px;
+    transform: rotate(45deg) scale(0.8);
+  }
+  
+  .sponsor-link {
+    padding: 0.5rem 1rem;
+    font-size: 0.75rem;
+  }
+  
+  .sponsor-icon {
+    width: 0.875rem;
+    height: 0.875rem;
   }
-} 
+}
+
+/* Dark mode adjustments */
+body[data-theme="dark"] .sponsor-link {
+  background: linear-gradient(135deg, #ff6b6b, #c44569);
+  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.2);
+}
+
+body[data-theme="dark"] .sponsor-link:hover {
+  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);
+}