raffel 1.1.81 → 1.1.82-next.c62aff7

package/dist/docs/ui/assets/raffel-docs.css

@@ -21,18 +21,19 @@
       --code-panel-text: #cfd8dc;
       --code-panel-header: #37474f;
 
-      /* Compact documentation type scale. */
-      --font-size-body: 14px;
-      --font-size-small: 13px;
-      --font-size-xs: 11px;
-      --font-size-h1: 30px;
-      --font-size-h2: 24px;
-      --font-size-h3: 19px;
-      --font-size-h4: 16px;
-      --font-size-h5: 14px;
-      --font-size-h6: 13px;
-      --font-size-code: 12px;
-      --line-height-body: 1.6;
+      /* Dense documentation type scale. Component styles inherit these
+         tokens so large references keep more context inside the viewport. */
+      --font-size-body: 12px;
+      --font-size-small: 11px;
+      --font-size-xs: 9px;
+      --font-size-h1: 24px;
+      --font-size-h2: 19px;
+      --font-size-h3: 16px;
+      --font-size-h4: 14px;
+      --font-size-h5: 12px;
+      --font-size-h6: 11px;
+      --font-size-code: 10px;
+      --line-height-body: 1.45;
       --line-height-tight: 1.25;
     }
 
@@ -134,7 +135,7 @@
       background: var(--bg-color);
       color: var(--text-color);
       font-size: var(--font-size-body);
-      line-height: 1.6;
+      line-height: var(--line-height-body);
     }
 
     code,
@@ -149,9 +150,9 @@
       z-index: 50;
       display: flex;
       align-items: center;
-      gap: 24px;
-      min-height: 56px;
-      padding: 0 24px;
+      gap: 20px;
+      min-height: 48px;
+      padding: 0 20px;
       border-bottom: 1px solid var(--border-color);
       background: color-mix(in srgb, var(--bg-color) 92%, transparent);
       backdrop-filter: blur(10px);
@@ -183,7 +184,7 @@
     .top-nav-menu summary {
       color: var(--text-color);
       text-decoration: none;
-      font-size: 14px;
+      font-size: var(--font-size-body);
       font-weight: 500;
       white-space: nowrap;
     }
@@ -230,7 +231,7 @@
       content: '▾';
       margin-left: 6px;
       color: var(--text-muted);
-      font-size: 11px;
+      font-size: 10px;
     }
 
     .top-nav-submenu {
@@ -280,23 +281,23 @@
     .docs-state-pill {
       display: inline-flex;
       align-items: center;
-      gap: 5px;
+      gap: 4px;
       min-width: 0;
-      height: 26px;
-      padding: 0 8px;
+      height: 22px;
+      padding: 0 6px;
       border: 1px solid var(--border-color);
       border-radius: 6px;
       background: color-mix(in srgb, var(--surface-color) 84%, transparent);
       color: var(--text-secondary);
-      font-size: 11px;
+      font-size: var(--font-size-xs);
       font-weight: 600;
       line-height: 1;
       white-space: nowrap;
     }
 
     .docs-state-dot {
-      width: 7px;
-      height: 7px;
+      width: 6px;
+      height: 6px;
       border-radius: 999px;
       background: var(--text-muted);
       flex: 0 0 auto;
@@ -674,8 +675,9 @@
     }
 
     .app-container {
+      --sidebar-width: 280px;
       display: grid;
-      grid-template-columns: 300px 1fr;
+      grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
       min-height: calc(100vh - 300px);
     }
 
@@ -705,21 +707,67 @@
     .sidebar {
       background: var(--sidebar-bg);
       border-right: 1px solid var(--border-color);
-      padding: 24px 0;
-      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      padding: 14px 0 0;
+      overflow: visible;
       position: sticky;
       top: 0;
       height: 100vh;
     }
 
+    .sidebar-resizer {
+      appearance: none;
+      position: absolute;
+      top: 0;
+      right: -5px;
+      z-index: 5;
+      width: 10px;
+      height: 100%;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      cursor: col-resize;
+      touch-action: none;
+    }
+
+    .sidebar-resizer::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 4px;
+      width: 1px;
+      background: transparent;
+      transition: background-color 0.15s, box-shadow 0.15s;
+    }
+
+    .sidebar-resizer:hover::before,
+    .sidebar-resizer:focus-visible::before,
+    html.sidebar-is-resizing .sidebar-resizer::before {
+      background: var(--primary-color);
+      box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 18%, transparent);
+    }
+
+    .sidebar-resizer:focus-visible {
+      outline: 0;
+    }
+
+    html.sidebar-is-resizing,
+    html.sidebar-is-resizing * {
+      cursor: col-resize !important;
+      user-select: none !important;
+    }
+
     .sidebar-hidden {
       display: none;
     }
 
     .sidebar-header {
-      padding: 0 20px 20px;
+      padding: 0 14px 14px;
       border-bottom: 1px solid var(--border-color);
-      margin-bottom: 16px;
+      margin-bottom: 12px;
     }
 
     .sidebar-logo {
@@ -730,7 +778,7 @@
     }
 
     .sidebar-logo img { height: 32px; }
