raffel 1.1.82 → 1.1.83

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: 13px;
-      --font-size-small: 12px;
-      --font-size-xs: 10px;
-      --font-size-h1: 28px;
-      --font-size-h2: 22px;
-      --font-size-h3: 18px;
-      --font-size-h4: 15px;
-      --font-size-h5: 13px;
-      --font-size-h6: 12px;
-      --font-size-code: 11px;
-      --line-height-body: 1.5;
+      /* 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;
     }
 
@@ -230,7 +231,7 @@
       content: '▾';
       margin-left: 6px;
       color: var(--text-muted);
-      font-size: 11px;
+      font-size: 10px;
     }
 
     .top-nav-submenu {
@@ -674,8 +675,9 @@
     }
 
     .app-container {
+      --sidebar-width: 280px;
       display: grid;
-      grid-template-columns: 280px 1fr;
+      grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
       min-height: calc(100vh - 300px);
     }
 
@@ -705,13 +707,59 @@
     .sidebar {
       background: var(--sidebar-bg);
       border-right: 1px solid var(--border-color);
-      padding: 18px 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;
     }
@@ -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;
@@ -772,7 +820,7 @@
     .protocol-tab {
       padding: 5px 10px;
       border-radius: 20px;
-      font-size: 11px;
+      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 {
+      flex: 1;
+      min-height: 0;
+      overflow-x: hidden;
+      overflow-y: auto;
       padding: 0 10px;
+      scrollbar-gutter: stable;
     }
 
     .tag-group {
@@ -824,7 +877,7 @@
       padding: 8px 10px;
       border-radius: 8px;
       cursor: pointer;
-      font-size: 13px;
+      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;
     }
@@ -904,7 +957,7 @@
       color: var(--text-muted);
       cursor: pointer;
       font: inherit;
-      font-size: 11px;
+      font-size: 10px;
       line-height: 1.35;
       padding: 4px 7px;
       text-align: left;
@@ -952,11 +1005,11 @@
     }
 
     .nav-item-intro .nav-item-icon {
-      font-size: 16px;
+      font-size: 14px;
     }
 
     .nav-item-intro .nav-item-text {
-      font-size: 13px;
+      font-size: 12px;
     }
 
     .nav-item-method {
@@ -996,8 +1049,17 @@
 
     .nav-item-path {
       font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-      font-size: 12px;
+      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;
@@ -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);
@@ -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);
     }
 
@@ -1627,7 +1689,7 @@
       align-items: center;
       padding: 4px 9px;
       border-radius: 4px;
-      font-size: 11px;
+      font-size: 10px;
       font-weight: 700;
       text-transform: uppercase;
       font-family: 'SF Mono', 'Monaco', monospace;
@@ -1642,13 +1704,13 @@
 
     .endpoint-path {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 14px;
+      font-size: 12px;
       font-weight: 500;
       color: var(--text-color);
     }
 
     .endpoint-title {
-      font-size: 21px;
+      font-size: 18px;
       font-weight: 600;
       line-height: 1.3;
       margin-bottom: 6px;
@@ -1657,7 +1719,7 @@
 
     .endpoint-description {
       color: var(--text-muted);
-      font-size: 13px;
+      font-size: 12px;
       line-height: 1.55;
       margin-bottom: 18px;
     }
@@ -1698,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;
@@ -1707,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;
@@ -1740,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);
     }
 
@@ -1777,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;
     }
@@ -1853,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;
@@ -2015,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;
     }
@@ -2033,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);
     }
 
@@ -2104,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;
@@ -2167,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;
     }
@@ -2181,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);
@@ -2203,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;
     }
@@ -2260,7 +2322,7 @@
       background: transparent;
       color: var(--text-muted);
       padding: 10px 14px;
-      font-size: 13px;
+      font-size: 12px;
       cursor: pointer;
       white-space: nowrap;
     }
@@ -2324,7 +2386,7 @@
     }
 
     .endpoint-right-header {
-      font-size: 11px;
+      font-size: 10px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
@@ -2345,7 +2407,7 @@
     }
 
     .endpoint-subsection-title {
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--text-muted);
       text-transform: uppercase;
@@ -2362,7 +2424,7 @@
 
     /* ========== REDOC-STYLE PARAMETER LABELS ========== */
     .subsection-label {
-      font-size: 11px;
+      font-size: 10px;
       font-weight: 600;
       color: var(--text-muted);
       text-transform: uppercase;
@@ -2378,7 +2440,7 @@
 
     .auth-value {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 14px;
+      font-size: 12px;
       color: var(--text-color);
       margin-left: 8px;
     }
@@ -2433,13 +2495,13 @@
 
     .param-name-text {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--text-color);
     }
 
     .param-required-badge {
-      font-size: 10px;
+      font-size: 9px;
       font-weight: 700;
       padding: 2px 6px;
       border-radius: 4px;
@@ -2456,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);
@@ -2478,7 +2540,7 @@
 
     .param-constraint {
       display: inline-block;
-      font-size: 10px;
+      font-size: 9px;
       padding: 3px 8px;
       border-radius: 4px;
       background: #fef3c7;
@@ -2495,7 +2557,7 @@
     }
 
     .param-default {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--text-muted);
       margin-top: 6px;
     }
