ardo 1.2.2 → 2.0.0

package/dist/ui/styles.css

@@ -0,0 +1,2198 @@
+/* Ardo Theme Styles - Clean & Refined */
+
+/* CSS Variables */
+:root {
+  /* ========================================
+     Base Colors (OKLCH for better color math)
+     ======================================== */
+
+  /* Brand - Teal/Green from logo - used sparingly for accents */
+  --ardo-brand-h: 170;
+  --ardo-brand-c: 0.12;
+  --ardo-brand-l: 0.45;
+
+  /* Semantic Colors (hue values) */
+  --ardo-hue-success: 155;
+  --ardo-hue-warning: 45;
+  --ardo-hue-danger: 25;
+  --ardo-hue-info: 220;
+  --ardo-hue-note: 270;
+
+  /* ========================================
+     Derived Brand Colors
+     ======================================== */
+  --ardo-c-brand: oklch(var(--ardo-brand-l) var(--ardo-brand-c) var(--ardo-brand-h));
+  --ardo-c-brand-light: oklch(
+    calc(var(--ardo-brand-l) + 0.12) var(--ardo-brand-c) var(--ardo-brand-h)
+  );
+  --ardo-c-brand-dark: oklch(
+    calc(var(--ardo-brand-l) - 0.08) calc(var(--ardo-brand-c) + 0.02) var(--ardo-brand-h)
+  );
+  --ardo-c-brand-subtle: oklch(0.96 0.02 var(--ardo-brand-h));
+  --ardo-c-brand-gradient: linear-gradient(
+    135deg,
+    oklch(var(--ardo-brand-l) var(--ardo-brand-c) var(--ardo-brand-h)) 0%,
+    oklch(
+        calc(var(--ardo-brand-l) + 0.08) calc(var(--ardo-brand-c) - 0.02)
+          calc(var(--ardo-brand-h) + 15)
+      )
+      100%
+  );
+
+  /* ========================================
+     Neutral Background Colors (no green tint)
+     ======================================== */
+  --ardo-c-bg: #ffffff;
+  --ardo-c-bg-soft: #f8f9fa;
+  --ardo-c-bg-mute: #f1f3f5;
+  --ardo-c-bg-alt: #e9ecef;
+
+  /* Sidebar - subtle warm gray */
+  --ardo-sidebar-bg: #f8f9fa;
+  --ardo-sidebar-border: #e9ecef;
+
+  /* Code block styling - warm cream tone */
+  --ardo-code-bg: #fdfcfb;
+  --ardo-code-border: #f0ebe4;
+  --ardo-code-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+
+  /* ========================================
+     Text Colors (neutral)
+     ======================================== */
+  --ardo-c-text: #1a1a2e;
+  --ardo-c-text-light: #495057;
+  --ardo-c-text-lighter: #868e96;
+
+  /* Border Colors */
+  --ardo-c-border: #dee2e6;
+  --ardo-c-border-light: #e9ecef;
+  --ardo-c-divider: var(--ardo-c-border);
+
+  /* ========================================
+     Container Colors (using hue variables)
+     ======================================== */
+  --ardo-c-tip: oklch(0.5 0.15 var(--ardo-hue-success));
+  --ardo-c-tip-bg: oklch(0.97 0.025 var(--ardo-hue-success));
+  --ardo-c-tip-border: oklch(0.85 0.08 var(--ardo-hue-success));
+
+  --ardo-c-warning: oklch(0.55 0.16 var(--ardo-hue-warning));
+  --ardo-c-warning-bg: oklch(0.98 0.03 var(--ardo-hue-warning));
+  --ardo-c-warning-border: oklch(0.88 0.1 var(--ardo-hue-warning));
+
+  --ardo-c-danger: oklch(0.5 0.18 var(--ardo-hue-danger));
+  --ardo-c-danger-bg: oklch(0.97 0.02 var(--ardo-hue-danger));
+  --ardo-c-danger-border: oklch(0.85 0.1 var(--ardo-hue-danger));
+
+  --ardo-c-info: oklch(0.5 0.14 var(--ardo-hue-info));
+  --ardo-c-info-bg: oklch(0.97 0.02 var(--ardo-hue-info));
+  --ardo-c-info-border: oklch(0.85 0.08 var(--ardo-hue-info));
+
+  --ardo-c-note: oklch(0.5 0.14 var(--ardo-hue-note));
+  --ardo-c-note-bg: oklch(0.97 0.02 var(--ardo-hue-note));
+  --ardo-c-note-border: oklch(0.88 0.08 var(--ardo-hue-note));
+
+  /* ========================================
+     Layout
+     ======================================== */
+  --ardo-sidebar-width: 280px;
+  --ardo-toc-width: 240px;
+  --ardo-content-max-width: 1100px;
+  --ardo-header-height: 72px;
+
+  /* Transitions */
+  --ardo-transition-fast: 0.15s ease;
+  --ardo-transition: 0.2s ease;
+  --ardo-transition-slow: 0.3s ease;
+
+  /* ========================================
+     Typography (System Font Stacks)
+     ======================================== */
+  --ardo-font-family:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    sans-serif;
+  --ardo-font-mono:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+  /* Radius */
+  --ardo-radius: 8px;
+  --ardo-radius-sm: 4px;
+  --ardo-radius-lg: 12px;
+}
+
+/* Dark mode */
+.dark {
+  --ardo-brand-l: 0.65;
+  --ardo-brand-c: 0.14;
+
+  --ardo-c-brand-subtle: oklch(0.2 0.04 var(--ardo-brand-h));
+
+  /* Dark backgrounds - cool slate */
+  --ardo-c-bg: #0f172a;
+  --ardo-c-bg-soft: #1e293b;
+  --ardo-c-bg-mute: #334155;
+  --ardo-c-bg-alt: #475569;
+
+  --ardo-sidebar-bg: #1e293b;
+  --ardo-sidebar-border: #334155;
+
+  --ardo-code-bg: #1c1917;
+  --ardo-code-border: #292524;
+  --ardo-code-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+
+  /* Light text on dark */
+  --ardo-c-text: #f1f5f9;
+  --ardo-c-text-light: #94a3b8;
+  --ardo-c-text-lighter: #64748b;
+
+  --ardo-c-border: #334155;
+  --ardo-c-border-light: #475569;
+  --ardo-c-divider: var(--ardo-c-border);
+
+  /* Dark container backgrounds */
+  --ardo-c-tip-bg: oklch(0.2 0.04 var(--ardo-hue-success));
+  --ardo-c-tip-border: oklch(0.35 0.1 var(--ardo-hue-success));
+
+  --ardo-c-warning-bg: oklch(0.22 0.05 var(--ardo-hue-warning));
+  --ardo-c-warning-border: oklch(0.4 0.12 var(--ardo-hue-warning));
+
+  --ardo-c-danger-bg: oklch(0.2 0.04 var(--ardo-hue-danger));
+  --ardo-c-danger-border: oklch(0.35 0.1 var(--ardo-hue-danger));
+
+  --ardo-c-info-bg: oklch(0.2 0.04 var(--ardo-hue-info));
+  --ardo-c-info-border: oklch(0.35 0.08 var(--ardo-hue-info));
+
+  --ardo-c-note-bg: oklch(0.2 0.04 var(--ardo-hue-note));
+  --ardo-c-note-border: oklch(0.35 0.08 var(--ardo-hue-note));
+}
+
+/* Base */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: calc(var(--ardo-header-height) + 24px);
+}
+
+body {
+  font-family: var(--ardo-font-family);
+  font-size: 16px;
+  line-height: 1.7;
+  color: var(--ardo-c-text);
+  background: var(--ardo-c-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Selection */
+::selection {
+  background: oklch(var(--ardo-brand-l) var(--ardo-brand-c) var(--ardo-brand-h) / 0.2);
+}
+
+/* Layout */
+.ardo-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.ardo-layout-container {
+  display: flex;
+  flex: 1;
+  padding-top: var(--ardo-header-height);
+}
+
+.ardo-main {
+  flex: 1;
+  min-width: 0;
+  padding: 40px 32px;
+  margin-left: var(--ardo-sidebar-width);
+}
+
+/* No sidebar margin and no padding on home page */
+.ardo-home .ardo-main {
+  margin-left: 0;
+  padding: 0;
+}
+
+/* ========================================
+   Header - Prominent & Clean
+   ======================================== */
+.ardo-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--ardo-header-height);
+  background: var(--ardo-c-bg);
+  border-bottom: 1px solid var(--ardo-c-border);
+  z-index: 100;
+}
+
+.dark .ardo-header {
+  background: var(--ardo-c-bg);
+}
+
+.ardo-header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0 32px 0 20px; /* Left padding matches sidebar padding for alignment */
+}
+
+.ardo-header-left {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.ardo-logo-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+  color: var(--ardo-c-text);
+  transition: opacity var(--ardo-transition-fast);
+}
+
+.ardo-logo-link:hover {
+  opacity: 0.8;
+}
+
+.ardo-logo {
+  height: 36px;
+}
+
+.ardo-site-title {
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+/* Nav - with underline indicator */
+.ardo-nav {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ardo-nav-link {
+  position: relative;
+  color: var(--ardo-c-text-light);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 8px 14px;
+  border-radius: var(--ardo-radius-sm);
+  transition: all var(--ardo-transition-fast);
+}
+
+.ardo-nav-link::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 2px;
+  background: var(--ardo-c-brand);
+  border-radius: 1px;
+  transition: width var(--ardo-transition);
+}
+
+.ardo-nav-link:hover {
+  color: var(--ardo-c-text);
+  background: var(--ardo-c-bg-soft);
+}
+
+.ardo-nav-link.active {
+  color: var(--ardo-c-brand);
+}
+
+.ardo-nav-link.active::after {
+  width: calc(100% - 28px);
+}
+
+.ardo-header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.ardo-social-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  color: var(--ardo-c-text-light);
+  border-radius: var(--ardo-radius);
+  transition: all var(--ardo-transition-fast);
+}
+
+.ardo-social-link:hover {
+  color: var(--ardo-c-text);
+  background: var(--ardo-c-bg-soft);
+}
+
+/* Mobile menu */
+.ardo-mobile-menu-button {
+  display: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: var(--ardo-radius-sm);
+}
+
+.ardo-mobile-menu-button:hover {
+  background: var(--ardo-c-bg-soft);
+}
+
+.ardo-hamburger {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.ardo-hamburger span {
+  display: block;
+  width: 20px;
+  height: 2px;
+  background: var(--ardo-c-text);
+  border-radius: 1px;
+  transition: all var(--ardo-transition-fast);
+}
+
+@media (max-width: 768px) {
+  .ardo-mobile-menu-button {
+    display: block;
+  }
+
+  .ardo-nav {
+    display: none;
+  }
+}
+
+/* ========================================
+   Sidebar - Clean with subtle interactions
+   ======================================== */
+.ardo-sidebar {
+  position: fixed;
+  top: var(--ardo-header-height);
+  left: 0;
+  width: var(--ardo-sidebar-width);
+  height: calc(100vh - var(--ardo-header-height));
+  padding: 24px 20px;
+  overflow-y: auto;
+  border-right: 1px solid var(--ardo-c-border);
+  background: var(--ardo-sidebar-bg);
+}
+
+.ardo-sidebar-list {
+  list-style: none;
+}
+
+.ardo-sidebar-list-0 > .ardo-sidebar-item {
+  margin-bottom: 20px;
+}
+
+.ardo-sidebar-list-1 {
+  margin-left: 12px;
+  margin-top: 6px;
+  padding-left: 12px;
+  border-left: 1px solid var(--ardo-c-border-light);
+}
+
+.ardo-sidebar-item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ardo-sidebar-link,
+.ardo-sidebar-text {
+  display: block;
+  padding: 6px 10px;
+  margin: 2px 0;
+  color: var(--ardo-c-text-light);
+  text-decoration: none;
+  font-size: 14px;
+  border-radius: var(--ardo-radius-sm);
+  transition: all var(--ardo-transition-fast);
+}
+
+.ardo-sidebar-link:hover {
+  color: var(--ardo-c-text);
+  background: var(--ardo-c-bg-mute);
+}
+
+.ardo-sidebar-link.active {
+  color: var(--ardo-c-brand);
+  background: var(--ardo-c-brand-subtle);
+  font-weight: 500;
+}
+
+.ardo-sidebar-text {
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ardo-c-text-lighter);
+  padding: 6px 10px;
+}
+
+.ardo-sidebar-text:hover {
+  color: var(--ardo-c-text);
+}
+
+.ardo-sidebar-collapse {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 6px;
+  color: var(--ardo-c-text-lighter);
+  border-radius: var(--ardo-radius-sm);
+  transition: all var(--ardo-transition-fast);
+}
+
+.ardo-sidebar-collapse:hover {
+  background: var(--ardo-c-bg-mute);
+  color: var(--ardo-c-text);
+}
+
+.ardo-sidebar-collapse.collapsed {
+  transform: rotate(-90deg);
+}
+
+@media (max-width: 1024px) {
+  .ardo-header-container {
+    padding: 0 20px; /* Symmetric padding on mobile (no sidebar to align with) */
+  }
+
+  .ardo-sidebar {
+    display: none;
+  }
+
+  .ardo-main {
+    margin-left: 0;
+  }
+}
+
+/* ========================================
+   TOC - Table of Contents
+   ======================================== */
+.ardo-toc {
+  position: fixed;
+  top: var(--ardo-header-height);
+  right: 0;
+  width: var(--ardo-toc-width);
+  height: calc(100vh - var(--ardo-header-height));
+  padding: 24px 20px;
+  overflow-y: auto;
+}
+
+.ardo-toc-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ardo-c-text-lighter);
+  margin-bottom: 16px;
+}
+
+.ardo-toc-list {
+  list-style: none;
+}
+
+.ardo-toc-link {
+  display: block;
+  padding: 5px 0;
+  padding-left: 14px;
+  color: var(--ardo-c-text-lighter);
+  text-decoration: none;
+  font-size: 13px;
+  border-left: 2px solid transparent;
+  margin-left: -14px;
+  transition: all var(--ardo-transition-fast);
+}
+
+.ardo-toc-link:hover {
+  color: var(--ardo-c-text);
+  border-left-color: var(--ardo-c-border);
+}
+
+.ardo-toc-link.active {
+  color: var(--ardo-c-brand);
+  border-left-color: var(--ardo-c-brand);
+}
+
+.ardo-toc-link-3 {
+  padding-left: 26px;
+}
+
+.ardo-toc-link-4 {
+  padding-left: 38px;
+}
+
+@media (max-width: 1280px) {
+  .ardo-toc {
+    display: none;
+  }
+}
+
+/* ========================================
+   Content Area
+   ======================================== */
+.ardo-doc-page {
+  display: flex;
+  max-width: calc(var(--ardo-content-max-width) + var(--ardo-toc-width));
+  margin: 0 auto;
+  padding-left: var(--ardo-sidebar-width);
+}
+
+.ardo-content-container {
+  flex: 1;
+  max-width: var(--ardo-content-max-width);
+  padding: 0 24px;
+  padding-right: calc(var(--ardo-toc-width) + 24px);
+}
+
+@media (max-width: 1280px) {
+  .ardo-content-container {
+    padding-right: 24px;
+  }
+}
+
+.ardo-content-header {
+  margin-bottom: 40px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid var(--ardo-c-border);
+}
+
+.ardo-content-title {
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  margin-bottom: 12px;
+}
+
+.ardo-content-description {
+  font-size: 18px;
+  color: var(--ardo-c-text-light);
+  line-height: 1.6;
+}
+
+.ardo-content-body {
+  line-height: 1.75;
+}
+
+/* ========================================
+   Typography in Content
+   ======================================== */
+.ardo-content h1,
+.ardo-content h2,
+.ardo-content h3,
+.ardo-content h4,
+.ardo-content h5,
+.ardo-content h6 {
+  font-weight: 600;
+  line-height: 1.3;
+  margin-top: 40px;
+  margin-bottom: 16px;
+  letter-spacing: -0.01em;
+}
+
+.ardo-content h1 {
+  font-size: 32px;
+}
+.ardo-content h2 {
+  font-size: 24px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--ardo-c-border);
+}
+.ardo-content h3 {
+  font-size: 20px;
+}
+.ardo-content h4 {
+  font-size: 17px;
+}
+
+.ardo-content p {
+  margin-bottom: 16px;
+  max-width: 70ch;
+}
+
+.ardo-content a {
+  color: var(--ardo-c-brand);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: border-color var(--ardo-transition-fast);
+}
+
+.ardo-content a:hover {
+  border-bottom-color: var(--ardo-c-brand);
+}
+
+.ardo-content ul,
+.ardo-content ol {
+  margin-bottom: 16px;
+  padding-left: 24px;
+  max-width: 70ch;
+}
+
+.ardo-content li {
+  margin-bottom: 8px;
+}
+
+.ardo-content li::marker {
+  color: var(--ardo-c-text-lighter);
+}
+
+.ardo-content blockquote {
+  margin: 20px 0;
+  padding: 16px 20px;
+  border-left: 3px solid var(--ardo-c-brand);
+  background: var(--ardo-c-bg-soft);
+  border-radius: 0 var(--ardo-radius) var(--ardo-radius) 0;
+  font-style: italic;
+  color: var(--ardo-c-text-light);
+}
+
+.ardo-content hr {
+  margin: 40px 0;
+  border: none;
+  border-top: 1px solid var(--ardo-c-border);
+}
+
+.ardo-content table {
+  width: 100%;
+  margin: 20px 0;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.ardo-content th,
+.ardo-content td {
+  padding: 12px 16px;
+  border: 1px solid var(--ardo-c-border);
+  text-align: left;
+}
+
+.ardo-content th {
+  background: var(--ardo-c-bg-soft);
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.ardo-content img {
+  max-width: 100%;
+  border-radius: var(--ardo-radius);
+  border: 1px solid var(--ardo-c-border);
+}
+
+/* Inline code */
+.ardo-content code {
+  font-family: var(--ardo-font-mono);
+  font-size: 0.875em;
+  padding: 3px 6px;
+  background: var(--ardo-c-bg-mute);
+  border-radius: var(--ardo-radius-sm);
+  border: 1px solid var(--ardo-c-border-light);
+}
+
+.ardo-content pre code {
+  padding: 0;
+  background: none;
+  border: none;
+}
+
+/* ========================================
+   Code Blocks - Warm & Distinct
+   ======================================== */
+.ardo-code-block {
+  margin: 20px 0;
+  margin-left: -16px;
+  border-radius: var(--ardo-radius);
+  overflow: hidden;
+  background: var(--ardo-code-bg);
+  border: 1px solid var(--ardo-code-border);
+  box-shadow: var(--ardo-code-shadow);
+}
+
+/* Shiki syntax highlighting - dual theme support */
+.shiki {
+  background: transparent !important;
+}
+
+.shiki span {
+  color: var(--shiki-light);
+}
+
+.dark .shiki span {
+  color: var(--shiki-dark);
+}
+
+.ardo-code-title {
+  padding: 10px 16px;
+  background: var(--ardo-code-border);
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--ardo-font-mono);
+  color: var(--ardo-c-text-light);
+  border-bottom: 1px solid var(--ardo-code-border);
+}
+
+.ardo-code-wrapper {
+  position: relative;
+}
+
+.ardo-code-wrapper pre {
+  margin: 0;
+  padding: 16px;
+  overflow-x: auto;
+  font-family: var(--ardo-font-mono);
+  font-size: 14px;
+  line-height: 1.65;
+  color: var(--ardo-c-text);
+  background: transparent !important;
+}
+
+.dark .ardo-code-wrapper pre {
+  color: #e2e8f0;
+}
+
+.ardo-code-line {
+  display: block;
+}
+
+.ardo-code-line.highlighted {
+  background: rgba(99, 179, 237, 0.12);
+  margin: 0 -16px;
+  padding: 0 16px;
+  border-left: 3px solid var(--ardo-c-brand);
+}
+
+.ardo-line-number {
+  display: inline-block;
+  width: 32px;
+  color: var(--ardo-c-text-lighter);
+  text-align: right;
+  margin-right: 16px;
+  user-select: none;
+}
+
+.dark .ardo-line-number {
+  color: #475569;
+}
+
+.ardo-copy-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: var(--ardo-c-bg);
+  border: 1px solid var(--ardo-c-border);
+  border-radius: var(--ardo-radius-sm);
+  cursor: pointer;
+  font-size: 12px;
+  font-family: var(--ardo-font-family);
+  color: var(--ardo-c-text-light);
+  opacity: 0;
+  transition: all var(--ardo-transition-fast);
+}
+
+.ardo-code-wrapper:hover .ardo-copy-button {
+  opacity: 1;
+}
+
+.ardo-copy-button:hover {
+  background: var(--ardo-c-bg-soft);
+  border-color: var(--ardo-c-brand);
+  color: var(--ardo-c-brand);
+}
+
+/* Code groups */
+.ardo-code-group {
+  margin: 20px 0;
+  margin-left: -16px;
+  border-radius: var(--ardo-radius);
+  overflow: hidden;
+  background: var(--ardo-code-bg);
+  border: 1px solid var(--ardo-code-border);
+  box-shadow: var(--ardo-code-shadow);
+}
+
+.ardo-code-group-tabs {
+  display: flex;
+  background: var(--ardo-code-border);
+  border-bottom: 1px solid var(--ardo-code-border);
+}
+
+.ardo-code-group-tab {
+  padding: 10px 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 13px;
+  font-family: var(--ardo-font-mono);
+  color: var(--ardo-c-text-light);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: all var(--ardo-transition-fast);
+}
+
+.ardo-code-group-tab:hover {
+  color: var(--ardo-c-text);
+}
+
+.ardo-code-group-tab.active {
+  color: var(--ardo-c-brand);
+  border-bottom-color: var(--ardo-c-brand);
+  background: var(--ardo-code-bg);
+}
+
+.ardo-code-group-panel {
+  display: none;
+}
+
+.ardo-code-group-panel.active {
+  display: block;
+}
+
+/* ========================================
+   Containers - Clear Visual Distinction
+   ======================================== */
+.ardo-container {
+  margin: 20px 0;
+  padding: 16px 20px;
+  border-radius: var(--ardo-radius);
+  border: 1px solid;
+}
+
+.ardo-container-tip {
+  background: var(--ardo-c-tip-bg);
+  border-color: var(--ardo-c-tip-border);
+}
+
+.ardo-container-warning {
+  background: var(--ardo-c-warning-bg);
+  border-color: var(--ardo-c-warning-border);
+}
+
+.ardo-container-danger {
+  background: var(--ardo-c-danger-bg);
+  border-color: var(--ardo-c-danger-border);
+}
+
+.ardo-container-info {
+  background: var(--ardo-c-info-bg);
+  border-color: var(--ardo-c-info-border);
+}
+
+.ardo-container-note {
+  background: var(--ardo-c-note-bg);
+  border-color: var(--ardo-c-note-border);
+}
+
+.ardo-container-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.ardo-container-tip .ardo-container-title {
+  color: var(--ardo-c-tip);
+}
+.ardo-container-warning .ardo-container-title {
+  color: var(--ardo-c-warning);
+}
+.ardo-container-danger .ardo-container-title {
+  color: var(--ardo-c-danger);
+}
+.ardo-container-info .ardo-container-title {
+  color: var(--ardo-c-info);
+}
+.ardo-container-note .ardo-container-title {
+  color: var(--ardo-c-note);
+}
+
+.ardo-container-content {
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.ardo-container-content p:last-child {
+  margin-bottom: 0;
+}
+
+/* Details */
+.ardo-details {
+  margin: 20px 0;
+  border: 1px solid var(--ardo-c-border);
+  border-radius: var(--ardo-radius);
+}
+
+.ardo-details-summary {
+  padding: 14px 16px;
+  cursor: pointer;
+  font-weight: 500;
+  background: var(--ardo-c-bg-soft);
+  transition: background var(--ardo-transition-fast);
+}
+
+.ardo-details-summary:hover {
+  background: var(--ardo-c-bg-mute);
+}
+
+.ardo-details[open] .ardo-details-summary {
+  border-bottom: 1px solid var(--ardo-c-border);
+}
+
+.ardo-details > *:not(summary) {
+  padding: 16px;
+}
+
+/* ========================================
+   Footer Area
+   ======================================== */
+.ardo-content-footer {
+  margin-top: 60px;
+  padding-top: 24px;
+  border-top: 1px solid var(--ardo-c-border);
+}
+
+.ardo-content-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  font-size: 14px;
+  color: var(--ardo-c-text-lighter);
+}
+
+.ardo-edit-link {
+  color: var(--ardo-c-brand);
+  text-decoration: none;
+  font-weight: 500;
+  transition: opacity var(--ardo-transition-fast);
+}
+
+.ardo-edit-link:hover {
+  opacity: 0.8;
+}
+
+.ardo-prev-next {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.ardo-prev-link,
+.ardo-next-link {
+  display: flex;
+  flex-direction: column;
+  padding: 16px 20px;
+  border: 1px solid var(--ardo-c-border);
+  border-radius: var(--ardo-radius);
+  text-decoration: none;
+  transition: all var(--ardo-transition-fast);
+}
+
+.ardo-prev-link:hover,
+.ardo-next-link:hover {
+  border-color: var(--ardo-c-brand);
+  background: var(--ardo-c-brand-subtle);
+}
+
+.ardo-next-link {
+  text-align: right;
+}
+
+.ardo-prev-next-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--ardo-c-text-lighter);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 4px;
+}
+
+.ardo-prev-next-title {
+  font-weight: 600;
+  color: var(--ardo-c-brand);
+}
+
+/* Page footer */
+.ardo-footer {
+  padding: 32px 24px;
+  text-align: center;
+  border-top: 1px solid var(--ardo-c-border);
+  background: var(--ardo-c-bg-soft);
+}
+
+.ardo-footer-message,
+.ardo-footer-copyright {
+  font-size: 14px;
+  color: var(--ardo-c-text-lighter);
+}
+
+/* ========================================
+   Search
+   ======================================== */
+.ardo-search-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  background: var(--ardo-c-bg-soft);
+  border: 1px solid var(--ardo-c-border);
+  border-radius: var(--ardo-radius);
+  cursor: pointer;
+  color: var(--ardo-c-text-lighter);
+  font-size: 14px;
+  transition: all var(--ardo-transition-fast);
+}
+
+.ardo-search-button:hover {
+  border-color: var(--ardo-c-brand);
+  color: var(--ardo-c-text-light);
+}
+
+.ardo-search-button-text {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .ardo-search-button-text {
+    display: inline;
+  }
+}
+
+.ardo-search-kbd {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .ardo-search-kbd {
+    display: flex;
+    gap: 3px;
+  }
+}
+
+.ardo-search-kbd kbd {
+  padding: 2px 6px;
+  background: var(--ardo-c-bg);
+  border: 1px solid var(--ardo-c-border);
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: var(--ardo-font-family);
+}
+
+.ardo-search-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 100px;
+  z-index: 200;
+}
+
+.ardo-search-dialog {
+  width: 100%;
+  max-width: 560px;
+  background: var(--ardo-c-bg);
+  border-radius: var(--ardo-radius-lg);
+  border: 1px solid var(--ardo-c-border);
+  overflow: hidden;
+}
+
+.ardo-search-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--ardo-c-border);
+}
+
+.ardo-search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 16px;
+  background: none;
+  color: var(--ardo-c-text);
+}
+
+.ardo-search-clear {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 18px;
+  color: var(--ardo-c-text-lighter);
+  padding: 4px;
+  border-radius: var(--ardo-radius-sm);
+  transition: all var(--ardo-transition-fast);
+}
+
+.ardo-search-clear:hover {
+  background: var(--ardo-c-bg-soft);
+  color: var(--ardo-c-text);
+}
+
+.ardo-search-results {
+  list-style: none;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.ardo-search-result {
+  display: block;
+  padding: 12px 20px;
+  text-decoration: none;
+  color: var(--ardo-c-text);
+  border-bottom: 1px solid var(--ardo-c-border-light);
+  transition: background var(--ardo-transition-fast);
+}
+
+.ardo-search-result:last-child {
+  border-bottom: none;
+}
+
+.ardo-search-result:hover,
+.ardo-search-result.selected {
+  background: var(--ardo-c-bg-soft);
+}
+
+.ardo-search-result-title {
+  display: block;
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+
+.ardo-search-result-section {
+  display: block;
+  font-size: 13px;
+  color: var(--ardo-c-text-lighter);
+}
+
+.ardo-search-no-results {
+  padding: 32px 20px;
+  text-align: center;
+  color: var(--ardo-c-text-lighter);
+}
+
+.ardo-search-footer {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  padding: 12px 20px;
+  background: var(--ardo-c-bg-soft);
+  border-top: 1px solid var(--ardo-c-border);
+  font-size: 12px;
+  color: var(--ardo-c-text-lighter);
+}
+
+.ardo-search-footer kbd {
+  padding: 2px 6px;
+  background: var(--ardo-c-bg);
+  border: 1px solid var(--ardo-c-border);
+  border-radius: 4px;
+  margin-right: 4px;
+}
+
+/* Theme toggle */
+.ardo-theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--ardo-c-text-light);
+  border-radius: var(--ardo-radius);
+  transition: all var(--ardo-transition-fast);
+}
+
+.ardo-theme-toggle:hover {
+  background: var(--ardo-c-bg-soft);
+  color: var(--ardo-c-text);
+}
+
+/* Tabs */
+.ardo-tabs {
+  margin: 20px 0;
+}
+
+.ardo-tab-list {
+  display: flex;
+  border-bottom: 1px solid var(--ardo-c-border);
+  gap: 4px;
+}
+
+.ardo-tab {
+  padding: 10px 18px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--ardo-c-text-light);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: all var(--ardo-transition-fast);
+}
+
+.ardo-tab:hover {
+  color: var(--ardo-c-text);
+}
+
+.ardo-tab.active {
+  color: var(--ardo-c-brand);
+  border-bottom-color: var(--ardo-c-brand);
+}
+
+.ardo-tab-panel {
+  padding: 20px 0;
+}
+
+/* ========================================
+   Hero Section - Home Page
+   ======================================== */
+.ardo-home {
+  min-height: 100vh;
+}
+
+.ardo-home-main {
+  padding-top: var(--ardo-header-height);
+}
+
+.ardo-hero {
+  padding: 100px 24px 80px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Subtle gradient background */
+.ardo-hero::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:
+    radial-gradient(
+      ellipse 80% 50% at 50% -20%,
+      oklch(var(--ardo-brand-l) var(--ardo-brand-c) var(--ardo-brand-h) / 0.08) 0%,
+      transparent 70%
+    ),
+    linear-gradient(180deg, var(--ardo-c-bg) 0%, var(--ardo-c-bg-soft) 100%);
+  pointer-events: none;
+}
+
+.dark .ardo-hero::before {
+  background:
+    radial-gradient(
+      ellipse 80% 50% at 50% -20%,
+      oklch(var(--ardo-brand-l) var(--ardo-brand-c) var(--ardo-brand-h) / 0.15) 0%,
+      transparent 70%
+    ),
+    linear-gradient(180deg, var(--ardo-c-bg) 0%, var(--ardo-c-bg-soft) 100%);
+}
+
+.ardo-hero-container {
+  max-width: 800px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+.ardo-hero-image img {
+  max-width: 180px;
+  margin-bottom: 40px;
+  filter: drop-shadow(
+    0 4px 20px oklch(var(--ardo-brand-l) var(--ardo-brand-c) var(--ardo-brand-h) / 0.15)
+  );
+}
+
+.ardo-hero-name {
+  font-size: 64px;
+  font-weight: 800;
+  background: var(--ardo-c-brand-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+}
+
+.ardo-hero-text {
+  font-size: 48px;
+  font-weight: 700;
+  margin-top: 8px;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+}
+
+.ardo-hero-tagline {
+  font-size: 18px;
+  color: var(--ardo-c-text-light);
+  margin-top: 24px;
+  max-width: 560px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.65;
+}
+
+.ardo-hero-actions {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 40px;
+  flex-wrap: wrap;
+}
+
+.ardo-hero-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 28px;
+  font-size: 15px;
+  font-weight: 600;
+  text-decoration: none;
+  border-radius: var(--ardo-radius);
+  transition: all var(--ardo-transition);
+}
+
+.ardo-hero-action-brand {
+  background: var(--ardo-c-brand);
+  color: white;
+}
+
+.ardo-hero-action-brand:hover {
+  background: var(--ardo-c-brand-dark);
+  transform: translateY(-1px);
+}
+
+.ardo-hero-action-alt {
+  background: var(--ardo-c-bg);
+  color: var(--ardo-c-text);
+  border: 1px solid var(--ardo-c-border);
+}
+
+.ardo-hero-action-alt:hover {
+  border-color: var(--ardo-c-brand);
+  color: var(--ardo-c-brand);
+}
+
+/* ========================================
+   Features Section
+   ======================================== */
+.ardo-features {
+  padding: 80px 24px;
+  background: var(--ardo-c-bg-soft);
+  border-top: 1px solid var(--ardo-c-border);
+}
+
+.ardo-features-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 20px;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.ardo-feature {
+  padding: 28px;
+  background: var(--ardo-c-bg);
+  border-radius: var(--ardo-radius-lg);
+  border: 1px solid var(--ardo-c-border);
+  transition: all var(--ardo-transition);
+}
+
+.ardo-feature:hover {
+  border-color: var(--ardo-c-brand);
+  transform: translateY(-2px);
+}
+
+.ardo-feature-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  margin-bottom: 16px;
+  background: var(--ardo-c-brand-subtle);
+  border-radius: var(--ardo-radius);
+  color: var(--ardo-c-brand);
+}
+
+.ardo-feature-title {
+  font-size: 17px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  letter-spacing: -0.01em;
+}
+
+.ardo-feature-details {
+  font-size: 14px;
+  color: var(--ardo-c-text-light);
+  line-height: 1.6;
+  margin-bottom: 12px;
+}
+
+.ardo-feature-link {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--ardo-c-brand);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: gap var(--ardo-transition-fast);
+}
+
+.ardo-feature-link:hover {
+  gap: 8px;
+}
+
+.ardo-feature-link::after {
+  content: "\2192";
+}
+
+/* Features title and subtitle */
+.ardo-features-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.ardo-features-title {
+  font-size: 36px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-bottom: 12px;
+}
+
+.ardo-features-subtitle {
+  font-size: 18px;
+  color: var(--ardo-c-text-light);
+  max-width: 560px;
+  margin: 0 auto;
+}
+
+/* ========================================
+   Home Page Sections
+   ======================================== */
+.ardo-home-section {
+  padding: 80px 24px;
+}
+
+.ardo-home-section-alt {
+  background: var(--ardo-c-bg-soft);
+}
+
+.ardo-home-section-container {
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.ardo-home-section-title {
+  font-size: 36px;
+  font-weight: 700;
+  text-align: center;
+  letter-spacing: -0.02em;
+  margin-bottom: 12px;
+}
+
+.ardo-home-section-subtitle {
+  font-size: 18px;
+  color: var(--ardo-c-text-light);
+  text-align: center;
+  max-width: 560px;
+  margin: 0 auto 48px;
+}
+
+/* ========================================
+   Terminal Section
+   ======================================== */
+.ardo-home-terminal {
+  max-width: 600px;
+  margin: 0 auto;
+  border-radius: var(--ardo-radius-lg);
+  overflow: hidden;
+  background: #1e1e1e;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+}
+
+.dark .ardo-home-terminal {
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
+}
+
+.ardo-home-terminal-header {
+  display: flex;
+  gap: 8px;
+  padding: 14px 16px;
+  background: #323232;
+}
+
+.ardo-home-terminal-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #ff5f56;
+}
+
+.ardo-home-terminal-dot:nth-child(2) {
+  background: #ffbd2e;
+}
+
+.ardo-home-terminal-dot:nth-child(3) {
+  background: #27ca40;
+}
+
+.ardo-home-terminal-body {
+  padding: 20px 24px;
+  font-family: var(--ardo-font-mono);
+  font-size: 14px;
+  line-height: 1.8;
+  color: #e0e0e0;
+}
+
+.ardo-home-terminal-prompt {
+  color: #27ca40;
+  margin-right: 8px;
+}
+
+.ardo-home-terminal-success {
+  color: #27ca40;
+}
+
+.ardo-home-terminal-link {
+  color: #61afef;
+}
+
+/* ========================================
+   Code Example Section
+   ======================================== */
+.ardo-home-code-example {
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+.ardo-home-code-block {
+  border-radius: var(--ardo-radius-lg);
+  overflow: hidden;
+  background: var(--ardo-code-bg);
+  border: 1px solid var(--ardo-code-border);
+  box-shadow: var(--ardo-code-shadow);
+}
+
+.ardo-home-code-header {
+  padding: 12px 16px;
+  background: var(--ardo-code-border);
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--ardo-font-mono);
+  color: var(--ardo-c-text-light);
+  border-bottom: 1px solid var(--ardo-code-border);
+}
+
+.ardo-home-code-content {
+  padding: 20px 24px;
+  margin: 0;
+  overflow-x: auto;
+  font-family: var(--ardo-font-mono);
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--ardo-c-text);
+}
+
+.dark .ardo-home-code-content {
+  color: #e2e8f0;
+}
+
+/* ========================================
+   Comparison Table Section
+   ======================================== */
+.ardo-home-comparison {
+  overflow-x: auto;
+}
+
+.ardo-home-comparison-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  min-width: 600px;
+}
+
+.ardo-home-comparison-table th,
+.ardo-home-comparison-table td {
+  padding: 14px 18px;
+  text-align: center;
+  border: 1px solid var(--ardo-c-border);
+}
+
+.ardo-home-comparison-table th {
+  background: var(--ardo-c-bg-soft);
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.ardo-home-comparison-table td:first-child {
+  text-align: left;
+  font-weight: 500;
+  background: var(--ardo-c-bg-soft);
+}
+
+.ardo-home-comparison-highlight {
+  background: var(--ardo-c-brand-subtle) !important;
+}
+
+.ardo-home-comparison-table th.ardo-home-comparison-highlight {
+  color: var(--ardo-c-brand);
+}
+
+.ardo-home-check {
+  color: var(--ardo-c-tip);
+}
+
+.ardo-home-x {
+  color: var(--ardo-c-text-lighter);
+}
+
+.ardo-home-comparison-cta {
+  text-align: center;
+  margin-top: 24px;
+}
+
+.ardo-home-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--ardo-c-brand);
+  font-weight: 500;
+  text-decoration: none;
+  transition: gap var(--ardo-transition-fast);
+}
+
+.ardo-home-link:hover {
+  gap: 10px;
+}
+
+/* ========================================
+   Tech Stack Grid
+   ======================================== */
+.ardo-home-tech-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.ardo-home-tech-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 24px 16px;
+  background: var(--ardo-c-bg);
+  border-radius: var(--ardo-radius-lg);
+  border: 1px solid var(--ardo-c-border);
+  transition: all var(--ardo-transition);
+}
+
+.ardo-home-tech-item:hover {
+  border-color: var(--ardo-c-brand);
+  transform: translateY(-2px);
+}
+
+.ardo-home-tech-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  background: var(--ardo-c-brand-subtle);
+  border-radius: var(--ardo-radius);
+  color: var(--ardo-c-brand);
+}
+
+.ardo-home-tech-item span {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+/* ========================================
+   CTA Section
+   ======================================== */
+.ardo-home-cta-section {
+  background: linear-gradient(180deg, var(--ardo-c-bg) 0%, var(--ardo-c-brand-subtle) 100%);
+}
+
+.dark .ardo-home-cta-section {
+  background: linear-gradient(
+    180deg,
+    var(--ardo-c-bg) 0%,
+    oklch(0.18 0.04 var(--ardo-brand-h)) 100%
+  );
+}
+
+.ardo-home-cta-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.ardo-home-cta-primary,
+.ardo-home-cta-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 16px 32px;
+  font-size: 16px;
+  font-weight: 600;
+  text-decoration: none;
+  border-radius: var(--ardo-radius);
+  transition: all var(--ardo-transition);
+}
+
+.ardo-home-cta-primary {
+  background: var(--ardo-c-brand);
+  color: white;
+}
+
+.ardo-home-cta-primary:hover {
+  background: var(--ardo-c-brand-dark);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px oklch(var(--ardo-brand-l) var(--ardo-brand-c) var(--ardo-brand-h) / 0.3);
+}
+
+.ardo-home-cta-secondary {
+  background: var(--ardo-c-bg);
+  color: var(--ardo-c-text);
+  border: 1px solid var(--ardo-c-border);
+}
+
+.ardo-home-cta-secondary:hover {
+  border-color: var(--ardo-c-brand);
+  color: var(--ardo-c-brand);
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+  .ardo-doc-page {
+    padding-left: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .ardo-hero {
+    padding: 60px 20px;
+  }
+
+  .ardo-hero-name {
+    font-size: 40px;
+  }
+
+  .ardo-hero-text {
+    font-size: 28px;
+  }
+
+  .ardo-hero-tagline {
+    font-size: 16px;
+  }
+
+  .ardo-features {
+    padding: 48px 16px;
+  }
+
+  .ardo-home-section {
+    padding: 48px 16px;
+  }
+
+  .ardo-home-section-title {
+    font-size: 28px;
+  }
+
+  .ardo-home-section-subtitle {
+    font-size: 16px;
+    margin-bottom: 32px;
+  }
+
+  .ardo-features-title {
+    font-size: 28px;
+  }
+
+  .ardo-features-subtitle {
+    font-size: 16px;
+  }
+
+  .ardo-home-terminal-body {
+    font-size: 12px;
+    padding: 16px;
+  }
+
+  .ardo-home-tech-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .ardo-home-cta-primary,
+  .ardo-home-cta-secondary {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+/* ================================
+   API Documentation Styles
+   ================================ */
+
+/* API Item */
+.ardo-api-item {
+  margin: 28px 0;
+  padding-bottom: 28px;
+  border-bottom: 1px solid var(--ardo-c-border);
+}
+
+.ardo-api-item:last-child {
+  border-bottom: none;
+}
+
+.ardo-api-item-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.ardo-api-item-name {
+  font-family: var(--ardo-font-mono);
+  font-weight: 600;
+}
+
+.ardo-api-anchor {
+  color: var(--ardo-c-text-lighter);
+  text-decoration: none;
+  opacity: 0;
+  transition: opacity var(--ardo-transition-fast);
+}
+
+.ardo-api-item-title:hover .ardo-api-anchor {
+  opacity: 1;
+}
+
+.ardo-api-item-description {
+  color: var(--ardo-c-text-light);
+  margin-bottom: 16px;
+  line-height: 1.6;
+}
+
+/* API Badges */
+.ardo-api-badge {
+  display: inline-flex;
+  padding: 3px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: var(--ardo-radius-sm);
+  border: 1px solid;
+}
+
+.ardo-api-badge-class {
+  background: #eff6ff;
+  border-color: #bfdbfe;
+  color: #1e40af;
+}
+
+.dark .ardo-api-badge-class {
+  background: #1e3a8a;
+  border-color: #3b82f6;
+  color: #93c5fd;
+}
+
+.ardo-api-badge-interface {
+  background: #ecfdf5;
+  border-color: #a7f3d0;
+  color: #065f46;
+}
+
+.dark .ardo-api-badge-interface {
+  background: #064e3b;
+  border-color: #10b981;
+  color: #6ee7b7;
+}
+
+.ardo-api-badge-type {
+  background: #fffbeb;
+  border-color: #fde68a;
+  color: #92400e;
+}
+
+.dark .ardo-api-badge-type {
+  background: #78350f;
+  border-color: #f59e0b;
+  color: #fcd34d;
+}
+
+.ardo-api-badge-enum {
+  background: #f5f3ff;
+  border-color: #ddd6fe;
+  color: #5b21b6;
+}
+
+.dark .ardo-api-badge-enum {
+  background: #4c1d95;
+  border-color: #8b5cf6;
+  color: #c4b5fd;
+}
+
+.ardo-api-badge-function {
+  background: #fdf2f8;
+  border-color: #fbcfe8;
+  color: #9d174d;
+}
+
+.dark .ardo-api-badge-function {
+  background: #831843;
+  border-color: #ec4899;
+  color: #f9a8d4;
+}
+
+.ardo-api-badge-method {
+  background: #f0f9ff;
+  border-color: #bae6fd;
+  color: #0369a1;
+}
+
+.dark .ardo-api-badge-method {
+  background: #0c4a6e;
+  border-color: #0ea5e9;
+  color: #7dd3fc;
+}
+
+.ardo-api-badge-property {
+  background: #faf5ff;
+  border-color: #e9d5ff;
+  color: #7c3aed;
+}
+
+.dark .ardo-api-badge-property {
+  background: #581c87;
+  border-color: #a855f7;
+  color: #c4b5fd;
+}
+
+/* API Signature */
+.ardo-api-signature {
+  margin: 16px 0;
+}
+
+.ardo-api-signature-code {
+  padding: 16px;
+  background: var(--ardo-c-bg-soft);
+  border: 1px solid var(--ardo-c-border);
+  border-radius: var(--ardo-radius);
+  overflow-x: auto;
+  font-family: var(--ardo-font-mono);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.ardo-api-keyword {
+  color: #cf222e;
+}
+
+.dark .ardo-api-keyword {
+  color: #ff7b72;
+}
+
+.ardo-api-function-name {
+  color: #8250df;
+}
+
+.dark .ardo-api-function-name {
+  color: #d2a8ff;
+}
+
+.ardo-api-type-params {
+  color: #0550ae;
+}
+
+.dark .ardo-api-type-params {
+  color: #79c0ff;
+}
+
+.ardo-api-params {
+  color: var(--ardo-c-text);
+}
+
+.ardo-api-return-type {
+  color: #0550ae;
+}
+
+.dark .ardo-api-return-type {
+  color: #79c0ff;
+}
+
+/* API Section Titles */
+.ardo-api-section-title {
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ardo-c-text-lighter);
+  margin-top: 24px;
+  margin-bottom: 12px;
+}
+
+/* API Tables */
+.ardo-api-table {
+  width: 100%;
+  margin: 12px 0;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.ardo-api-table th,
+.ardo-api-table td {
+  padding: 12px 14px;
+  border: 1px solid var(--ardo-c-border);
+  text-align: left;
+}
+
+.ardo-api-table th {
+  background: var(--ardo-c-bg-soft);
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ardo-c-text-lighter);
+}
+
+.ardo-api-table code {
+  font-size: 13px;
+}
+
+.ardo-api-optional {
+  font-size: 11px;
+  color: var(--ardo-c-text-lighter);
+  margin-left: 6px;
+}
+
+.ardo-api-default {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--ardo-c-text-lighter);
+}
+
+/* API Returns */
+.ardo-api-returns {
+  margin: 16px 0;
+}
+
+.ardo-api-returns code {
+  font-size: 14px;
+}
+
+/* API Examples */
+.ardo-api-examples {
+  margin: 16px 0;
+}
+
+.ardo-api-example {
+  margin: 8px 0;
+  padding: 16px;
+  background: var(--ardo-c-bg-soft);
+  border: 1px solid var(--ardo-c-border);
+  border-radius: var(--ardo-radius);
+  overflow-x: auto;
+  font-family: var(--ardo-font-mono);
+  font-size: 14px;
+}
+
+/* API Source Link */
+.ardo-api-source {
+  margin-top: 16px;
+  font-size: 12px;
+  color: var(--ardo-c-text-lighter);
+}
+
+.ardo-api-source a {
+  color: var(--ardo-c-brand);
+  text-decoration: none;
+}
+
+.ardo-api-source a:hover {
+  text-decoration: underline;
+}
+
+/* API Hierarchy */
+.ardo-api-hierarchy {
+  margin: 16px 0;
+}
+
+.ardo-api-hierarchy-list {
+  list-style: none;
+  padding: 0;
+}
+
+.ardo-api-hierarchy-list li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.ardo-api-hierarchy-label {
+  font-size: 12px;
+  color: var(--ardo-c-text-lighter);
+  min-width: 100px;
+}
+
+/* API Children (nested items) */
+.ardo-api-children {
+  margin-top: 24px;
+  padding-left: 20px;
+  border-left: 2px solid var(--ardo-c-border);
+}
+
+/* API Parameters */
+.ardo-api-parameters {
+  margin: 16px 0;
+}
+
+/* ========================================
+   Focus States - Accessibility
+   ======================================== */
+:focus-visible {
+  outline: 2px solid var(--ardo-c-brand);
+  outline-offset: 2px;
+}
+
+button:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--ardo-c-brand);
+  outline-offset: 2px;
+}