-    .sidebar-logo h1 { font-size: 18px; font-weight: 600; }
+    .sidebar-logo h1 { font-size: 16px; font-weight: 600; }
 
     .sidebar-search {
       position: relative;
@@ -738,10 +786,10 @@
 
     .sidebar-search input {
       width: 100%;
-      padding: 10px 12px 10px 36px;
+      padding: 8px 10px 8px 32px;
       border: 1px solid var(--border-color);
       border-radius: 8px;
-      font-size: 14px;
+      font-size: var(--font-size-small);
       background: var(--bg-color);
       color: var(--text-color);
       outline: none;
@@ -755,24 +803,24 @@
     .sidebar-search::before {
       content: '🔍';
       position: absolute;
-      left: 12px;
+      left: 10px;
       top: 50%;
       transform: translateY(-50%);
-      font-size: 14px;
+      font-size: var(--font-size-small);
     }
 
     .protocol-tabs {
       display: flex;
       flex-wrap: wrap;
-      gap: 6px;
-      padding: 0 20px;
-      margin-bottom: 20px;
+      gap: 5px;
+      padding: 0 14px;
+      margin-bottom: 14px;
     }
 
     .protocol-tab {
-      padding: 6px 12px;
+      padding: 5px 10px;
       border-radius: 20px;
-      font-size: 12px;
+      font-size: 10px;
       font-weight: 500;
       cursor: pointer;
       background: var(--code-bg);
@@ -799,7 +847,7 @@
       height: 18px;
       padding: 0 5px;
       margin-left: 6px;
-      font-size: 10px;
+      font-size: 9px;
       border-radius: 9px;
       background: rgba(0,0,0,0.15);
     }
@@ -810,7 +858,12 @@
 
     /* ========== TAG GROUPS ========== */
     .sidebar-nav {
-      padding: 0 12px;
+      flex: 1;
+      min-height: 0;
+      overflow-x: hidden;
+      overflow-y: auto;
+      padding: 0 10px;
+      scrollbar-gutter: stable;
     }
 
     .tag-group {
@@ -820,11 +873,11 @@
     .tag-group-header {
       display: flex;
       align-items: center;
-      gap: 8px;
-      padding: 10px 12px;
+      gap: 6px;
+      padding: 8px 10px;
       border-radius: 8px;
       cursor: pointer;
-      font-size: 14px;
+      font-size: 12px;
       font-weight: 600;
       color: var(--text-secondary);
       transition: all 0.2s;
@@ -841,7 +894,7 @@
 
     .tag-group-arrow {
       transition: transform 0.2s;
-      font-size: 10px;
+      font-size: 9px;
     }
 
     .tag-group.collapsed .tag-group-arrow {
@@ -850,7 +903,7 @@
 
     .tag-group-count {
       margin-left: auto;
-      font-size: 11px;
+      font-size: 10px;
       color: var(--text-muted);
       font-weight: 400;
     }
@@ -868,8 +921,8 @@
     .nav-item {
       display: flex;
       align-items: center;
-      gap: 10px;
-      padding: 6px 12px 6px 14px;
+      gap: 8px;
+      padding: 4px 10px 4px 12px;
       border-left: 2px solid transparent;
       border-radius: 0;
       text-decoration: none;
@@ -904,9 +957,9 @@
       color: var(--text-muted);
       cursor: pointer;
       font: inherit;
-      font-size: 12px;
+      font-size: 10px;
       line-height: 1.35;
-      padding: 5px 8px;
+      padding: 4px 7px;
       text-align: left;
       border-radius: 5px;
       overflow: hidden;
@@ -939,8 +992,8 @@
     .docs-sidebar-depth-6 { margin-left: 16px; }
 
     .nav-item-intro {
-      margin-bottom: 16px;
-      padding: 10px 12px;
+      margin-bottom: 12px;
+      padding: 8px 10px;
       background: var(--surface-color);
       border: 1px solid var(--border-color);
       font-weight: 500;
@@ -952,15 +1005,15 @@
     }
 
     .nav-item-intro .nav-item-icon {
-      font-size: 16px;
+      font-size: 14px;
     }
 
     .nav-item-intro .nav-item-text {
-      font-size: 14px;
+      font-size: 12px;
     }
 
     .nav-item-method {
-      font-size: 10px;
+      font-size: 9px;
       font-weight: 600;
       padding: 1px 4px;
       border: 1px solid var(--border-color);
@@ -996,8 +1049,17 @@
 
     .nav-item-path {
       font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-      font-size: 13px;
+      font-size: 10px;
       flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .nav-item-text,
+    .docs-sidebar-home {
+      min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -1156,7 +1218,7 @@
       padding-left: 21px;
       transition: color 0.15s, border-color 0.15s;
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 12px;
+      font-size: 11px;
     }
 
     .toc-link:hover {
@@ -1233,7 +1295,7 @@
       border-radius: 6px;
       background: var(--bg-color);
       color: var(--text-color);
-      font-size: 15px;
+      font-size: 13px;
       font-family: inherit;
       outline: none;
     }
@@ -1244,7 +1306,7 @@
 
     .search-modal-close {
       padding: 6px 10px;
-      font-size: 12px;
+      font-size: 11px;
       font-family: 'SF Mono', 'Monaco', monospace;
       color: var(--text-muted);
       background: var(--surface-color);
@@ -1268,7 +1330,7 @@
       padding: 24px 16px;
       color: var(--text-muted);
       text-align: center;
-      font-size: 14px;
+      font-size: 12px;
     }
 
     .search-modal-group {
@@ -1277,7 +1339,7 @@
 
     .search-modal-group-heading {
       padding: 8px 12px 4px;
-      font-size: 11px;
+      font-size: 10px;
       font-weight: 600;
       letter-spacing: 0.06em;
       text-transform: uppercase;
@@ -1308,12 +1370,12 @@
     }
 
     .search-modal-result-title {
-      font-size: 14px;
+      font-size: 12px;
       font-weight: 600;
     }
 
     .search-modal-result-desc {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--text-muted);
       overflow: hidden;
       text-overflow: ellipsis;
@@ -1324,7 +1386,7 @@
 
     /* ========== MAIN CONTENT ========== */
     .main {
-      padding: 40px;
+      padding: 32px;
       overflow-y: auto;
       width: 100%;
     }
@@ -1332,7 +1394,7 @@
     /* ========== BREADCRUMBS ========== */
     .docs-breadcrumb {
       margin: 0 0 16px 0;
-      font-size: 13px;
+      font-size: 12px;
       color: var(--text-muted);
     }
 
@@ -1416,7 +1478,7 @@
     .section { margin-bottom: 48px; }
 
     .section-title {
-      font-size: 28px;
+      font-size: 24px;
       font-weight: 700;
       margin-bottom: 8px;
       color: var(--text-color);
@@ -1429,10 +1491,10 @@
 
     /* ========== INTRODUCTION SECTION ========== */
     .intro-section {
-      padding: 32px 40px;
+      padding: 24px 32px;
       background: var(--surface-color);
       border-bottom: 1px solid var(--border-color);
-      margin: -40px -40px 40px -40px;
+      margin: -32px -32px 32px -32px;
     }
 
     .intro-section .markdown-content {
@@ -1440,7 +1502,7 @@
     }
 
     .intro-section .markdown-content h2 {
-      font-size: 24px;
+      font-size: 21px;
       font-weight: 600;
       margin: 32px 0 16px 0;
       color: var(--text-color);
@@ -1451,7 +1513,7 @@
     }
 
     .intro-section .markdown-content p {
-      font-size: 16px;
+      font-size: 14px;
       line-height: 1.7;
       color: var(--text-color);
       margin-bottom: 16px;
@@ -1463,7 +1525,7 @@
     }
 
     .intro-section .markdown-content li {
-      font-size: 15px;
+      font-size: 13px;
       line-height: 1.6;
       color: var(--text-color);
       margin-bottom: 8px;
@@ -1473,7 +1535,7 @@
       background: var(--code-bg);
       padding: 2px 6px;
       border-radius: 4px;
-      font-size: 14px;
+      font-size: 12px;
       font-family: 'SF Mono', Monaco, Consolas, monospace;
     }
 
@@ -1505,7 +1567,7 @@
       align-items: baseline;
       flex-wrap: wrap;
       gap: 12px;
-      font-size: 32px;
+      font-size: 28px;
       font-weight: 700;
       line-height: 1.2;
       margin: 0;
@@ -1513,7 +1575,7 @@
     }
 
     .docs-overview-version {
-      font-size: 13px;
+      font-size: 12px;
       font-weight: 600;
       letter-spacing: 0.02em;
       padding: 3px 10px;
@@ -1528,7 +1590,7 @@
       flex-wrap: wrap;
       align-items: center;
       gap: 10px;
-      font-size: 14px;
+      font-size: 12px;
       color: var(--text-muted);
       margin: 0 0 24px 0;
     }
@@ -1551,7 +1613,7 @@
     }
 
     .docs-overview-subtitle {
-      font-size: 13px;
+      font-size: 12px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.06em;
@@ -1581,7 +1643,7 @@
 
     .docs-overview-server-url {
       font-family: 'SF Mono', Monaco, Consolas, monospace;
-      font-size: 14px;
+      font-size: 12px;
       color: var(--text-color);
       background: var(--code-bg);
       padding: 4px 10px;
@@ -1590,7 +1652,7 @@
     }
 
     .docs-overview-server-desc {
-      font-size: 14px;
+      font-size: 12px;
       color: var(--text-muted);
     }
 
@@ -1600,7 +1662,7 @@
 
     /* ========== ENDPOINT SECTIONS (Redoc-style) ========== */
     .endpoint-section {
-      padding: 32px 0;
+      padding: 24px 0;
       border-bottom: 1px solid var(--border-color);
     }
 
@@ -1611,23 +1673,23 @@
     .endpoint-header {
       display: flex;
       align-items: flex-start;
-      gap: 16px;
-      margin-bottom: 20px;
+      gap: 12px;
+      margin-bottom: 14px;
     }
 
     .endpoint-method-path {
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: 10px;
       flex-wrap: wrap;
     }
 
     .badge {
       display: inline-flex;
       align-items: center;
-      padding: 6px 12px;
+      padding: 4px 9px;
       border-radius: 4px;
-      font-size: 12px;
+      font-size: 10px;
       font-weight: 700;
       text-transform: uppercase;
       font-family: 'SF Mono', 'Monaco', monospace;
@@ -1642,23 +1704,24 @@
 
     .endpoint-path {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 16px;
+      font-size: 12px;
       font-weight: 500;
       color: var(--text-color);
     }
 
     .endpoint-title {
-      font-size: 24px;
+      font-size: 18px;
       font-weight: 600;
-      margin-bottom: 8px;
+      line-height: 1.3;
+      margin-bottom: 6px;
       color: var(--text-color);
     }
 
     .endpoint-description {
       color: var(--text-muted);
-      font-size: 15px;
-      line-height: 1.7;
-      margin-bottom: 24px;
+      font-size: 12px;
+      line-height: 1.55;
+      margin-bottom: 18px;
     }
 
     /* Markdown content styles */
@@ -1697,7 +1760,7 @@
     }
 
     .markdown-content .md-h2 {
-      font-size: 18px;
+      font-size: 16px;
       font-weight: 600;
       color: var(--text-primary);
       margin: 24px 0 12px 0;
@@ -1706,14 +1769,14 @@
     }
 
     .markdown-content .md-h3 {
-      font-size: 16px;
+      font-size: 14px;
       font-weight: 600;
       color: var(--text-primary);
       margin: 20px 0 10px 0;
     }
 
     .markdown-content .md-h4 {
-      font-size: 14px;
+      font-size: 12px;
       font-weight: 600;
       color: var(--text-secondary);
       margin: 16px 0 8px 0;
@@ -1739,7 +1802,7 @@
       padding: 2px 6px;
       border-radius: 4px;
       font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
-      font-size: 13px;
+      font-size: 12px;
       color: var(--accent);
     }
 
@@ -1776,7 +1839,7 @@
       background: var(--bg-primary);
       color: var(--text-muted);
       padding: 4px 8px;
-      font-size: 11px;
+      font-size: 10px;
       line-height: 16px;
       cursor: pointer;
     }
@@ -1852,7 +1915,7 @@
 
     .markdown-content .md-code-block code {
       font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
-      font-size: 13px;
+      font-size: 12px;
       line-height: 1.6;
       color: var(--text-primary);
       white-space: pre;
@@ -2014,7 +2077,7 @@
       border-radius: 4px;
       cursor: pointer;
       font-family: ui-sans-serif, system-ui, sans-serif;
-      font-size: 14px;
+      font-size: 12px;
       line-height: 1;
       transition: background 0.15s ease, color 0.15s ease;
     }
@@ -2032,7 +2095,7 @@
       text-align: left;
       white-space: pre;
       font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
-      font-size: 13px;
+      font-size: 12px;
       color: var(--text-muted);
     }
 
@@ -2103,7 +2166,7 @@
       border: 1px solid var(--border);
       border-radius: 50%;
       cursor: pointer;
-      font-size: 16px;
+      font-size: 14px;
       line-height: 1;
       z-index: 3;
       transition: background 0.15s ease;
@@ -2166,7 +2229,7 @@
       border-radius: 50%;
       background: rgba(15, 23, 42, 0.75);
       color: #fff;
-      font-size: 24px;
+      font-size: 21px;
       line-height: 1;
       cursor: pointer;
     }
@@ -2180,7 +2243,7 @@
     .markdown-content .md-table {
       border-collapse: collapse;
       margin: 16px 0;
-      font-size: 14px;
+      font-size: 12px;
       border-radius: 6px;
       overflow: hidden;
       border: 1px solid var(--border);
@@ -2202,7 +2265,7 @@
       font-weight: 600;
       background: var(--bg-tertiary);
       color: var(--text-primary);
-      font-size: 12px;
+      font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
     }
@@ -2259,7 +2322,7 @@
       background: transparent;
       color: var(--text-muted);
       padding: 10px 14px;
-      font-size: 13px;
+      font-size: 12px;
       cursor: pointer;
       white-space: nowrap;
     }
@@ -2291,7 +2354,7 @@
     .endpoint-content {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 40px;
+      gap: 32px;
     }
 
     @media (min-width: 1400px) {
@@ -2318,18 +2381,18 @@
       min-width: 0; /* Prevent overflow */
       background: var(--code-panel-bg);
       border-radius: 8px;
-      padding: 20px;
+      padding: 16px;
       color: var(--code-panel-text);
     }
 
     .endpoint-right-header {
-      font-size: 12px;
+      font-size: 10px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       color: #90a4ae;
-      margin-bottom: 16px;
-      padding-bottom: 12px;
+      margin-bottom: 12px;
+      padding-bottom: 7px;
       border-bottom: 1px solid rgba(255,255,255,0.1);
     }
 
@@ -2340,17 +2403,17 @@
     }
 
     .endpoint-subsection {
-      margin-bottom: 28px;
+      margin-bottom: 20px;
     }
 
     .endpoint-subsection-title {
-      font-size: 13px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      margin-bottom: 12px;
-      padding-bottom: 8px;
+      margin-bottom: 8px;
+      padding-bottom: 6px;
       border-bottom: 1px solid var(--border-color);
     }
 
@@ -2361,12 +2424,12 @@
 
     /* ========== REDOC-STYLE PARAMETER LABELS ========== */
     .subsection-label {
-      font-size: 12px;
+      font-size: 10px;
       font-weight: 600;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      margin-bottom: 16px;
+      margin-bottom: 10px;
     }
 
     .content-type {
@@ -2377,7 +2440,7 @@
 
     .auth-value {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 14px;
+      font-size: 12px;
       color: var(--text-color);
       margin-left: 8px;
     }
@@ -2385,8 +2448,8 @@
     /* ========== REDOC-STYLE PARAMETERS ========== */
     .param-row {
       display: flex;
-      padding: 12px;
-      margin-bottom: 12px;
+      padding: 8px 10px;
+      margin-bottom: 8px;
       border: 1px solid var(--border-color);
       border-radius: 6px;
       background: var(--surface-color);
@@ -2425,22 +2488,22 @@
     .param-header {
       display: flex;
       align-items: center;
-      gap: 12px;
-      margin-bottom: 8px;
+      gap: 8px;
+      margin-bottom: 4px;
       flex-wrap: wrap;
     }
 
     .param-name-text {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 14px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--text-color);
     }
 
     .param-required-badge {
-      font-size: 10px;
+      font-size: 9px;
       font-weight: 700;
-      padding: 3px 8px;
+      padding: 2px 6px;
       border-radius: 4px;
       background: #fee2e2;
       color: #991b1b;
@@ -2455,7 +2518,7 @@
 
     .param-type-info {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 12px;
+      font-size: 11px;
       padding: 2px 8px;
       border-radius: 4px;
       background: rgba(99, 102, 241, 0.1);
@@ -2477,7 +2540,7 @@
 
     .param-constraint {
       display: inline-block;
-      font-size: 10px;
+      font-size: 9px;
       padding: 3px 8px;
       border-radius: 4px;
       background: #fef3c7;
@@ -2494,7 +2557,7 @@
     }
 
     .param-default {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--text-muted);
       margin-top: 6px;
     }
@@ -2504,11 +2567,11 @@
       padding: 3px 6px;
       border-radius: 3px;
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 11px;
+      font-size: 10px;
     }
 
     .param-example {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--text-muted);
       margin-top: 6px;
     }
@@ -2518,21 +2581,21 @@
       padding: 3px 6px;
       border-radius: 3px;
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 11px;
+      font-size: 10px;
     }
 
     .param-description {
-      font-size: 13px;
+      font-size: 11px;
       color: var(--text-color);
-      line-height: 1.5;
-      margin-top: 8px;
+      line-height: 1.4;
+      margin-top: 4px;
     }
 
     /* ========== REDOC-STYLE RESPONSES ========== */
     .response-item {
       border: 1px solid var(--border-color);
       border-radius: 6px;
-      margin-bottom: 12px;
+      margin-bottom: 8px;
       overflow: hidden;
       transition: border-color 0.15s, box-shadow 0.15s;
     }
@@ -2544,8 +2607,8 @@
     .response-header {
       display: flex;
       align-items: center;
-      gap: 12px;
-      padding: 14px 16px;
+      gap: 8px;
+      padding: 10px 12px;
       cursor: pointer;
       transition: background 0.15s;
       background: var(--surface-color);
@@ -2556,7 +2619,7 @@
     }
 
     .response-arrow {
-      font-size: 11px;
+      font-size: 10px;
       transition: transform 0.2s;
       color: var(--text-muted);
       width: 16px;
@@ -2568,9 +2631,9 @@
     }
 
     .response-status {
-      font-size: 13px;
+      font-size: 11px;
       font-weight: 700;
-      padding: 4px 10px;
+      padding: 3px 8px;
       border-radius: 4px;
       min-width: 50px;
       text-align: center;
@@ -2609,13 +2672,13 @@
     }
 
     .response-desc {
-      font-size: 14px;
+      font-size: 11px;
       color: var(--text-color);
     }
 
     .response-body {
       display: none;
-      padding: 16px;
+      padding: 12px;
       border-top: 1px solid var(--border-color);
       background: var(--code-bg);
     }
@@ -2625,11 +2688,11 @@
     }
 
     .response-schema-label {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      margin-bottom: 12px;
+      margin-bottom: 8px;
     }
 
     .response-schema-label .content-type {
@@ -2637,23 +2700,23 @@
     }
 
     .response-headers-section {
-      margin-bottom: 20px;
-      padding-bottom: 16px;
+      margin-bottom: 14px;
+      padding-bottom: 10px;
       border-bottom: 1px solid var(--border-color);
     }
 
     .response-headers-label {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      margin-bottom: 12px;
+      margin-bottom: 8px;
     }
 
     .response-header-row {
       display: flex;
       align-items: flex-start;
-      padding: 8px 0;
+      padding: 5px 0;
       border-bottom: 1px solid var(--border-color);
     }
 
@@ -2663,11 +2726,11 @@
 
     .response-header-name {
       font-family: 'SF Mono', Monaco, Consolas, monospace;
-      font-size: 13px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--text-color);
-      min-width: 180px;
-      margin-right: 16px;
+      min-width: 150px;
+      margin-right: 12px;
     }
 
     .response-header-info {
@@ -2675,19 +2738,19 @@
     }
 
     .response-header-type {
-      font-size: 12px;
+      font-size: 10px;
       color: var(--primary-color);
       margin-bottom: 4px;
     }
 
     .response-header-desc {
-      font-size: 13px;
+      font-size: 11px;
       color: var(--text-muted);
     }
 
     .response-header-required {
       color: #ef4444;
-      font-size: 11px;
+      font-size: 10px;
       margin-left: 8px;
     }
 
@@ -2718,7 +2781,7 @@
       display: block;
       margin-top: 4px;
       color: var(--text-muted);
-      font-size: 14px;
+      font-size: 12px;
     }
 
     .docs-pagination {
@@ -2755,7 +2818,7 @@
     .docs-pagination-label {
       display: block;
       color: var(--text-muted);
-      font-size: 12px;
+      font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
     }
@@ -2805,7 +2868,7 @@
     .page-nav-eyebrow {
       display: block;
       color: var(--text-secondary);
-      font-size: 12px;
+      font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
     }
@@ -2851,7 +2914,7 @@
       align-items: center;
       gap: 6px;
       flex: 0 0 auto;
-      font-size: 14px;
+      font-size: 12px;
       font-weight: 500;
       color: var(--text-secondary);
       text-decoration: none;
@@ -2873,16 +2936,16 @@
     }
 
     .docs-edit-link-glyph {
-      font-size: 13px;
+      font-size: 12px;
       line-height: 1;
     }
     /* ========== RESPONSE SAMPLES (Right Panel) ========== */
     .response-samples {
-      margin-top: 20px;
+      margin-top: 16px;
     }
 
     .response-samples-header {
-      font-size: 14px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--code-panel-text);
       margin-bottom: 12px;