@@ -2505,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;
     }
@@ -2519,11 +2581,11 @@
       padding: 3px 6px;
       border-radius: 3px;
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 11px;
+      font-size: 10px;
     }
 
     .param-description {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--text-color);
       line-height: 1.4;
       margin-top: 4px;
@@ -2557,7 +2619,7 @@
     }
 
     .response-arrow {
-      font-size: 11px;
+      font-size: 10px;
       transition: transform 0.2s;
       color: var(--text-muted);
       width: 16px;
@@ -2569,7 +2631,7 @@
     }
 
     .response-status {
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 700;
       padding: 3px 8px;
       border-radius: 4px;
@@ -2610,7 +2672,7 @@
     }
 
     .response-desc {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--text-color);
     }
 
@@ -2626,7 +2688,7 @@
     }
 
     .response-schema-label {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.5px;
@@ -2644,7 +2706,7 @@
     }
 
     .response-headers-label {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.5px;
@@ -2664,7 +2726,7 @@
 
     .response-header-name {
       font-family: 'SF Mono', Monaco, Consolas, monospace;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--text-color);
       min-width: 150px;
@@ -2676,19 +2738,19 @@
     }
 
     .response-header-type {
-      font-size: 11px;
+      font-size: 10px;
       color: var(--primary-color);
       margin-bottom: 4px;
     }
 
     .response-header-desc {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--text-muted);
     }
 
     .response-header-required {
       color: #ef4444;
-      font-size: 11px;
+      font-size: 10px;
       margin-left: 8px;
     }
 
@@ -2719,7 +2781,7 @@
       display: block;
       margin-top: 4px;
       color: var(--text-muted);
-      font-size: 14px;
+      font-size: 12px;
     }
 
     .docs-pagination {
@@ -2756,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;
     }
@@ -2806,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;
     }
@@ -2852,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;
@@ -2874,7 +2936,7 @@
     }
 
     .docs-edit-link-glyph {
-      font-size: 13px;
+      font-size: 12px;
       line-height: 1;
     }
     /* ========== RESPONSE SAMPLES (Right Panel) ========== */
@@ -2883,7 +2945,7 @@
     }
 
     .response-samples-header {
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--code-panel-text);
       margin-bottom: 12px;
@@ -2898,7 +2960,7 @@
     .sample-tab {
       padding: 4px 10px;
       border-radius: 4px;
-      font-size: 11px;
+      font-size: 10px;
       font-weight: 500;
       cursor: pointer;
       background: transparent;
@@ -2929,7 +2991,7 @@
     }
 
     .sample-content-type {
-      font-size: 11px;
+      font-size: 10px;
       color: #90a4ae;
       margin-bottom: 8px;
     }
@@ -2941,7 +3003,7 @@
     }
 
     .sample-action {
-      font-size: 11px;
+      font-size: 10px;
       color: #90a4ae;
       cursor: pointer;
       background: none;
@@ -2959,7 +3021,7 @@
       border-radius: 6px;
       padding: 10px;
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 11px;
+      font-size: 10px;
       line-height: 1.4;
       color: #e2e8f0;
       overflow-x: auto;
@@ -2985,7 +3047,7 @@
     }
 
     .right-section-header {
-      font-size: 11px;
+      font-size: 10px;
       font-weight: 600;
       color: #90a4ae;
       text-transform: uppercase;
@@ -3010,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;
@@ -3018,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;
@@ -3038,7 +3100,7 @@
       justify-content: space-between;
       padding: 8px 10px;
       background: var(--code-panel-header);
-      font-size: 11px;
+      font-size: 10px;
       font-weight: 600;
       color: #90a4ae;
       text-transform: uppercase;
@@ -3058,7 +3120,7 @@
       color: #e2e8f0;
       white-space: pre-wrap;
       word-break: break-word;
-      font-size: 11px;
+      font-size: 10px;
       line-height: 1.4;
     }
 
@@ -3077,7 +3139,7 @@
       border-radius: 4px;
       background: transparent;
       color: #90a4ae;
-      font-size: 11px;
+      font-size: 10px;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.15s;
@@ -3111,7 +3173,7 @@
       border-radius: 8px;
       overflow-x: auto;
       font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace;