@@ -2890,14 +2953,14 @@
 
     .sample-tabs {
       display: flex;
-      gap: 8px;
-      margin-bottom: 16px;
+      gap: 6px;
+      margin-bottom: 12px;
     }
 
     .sample-tab {
-      padding: 6px 14px;
+      padding: 4px 10px;
       border-radius: 4px;
-      font-size: 13px;
+      font-size: 10px;
       font-weight: 500;
       cursor: pointer;
       background: transparent;
@@ -2928,19 +2991,19 @@
     }
 
     .sample-content-type {
-      font-size: 12px;
+      font-size: 10px;
       color: #90a4ae;
       margin-bottom: 8px;
     }
 
     .sample-actions {
       display: flex;
-      gap: 16px;
-      margin-bottom: 12px;
+      gap: 12px;
+      margin-bottom: 8px;
     }
 
     .sample-action {
-      font-size: 12px;
+      font-size: 10px;
       color: #90a4ae;
       cursor: pointer;
       background: none;
@@ -2956,10 +3019,10 @@
     .sample-json {
       background: rgba(0,0,0,0.3);
       border-radius: 6px;
-      padding: 14px;
+      padding: 10px;
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 12px;
-      line-height: 1.5;
+      font-size: 10px;
+      line-height: 1.4;
       color: #e2e8f0;
       overflow-x: auto;
       white-space: pre-wrap;
@@ -2976,7 +3039,7 @@
     .right-panel-content {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: 18px;
     }
 
     .right-section {
@@ -2984,13 +3047,13 @@
     }
 
     .right-section-header {
-      font-size: 13px;
+      font-size: 10px;
       font-weight: 600;
       color: #90a4ae;
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      margin-bottom: 16px;
-      padding-bottom: 8px;
+      margin-bottom: 12px;
+      padding-bottom: 6px;
       border-bottom: 1px solid rgba(255,255,255,0.1);
     }
 
@@ -3009,7 +3072,7 @@
     .no-example {
       color: #90a4ae;
       font-style: italic;
-      font-size: 13px;
+      font-size: 12px;
       padding: 12px;
       background: rgba(0,0,0,0.2);
       border-radius: 6px;
@@ -3017,7 +3080,7 @@
 
     .response-desc-only {
       color: #90a4ae;
-      font-size: 13px;
+      font-size: 12px;
       padding: 12px;
       background: rgba(0,0,0,0.2);
       border-radius: 6px;
@@ -3035,9 +3098,9 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 10px 14px;
+      padding: 8px 10px;
       background: var(--code-panel-header);
-      font-size: 12px;
+      font-size: 10px;
       font-weight: 600;
       color: #90a4ae;
       text-transform: uppercase;
@@ -3050,32 +3113,33 @@
       border: none;
       border-radius: 0;
       color: #e2e8f0;
-      padding: 14px;
+      padding: 10px;
     }
 
     .code-example code {
       color: #e2e8f0;
       white-space: pre-wrap;
       word-break: break-word;
-      font-size: 12px;
+      font-size: 10px;
+      line-height: 1.4;
     }
 
     /* Code language tabs */
     .code-tabs {
       display: flex;
       gap: 2px;
-      padding: 8px 14px;
+      padding: 6px 10px;
       background: var(--code-panel-header);
       border-bottom: 1px solid rgba(255,255,255,0.1);
     }
 
     .code-tab {
-      padding: 6px 12px;
+      padding: 4px 9px;
       border: none;
       border-radius: 4px;
       background: transparent;
       color: #90a4ae;
-      font-size: 12px;
+      font-size: 10px;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.15s;
@@ -3105,12 +3169,12 @@
 
     pre {
       background: var(--code-bg);
-      padding: 16px;
+      padding: 12px;
       border-radius: 8px;
       overflow-x: auto;
       font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace;
-      font-size: 13px;
-      line-height: 1.5;
+      font-size: 10px;
+      line-height: 1.45;
       border: 1px solid var(--border-color);
     }
 
@@ -3125,7 +3189,7 @@
     .schema-row {
       display: flex;
       align-items: flex-start;
-      padding: 12px 16px;
+      padding: 8px 12px;
       border-bottom: 1px solid var(--border-color);
       transition: background 0.15s;
     }
@@ -3152,7 +3216,7 @@
 
     .schema-name {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 13px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--text-color);
     }
@@ -3160,17 +3224,17 @@
     .schema-required {
       color: #ef4444;
       font-weight: 700;
-      font-size: 14px;
+      font-size: 11px;
     }
 
     .schema-type {
       display: inline-flex;
       align-items: center;
       gap: 4px;
-      padding: 2px 8px;
+      padding: 1px 6px;
       border-radius: 4px;
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 11px;
+      font-size: 9px;
       font-weight: 500;
     }
 
@@ -3197,10 +3261,175 @@
 
     .schema-desc {
       color: var(--text-muted);
-      font-size: 13px;
+      font-size: 11px;
       margin-bottom: 4px;
     }
 
+    /* Compact ReDoc-style contract tree. Names and requiredness stay in a
+       narrow left rail; type, examples, constraints and prose share the
+       wider detail column. */
+    .schema-tree-root {
+      margin-top: 4px;
+      border-left: 1px solid var(--border-color);
+      border-left-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color));
+    }
+
+    .schema-tree-nested {
+      margin-left: 14px;
+      border-left: 1px solid var(--border-color);
+    }
+
+    .schema-tree-row {
+      position: relative;
+      display: grid;
+      grid-template-columns: minmax(120px, 28%) minmax(0, 1fr);
+      gap: 14px;
+      padding: 7px 0 7px 10px;
+      border-bottom: 1px solid var(--border-color);
+      font-size: 11px;
+      line-height: 1.4;
+    }
+
+    .schema-tree-row::before {
+      position: absolute;
+      top: 13px;
+      left: 0;
+      width: 9px;
+      border-top: 1px solid var(--border-color);
+      border-top-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color));
+      content: '';
+    }
+
+    .schema-tree-key {
+      position: relative;
+      display: flex;
+      min-width: 0;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1px;
+      padding-left: 8px;
+    }
+
+    .schema-tree-name {
+      overflow-wrap: anywhere;
+      background: transparent;
+      font-family: 'SF Mono', 'Monaco', monospace;
+      font-size: 10px;
+      color: var(--text-primary);
+      font-weight: 500;
+    }
+
+    .schema-tree-required,
+    .schema-tree-optional,
+    .schema-tree-deprecated {
+      font-size: 9px;
+      font-weight: 600;
+      letter-spacing: 0.35px;
+      line-height: 1.35;
+      text-transform: uppercase;
+    }
+
+    .schema-tree-required {
+      color: #ef4444;
+    }
+
+    .schema-tree-optional { color: var(--text-muted); }
+    .schema-tree-deprecated { color: #d97706; }
+
+    .schema-tree-toggle {
+      position: absolute;
+      top: -1px;
+      left: -8px;
+      width: 16px;
+      height: 16px;
+      padding: 0;
+      transform: rotate(0deg);
+      border: 0;
+      background: transparent;
+      color: var(--primary-color);
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 14px;
+      transition: transform 120ms ease;
+    }
+
+    .schema-tree-toggle.open { transform: rotate(90deg); }
+
+    .schema-tree-details { min-width: 0; }
+
+    .schema-tree-type {
+      color: var(--text-muted);
+      font-size: 10px;
+      line-height: 1.35;
+    }
+
+    .schema-tree-description {
+      margin-top: 3px;
+      color: var(--text-color);
+      font-size: 11px;
+      line-height: 1.42;
+    }
+
+    .schema-tree-description.markdown-content p {
+      margin: 0 0 3px;
+      color: inherit;
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    .schema-tree-description.markdown-content p:last-child { margin-bottom: 0; }
+
+    .schema-tree-description.markdown-content ul,
+    .schema-tree-description.markdown-content ol {
+      margin: 4px 0 2px 16px;
+      padding: 0;
+    }
+
+    .schema-tree-description.markdown-content li { margin: 1px 0; }
+
+    .schema-tree-example {
+      display: flex;
+      min-width: 0;
+      align-items: baseline;
+      gap: 5px;
+      margin-top: 2px;
+      color: var(--text-muted);
+      font-size: 10px;
+    }
+
+    .schema-tree-example code {
+      overflow: hidden;
+      padding: 0 3px;
+      border: 1px solid var(--border-color);
+      border-radius: 2px;
+      background: var(--code-bg);
+      color: var(--text-color);
+      font-size: 9px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .schema-tree-items-label {
+      display: inline-block;
+      margin-top: 3px;
+      color: var(--text-muted);
+      font-size: 9px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .schema-tree-children.collapsed { display: none; }
+
+    .schema-tree-meta {
+      display: block;
+      color: var(--text-secondary);
+    }
+
+    .schema-tree-unresolved {
+      color: var(--text-muted);
+      font-style: italic;
+    }
+
     .schema-constraints {
       display: flex;
       flex-wrap: wrap;
@@ -3209,7 +3438,7 @@
     }
 
     .schema-constraint {
-      font-size: 11px;
+      font-size: 10px;
       padding: 2px 6px;
       border-radius: 4px;
       background: var(--code-bg);
@@ -3225,7 +3454,7 @@
     }
 
     .schema-enum-value {
-      font-size: 11px;
+      font-size: 10px;
       padding: 2px 8px;
       border-radius: 4px;
       background: #fef3c7;
@@ -3239,7 +3468,7 @@
     }
 
     .schema-default {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--text-muted);
       margin-top: 4px;
     }
@@ -3255,7 +3484,7 @@
       cursor: pointer;
       user-select: none;
       color: var(--primary-color);
-      font-size: 12px;
+      font-size: 11px;
       margin-left: 8px;
     }
 
@@ -3284,7 +3513,7 @@
       padding: 8px 12px;
       background: rgba(0,0,0,0.05);
       border-bottom: 1px solid var(--border-color);
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--text-muted);
       text-transform: uppercase;
@@ -3293,7 +3522,7 @@
     .schema-example-body {
       padding: 12px;
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 12px;
+      font-size: 11px;
       white-space: pre-wrap;
       word-break: break-word;
     }
@@ -3308,7 +3537,7 @@
 
     .response-tab {
       padding: 8px 16px;
-      font-size: 13px;
+      font-size: 12px;
       font-weight: 500;
       cursor: pointer;
       border: none;
@@ -3346,7 +3575,7 @@
     .params-table th {
       text-align: left;
       padding: 8px 12px;
-      font-size: 11px;
+      font-size: 10px;
       font-weight: 600;
       text-transform: uppercase;
       color: var(--text-muted);
@@ -3357,7 +3586,7 @@
     .params-table td {
       padding: 10px 12px;
       border-bottom: 1px solid var(--border-color);
-      font-size: 13px;
+      font-size: 12px;
     }
 
     .params-table tr:last-child td { border-bottom: none; }
@@ -3368,7 +3597,7 @@
     }
 
     .param-in {
-      font-size: 10px;
+      font-size: 9px;
       padding: 2px 6px;
       border-radius: 3px;
       background: var(--code-bg);
@@ -3398,7 +3627,7 @@
     }
 
     .info-card-title {
-      font-size: 11px;
+      font-size: 10px;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.5px;
@@ -3406,7 +3635,7 @@
     }
 
     .info-card-value {
-      font-size: 16px;
+      font-size: 14px;
       font-weight: 600;
       color: var(--text-color);
     }
@@ -3422,15 +3651,16 @@
         width: 300px;
         z-index: 100;
       }
-      .sidebar.mobile-open { display: block; }
+      .sidebar-resizer { display: none; }
+      .sidebar.mobile-open { display: flex; }
       .hero { padding: 40px 24px; min-height: 100vh; }
       .hero-logo { height: 80px; margin-bottom: 24px; }
-      .hero-title { font-size: 36px; }
-      .hero-version { font-size: 12px; margin-left: 8px; }
-      .hero-tagline { font-size: 17px; margin-bottom: 20px; }
+      .hero-title { font-size: 32px; }
+      .hero-version { font-size: 11px; margin-left: 8px; }
+      .hero-tagline { font-size: 15px; margin-bottom: 20px; }
       .hero-features { flex-direction: column; align-items: center; gap: 12px; }
-      .hero-features li { font-size: 15px; }
-      .hero-btn { padding: 12px 24px; font-size: 15px; }
+      .hero-features li { font-size: 13px; }
+      .hero-btn { padding: 12px 24px; font-size: 13px; }
       .github-corner svg { width: 60px; height: 60px; }
       .main { padding: 24px; }
     }
@@ -3447,27 +3677,28 @@
 
     /* ========== HTTP ENDPOINT (ReDoc-style) ========== */
     .http-param-group {
-      margin-bottom: 20px;
+      margin-bottom: 14px;
     }
 
     .http-param-group-title {
-      font-size: 12px;
+      font-size: 10px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       color: var(--text-muted);
-      margin-bottom: 8px;
+      margin-bottom: 0;
+      padding-bottom: 5px;
+      border-bottom: 1px solid var(--border-color);
     }
 
     .http-params {
-      border: 1px solid var(--border-color);
-      border-radius: 8px;
-      overflow: hidden;
+      overflow: visible;
     }
 
     .http-param {
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--border-color);
+      padding-top: 7px;
+      padding-right: 0;
+      padding-bottom: 7px;
     }
 
     .http-param:last-child { border-bottom: none; }
@@ -3476,18 +3707,18 @@
       display: flex;
       align-items: center;
       flex-wrap: wrap;
-      gap: 8px;
+      gap: 6px;
     }
 
     .http-param-name {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 13px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--text-color);
     }
 
     .http-param-required {
-      font-size: 10px;
+      font-size: 9px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.4px;
@@ -3495,7 +3726,7 @@
     }
 
     .http-param-deprecated {
-      font-size: 10px;
+      font-size: 9px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.4px;
@@ -3504,22 +3735,22 @@
 
     .http-param-desc {
       color: var(--text-muted);
-      font-size: 13px;
-      margin-top: 6px;
-      line-height: 1.5;
+      font-size: 11px;
+      margin-top: 4px;
+      line-height: 1.4;
     }
 
     /* Validation constraint chips (reuses .schema-constraint look) */
     .constraint-chips {
       display: flex;
       flex-wrap: wrap;
-      gap: 6px;
-      margin-top: 8px;
+      gap: 4px;
+      margin-top: 5px;
     }
 
     .constraint-chip {
-      font-size: 11px;
-      padding: 2px 8px;
+      font-size: 9px;
+      padding: 1px 6px;
       border-radius: 4px;
       background: var(--code-bg);
       color: var(--text-muted);
@@ -3540,32 +3771,37 @@
 
     /* Response accordions */
     .response-accordion {
-      border: 1px solid var(--border-color);
-      border-radius: 8px;
-      margin-bottom: 10px;
+      border: 0;
+      border-radius: 3px;
+      margin-bottom: 8px;
       overflow: hidden;
     }
 
     .response-accordion-header {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 8px;
       width: 100%;
-      padding: 12px 14px;
+      padding: 8px 10px;
       background: var(--code-bg);
       border: none;
       cursor: pointer;
       text-align: left;
-      font-size: 13px;
+      font-size: 11px;
       color: var(--text-color);
       transition: background 0.15s;
     }
 
     .response-accordion-header:hover { background: var(--hover-bg); }
 
+    .response-accordion-header.status-2xx { background: rgba(16,185,129,0.08); }
+    .response-accordion-header.status-3xx { background: rgba(59,130,246,0.08); }
+    .response-accordion-header.status-4xx { background: rgba(245,158,11,0.09); }
+    .response-accordion-header.status-5xx { background: rgba(239,68,68,0.09); }
+
     .response-accordion-caret {
       flex-shrink: 0;
-      font-size: 10px;
+      font-size: 9px;
       color: var(--text-muted);
       transition: transform 0.2s ease;
     }
@@ -3575,8 +3811,8 @@
     }
 
     .response-status-dot {
-      width: 9px;
-      height: 9px;
+      width: 8px;
+      height: 8px;
       border-radius: 50%;
       flex-shrink: 0;
     }
@@ -3596,23 +3832,32 @@
     }
 
     .response-accordion-body {
-      padding: 14px;
-      border-top: 1px solid var(--border-color);
+      padding: 9px 8px 5px;
+      border-top: 0;
       display: none;
     }
 
     .response-accordion.open .response-accordion-body { display: block; }
 
     .response-subhead {
-      font-size: 11px;
+      font-size: 9px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       color: var(--text-muted);
-      margin: 0 0 8px;
+      margin: 0;
+      padding-bottom: 5px;
+      border-bottom: 1px solid var(--border-color);
     }
 