-      font-size: 11px;
+      font-size: 10px;
       line-height: 1.45;
       border: 1px solid var(--border-color);
     }
@@ -3154,7 +3216,7 @@
 
     .schema-name {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 600;
       color: var(--text-color);
     }
@@ -3162,7 +3224,7 @@
     .schema-required {
       color: #ef4444;
       font-weight: 700;
-      font-size: 12px;
+      font-size: 11px;
     }
 
     .schema-type {
@@ -3172,7 +3234,7 @@
       padding: 1px 6px;
       border-radius: 4px;
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 10px;
+      font-size: 9px;
       font-weight: 500;
     }
 
@@ -3199,56 +3261,167 @@
 
     .schema-desc {
       color: var(--text-muted);
-      font-size: 12px;
+      font-size: 11px;
       margin-bottom: 4px;
     }
 
-    /* Compact response-body tree. Nested wrappers use a fixed step so
-       indentation grows predictably instead of compounding by depth. */
+    /* 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: 6px;
+      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 {
-      padding-left: 10px;
+      margin-left: 14px;
+      border-left: 1px solid var(--border-color);
     }
 
     .schema-tree-row {
-      padding: 4px 0;
-      font-size: 12px;
-      line-height: 1.35;
+      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-root > .schema-tree-row {
-      padding-left: 6px;
-      border-left: 1px solid var(--border-color);
+    .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-property {
+    .schema-tree-key {
+      position: relative;
       display: flex;
-      align-items: center;
-      gap: 5px;
+      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: 11px;
-      line-height: 1.4;
+      font-size: 10px;
     }
 
-    .schema-tree-label {
-      color: var(--text-primary);
-      font-weight: 500;
+    .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);
     }
 
@@ -3265,7 +3438,7 @@
     }
 
     .schema-constraint {
-      font-size: 11px;
+      font-size: 10px;
       padding: 2px 6px;
       border-radius: 4px;
       background: var(--code-bg);
@@ -3281,7 +3454,7 @@
     }
 
     .schema-enum-value {
-      font-size: 11px;
+      font-size: 10px;
       padding: 2px 8px;
       border-radius: 4px;
       background: #fef3c7;
@@ -3295,7 +3468,7 @@
     }
 
     .schema-default {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--text-muted);
       margin-top: 4px;
     }
@@ -3311,7 +3484,7 @@
       cursor: pointer;
       user-select: none;
       color: var(--primary-color);
-      font-size: 12px;
+      font-size: 11px;
       margin-left: 8px;
     }
 
@@ -3340,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;
@@ -3349,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;
     }
@@ -3364,7 +3537,7 @@
 
     .response-tab {
       padding: 8px 16px;
-      font-size: 13px;
+      font-size: 12px;
       font-weight: 500;
       cursor: pointer;
       border: none;
@@ -3402,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);
@@ -3413,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; }
@@ -3424,7 +3597,7 @@
     }
 
     .param-in {
-      font-size: 10px;
+      font-size: 9px;
       padding: 2px 6px;
       border-radius: 3px;
       background: var(--code-bg);
@@ -3454,7 +3627,7 @@
     }
 
     .info-card-title {
-      font-size: 11px;
+      font-size: 10px;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.5px;
@@ -3462,7 +3635,7 @@
     }
 
     .info-card-value {
-      font-size: 16px;
+      font-size: 14px;
       font-weight: 600;
       color: var(--text-color);
     }
@@ -3478,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; }
     }
@@ -3507,23 +3681,24 @@
     }
 
     .http-param-group-title {
-      font-size: 11px;
+      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: 8px 12px;
-      border-bottom: 1px solid var(--border-color);
+      padding-top: 7px;
+      padding-right: 0;
+      padding-bottom: 7px;
     }
 
     .http-param:last-child { border-bottom: none; }
@@ -3537,13 +3712,13 @@
 
     .http-param-name {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 12px;
+      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;
@@ -3551,7 +3726,7 @@
     }
 
     .http-param-deprecated {
-      font-size: 10px;
+      font-size: 9px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.4px;
@@ -3560,7 +3735,7 @@
 
     .http-param-desc {
       color: var(--text-muted);
-      font-size: 12px;
+      font-size: 11px;
       margin-top: 4px;
       line-height: 1.4;
     }
@@ -3574,7 +3749,7 @@
     }
 
     .constraint-chip {
-      font-size: 10px;
+      font-size: 9px;
       padding: 1px 6px;
       border-radius: 4px;
       background: var(--code-bg);
@@ -3596,8 +3771,8 @@
 
     /* Response accordions */
     .response-accordion {
-      border: 1px solid var(--border-color);
-      border-radius: 8px;
+      border: 0;
+      border-radius: 3px;
       margin-bottom: 8px;
       overflow: hidden;
     }