-    .response-block + .response-block { margin-top: 16px; }
+    .response-block + .response-block { margin-top: 10px; }
+
+    @media (max-width: 640px) {
+      .schema-tree-row {
+        grid-template-columns: minmax(100px, 35%) minmax(0, 1fr);
+        gap: 8px;
+      }
+    }
 
     /* Multi-language code samples */
     .http-code-samples {
@@ -3634,14 +3879,14 @@
 
     .http-code-sample-pre {
       margin: 0;
-      padding: 14px;
+      padding: 10px;
       background: transparent;
       border: none;
       border-radius: 0;
       overflow-x: auto;
       font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace;
-      font-size: 12px;
-      line-height: 1.55;
+      font-size: 10px;
+      line-height: 1.4;
       color: var(--text-color);
       white-space: pre;
     }
@@ -3649,12 +3894,12 @@
     .http-code-copy,
     .sample-code-copy {
       margin-left: auto;
-      padding: 4px 10px;
+      padding: 3px 8px;
       background: transparent;
       border: 1px solid var(--border-color);
       border-radius: 4px;
       color: var(--text-muted);
-      font-size: 11px;
+      font-size: 9px;
       cursor: pointer;
       transition: all 0.15s;
     }
@@ -3668,7 +3913,7 @@
     /* Right panel (third column): keep request/response samples dark & legible
        regardless of the active theme, matching ReDoc's sample column. */
     .endpoint-right .endpoint-right-section + .endpoint-right-section {
-      margin-top: 24px;
+      margin-top: 18px;
     }
 
     .endpoint-right .http-code-samples {
@@ -3688,9 +3933,9 @@
     .response-example-toolbar {
       display: flex;
       align-items: center;
-      gap: 12px;
-      min-height: 28px;
-      margin: 4px 0 8px;
+      gap: 8px;
+      min-height: 24px;
+      margin: 2px 0 6px;
     }
 
     .response-example-toolbar .response-example-name {
@@ -3699,7 +3944,7 @@
 
     .endpoint-right .sample-code {
       margin: 0;
-      padding: 14px;
+      padding: 10px;
       overflow-x: auto;
       border: 1px solid rgba(255,255,255,0.1);
       border-radius: 6px;
@@ -3712,8 +3957,8 @@
     .endpoint-right .sample-code code {
       color: inherit;
       font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace;
-      font-size: 12px;
-      line-height: 1.55;
+      font-size: 10px;
+      line-height: 1.4;
       white-space: inherit;
     }
 
@@ -4048,7 +4293,7 @@
     }
 
     .try-it-title {
-      font-size: 13px;
+      font-size: 12px;
       font-weight: 600;
       color: #90a4ae;
       text-transform: uppercase;
@@ -4059,7 +4304,7 @@
       background: none;
       border: none;
       color: #90a4ae;
-      font-size: 12px;
+      font-size: 11px;
       cursor: pointer;
       transition: transform 0.2s;
     }
@@ -4083,7 +4328,7 @@
     }
 
     .try-it-section-title {
-      font-size: 11px;
+      font-size: 10px;
       font-weight: 600;
       color: #90a4ae;
       text-transform: uppercase;
@@ -4101,7 +4346,7 @@
 
     .try-it-label {
       display: block;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 500;
       color: var(--code-panel-text);
       margin-bottom: 6px;
@@ -4118,7 +4363,7 @@
       border: 1px solid rgba(255,255,255,0.15);
       border-radius: 6px;
       color: var(--code-panel-text);
-      font-size: 13px;
+      font-size: 12px;
       font-family: 'SF Mono', 'Monaco', monospace;
       outline: none;
       transition: border-color 0.15s;
@@ -4140,7 +4385,7 @@
       border: 1px solid rgba(255,255,255,0.15);
       border-radius: 6px;
       color: var(--code-panel-text);
-      font-size: 12px;
+      font-size: 11px;
       font-family: 'SF Mono', 'Monaco', monospace;
       line-height: 1.5;
       resize: vertical;
@@ -4168,7 +4413,7 @@
       color: var(--primary-color);
       border: 1px solid var(--primary-color);
       border-radius: 5px;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 500;
       letter-spacing: 0.2px;
       cursor: pointer;
@@ -4199,7 +4444,7 @@
     }
 
     .try-it-response-status {
-      font-size: 14px;
+      font-size: 12px;
       font-weight: 600;
     }
 
@@ -4208,7 +4453,7 @@
     .try-it-response-status.status-5xx { color: #ef4444; }
 
     .try-it-response-time {
-      font-size: 13px;
+      font-size: 12px;
       color: #90a4ae;
     }
 
@@ -4220,7 +4465,7 @@
       background: rgba(0,0,0,0.3);
       padding: 12px;
       border-radius: 6px;
-      font-size: 12px;
+      font-size: 11px;
       line-height: 1.6;
       color: #90a4ae;
       margin: 0;
@@ -4240,7 +4485,7 @@
       border-radius: 6px;
       padding: 12px 16px;
       color: #ef4444;
-      font-size: 13px;
+      font-size: 12px;
     }
 
     /* WebSocket Try It Out */
@@ -4257,7 +4502,7 @@
       padding: 12px 16px;
       background: rgba(0, 0, 0, 0.15);
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-      font-size: 13px;
+      font-size: 12px;
       color: var(--text-secondary);
     }
 
@@ -4289,7 +4534,7 @@
       border-radius: 6px;
       color: var(--text-primary);
       font-family: 'JetBrains Mono', monospace;
-      font-size: 13px;
+      font-size: 12px;
     }
 
     .try-it-ws-url input:focus {
@@ -4304,7 +4549,7 @@
       border: none;
       border-radius: 6px;
       font-weight: 500;
-      font-size: 13px;
+      font-size: 12px;
       cursor: pointer;
       transition: all 0.2s ease;
       white-space: nowrap;
@@ -4325,7 +4570,7 @@
 
     .try-it-ws-params h4 {
       margin: 0 0 12px 0;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--text-secondary);
       text-transform: uppercase;
@@ -4339,7 +4584,7 @@
 
     .try-it-ws-message h4 {
       margin: 0 0 12px 0;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--text-secondary);
       text-transform: uppercase;
@@ -4355,7 +4600,7 @@
       border-radius: 6px;
       color: var(--text-primary);
       font-family: 'JetBrains Mono', monospace;
-      font-size: 13px;
+      font-size: 12px;
       resize: vertical;
       box-sizing: border-box;
     }
@@ -4373,7 +4618,7 @@
       border: none;
       border-radius: 6px;
       font-weight: 500;
-      font-size: 13px;
+      font-size: 12px;
       cursor: pointer;
       transition: all 0.2s ease;
     }
@@ -4400,7 +4645,7 @@
 
     .try-it-ws-log-header h4 {
       margin: 0;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--text-secondary);
       text-transform: uppercase;
@@ -4413,7 +4658,7 @@
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 4px;
       color: var(--text-secondary);
-      font-size: 11px;
+      font-size: 10px;
       cursor: pointer;
       transition: all 0.2s ease;
     }
@@ -4436,7 +4681,7 @@
       gap: 8px;
       padding: 8px 0;
       border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-      font-size: 12px;
+      font-size: 11px;
       font-family: 'JetBrains Mono', monospace;
     }
 
@@ -4453,7 +4698,7 @@
       flex-shrink: 0;
       padding: 2px 6px;
       border-radius: 3px;
-      font-size: 10px;
+      font-size: 9px;
       font-weight: 600;
       text-transform: uppercase;
     }
@@ -4493,7 +4738,7 @@
       text-align: center;
       color: var(--text-tertiary);
       padding: 24px;
-      font-size: 13px;
+      font-size: 12px;
     }
 
     /* Streams (SSE) Try It Out */
@@ -4510,7 +4755,7 @@
       padding: 12px 16px;
       background: rgba(0, 0, 0, 0.15);
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-      font-size: 13px;
+      font-size: 12px;
       color: var(--text-secondary);
     }
 