@@ -3607,21 +3782,26 @@
       align-items: center;
       gap: 8px;
       width: 100%;
-      padding: 9px 12px;
+      padding: 8px 10px;
       background: var(--code-bg);
       border: none;
       cursor: pointer;
       text-align: left;
-      font-size: 12px;
+      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;
     }
@@ -3652,23 +3832,32 @@
     }
 
     .response-accordion-body {
-      padding: 10px 12px;
-      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: 10px;
+      font-size: 9px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       color: var(--text-muted);
-      margin: 0 0 6px;
+      margin: 0;
+      padding-bottom: 5px;
+      border-bottom: 1px solid var(--border-color);
     }
 
-    .response-block + .response-block { margin-top: 12px; }
+    .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 {
@@ -3696,7 +3885,7 @@
       border-radius: 0;
       overflow-x: auto;
       font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace;
-      font-size: 11px;
+      font-size: 10px;
       line-height: 1.4;
       color: var(--text-color);
       white-space: pre;
@@ -3710,7 +3899,7 @@
       border: 1px solid var(--border-color);
       border-radius: 4px;
       color: var(--text-muted);
-      font-size: 10px;
+      font-size: 9px;
       cursor: pointer;
       transition: all 0.15s;
     }
@@ -3768,7 +3957,7 @@
     .endpoint-right .sample-code code {
       color: inherit;
       font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace;
-      font-size: 11px;
+      font-size: 10px;
       line-height: 1.4;
       white-space: inherit;
     }
@@ -4104,7 +4293,7 @@
     }
 
     .try-it-title {
-      font-size: 13px;
+      font-size: 12px;
       font-weight: 600;
       color: #90a4ae;
       text-transform: uppercase;
@@ -4115,7 +4304,7 @@
       background: none;
       border: none;
       color: #90a4ae;
-      font-size: 12px;
+      font-size: 11px;
       cursor: pointer;
       transition: transform 0.2s;
     }
@@ -4139,7 +4328,7 @@
     }
 
     .try-it-section-title {
-      font-size: 11px;
+      font-size: 10px;
       font-weight: 600;
       color: #90a4ae;
       text-transform: uppercase;
@@ -4157,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;
@@ -4174,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;
@@ -4196,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;
@@ -4224,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;
@@ -4255,7 +4444,7 @@
     }
 
     .try-it-response-status {
-      font-size: 14px;
+      font-size: 12px;
       font-weight: 600;
     }
 
@@ -4264,7 +4453,7 @@
     .try-it-response-status.status-5xx { color: #ef4444; }
 
     .try-it-response-time {
-      font-size: 13px;
+      font-size: 12px;
       color: #90a4ae;
     }
 
@@ -4276,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;
@@ -4296,7 +4485,7 @@
       border-radius: 6px;
       padding: 12px 16px;
       color: #ef4444;
-      font-size: 13px;
+      font-size: 12px;
     }
 
     /* WebSocket Try It Out */
@@ -4313,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);
     }
 
@@ -4345,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 {
@@ -4360,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;
@@ -4381,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;
@@ -4395,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;
@@ -4411,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;
     }
@@ -4429,7 +4618,7 @@
       border: none;
       border-radius: 6px;
       font-weight: 500;
-      font-size: 13px;
+      font-size: 12px;
       cursor: pointer;
       transition: all 0.2s ease;
     }
@@ -4456,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;
@@ -4469,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;
     }
@@ -4492,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;
     }
 
@@ -4509,7 +4698,7 @@
       flex-shrink: 0;
       padding: 2px 6px;
       border-radius: 3px;
-      font-size: 10px;
+      font-size: 9px;
       font-weight: 600;
       text-transform: uppercase;
     }
@@ -4549,7 +4738,7 @@
       text-align: center;
       color: var(--text-tertiary);
       padding: 24px;
-      font-size: 13px;
+      font-size: 12px;
     }
 
     /* Streams (SSE) Try It Out */
@@ -4566,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);
     }
 
@@ -4600,7 +4789,7 @@
       border: none;
       border-radius: 6px;
       font-weight: 500;
-      font-size: 13px;
+      font-size: 12px;
       cursor: pointer;
       transition: all 0.2s ease;
     }
@@ -4625,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;
@@ -4664,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;
     }
@@ -4703,7 +4892,7 @@
       align-items: center;
       gap: 8px;
       margin-bottom: 8px;
-      font-size: 12px;
+      font-size: 11px;
     }
 
     .sse-event-time {
@@ -4717,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 {
@@ -4736,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;