@@ -4544,7 +4789,7 @@
       border: none;
       border-radius: 6px;
       font-weight: 500;
-      font-size: 13px;
+      font-size: 12px;
       cursor: pointer;
       transition: all 0.2s ease;
     }
@@ -4569,7 +4814,7 @@
       background: rgba(139, 92, 246, 0.2);
       border: 1px solid rgba(139, 92, 246, 0.4);
       border-radius: 4px;
-      font-size: 12px;
+      font-size: 11px;
       color: #a78bfa;
       cursor: pointer;
       transition: all 0.2s ease;
@@ -4608,7 +4853,7 @@
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 4px;
       color: var(--text-secondary);
-      font-size: 11px;
+      font-size: 10px;
       cursor: pointer;
       transition: all 0.2s ease;
     }
@@ -4647,7 +4892,7 @@
       align-items: center;
       gap: 8px;
       margin-bottom: 8px;
-      font-size: 12px;
+      font-size: 11px;
     }
 
     .sse-event-time {
@@ -4661,7 +4906,7 @@
       color: #a78bfa;
       font-weight: 600;
       text-transform: uppercase;
-      font-size: 10px;
+      font-size: 9px;
     }
 
     .try-it-sse-event-error .sse-event-type {
@@ -4680,7 +4925,7 @@
       background: rgba(0, 0, 0, 0.2);
       border-radius: 4px;
       font-family: 'JetBrains Mono', monospace;
-      font-size: 12px;
+      font-size: 11px;
       color: var(--text-primary);
       white-space: pre-wrap;
       word-break: break-all;