:root {
  --color-lts: #66bb6a;
  --color-lts-dev: #fff9c4;
  --color-preview: #42a5f5;
  --color-highlight: #ffd700;
  --color-highlight-border: #ffa500;
  --color-highlight-hover: #ff8c00;
  --color-highlight-subtle: #ffe680;
  
  --gradient-header: linear-gradient(180deg, #1a1b3a 0%, #15162f 100%);
  --gradient-year: linear-gradient(180deg, #5e61aa 0%, #1e2050 100%);
  
  --bg-white: white;
  --bg-api-name: #fafbfc;
  --bg-hover-row: rgba(255, 247, 205, 0.3);
  
  --border-cell: 1px solid #e1e4e8;
  --border-year-separator: 3px solid #bbb;
  --border-api-column: 2px solid #d1d5da;
  
  --padding-cell: 4px 6px;
  --padding-api-name: 4px 8px;
  
  --font-size-base: 10px;
  --font-size-header: 8px;
  --font-size-year: 10px;
  --font-size-api-name: 10px;
  
  --min-cell-width: 24px;
  --min-api-name-width: 85px;
  
  --z-api-name: 5;
  --z-header: 10;
  --z-sticky-corner: 20;
  
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Consolas", "Liberation Mono", Menlo, monospace;
  
  --transition-base: all 0.15s ease;
  --shadow-table: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-highlight: 0 0 0 2px var(--color-highlight-hover);
  --shadow-cell-inset: inset 0 0 0 1px var(--color-highlight-border);
}


#api-version-graph { 
  max-width: 100%;
  max-height: 600px; 
  overflow: auto;
  position: relative;
  border-radius: 6px;
  box-shadow: var(--shadow-table);
  border: 1px solid #ddd;
  display: block;
}

.api-version-graph-table { 
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-base);
  margin: 0; 
  width: 100%;
  min-width: 1200px;
  font-family: var(--font-sans);
  display: table;
}


.api-version-graph-table th,
.api-version-graph-table td { 
  border-right: var(--border-cell);
  border-bottom: var(--border-cell);
  padding: var(--padding-cell);
  text-align: center; 
  min-width: var(--min-cell-width);
  transition: var(--transition-base);
  background: var(--bg-white);
}

.api-version-graph-table th:first-child,
.api-version-graph-table td:first-child { 
  border-left: var(--border-cell);
}

.api-version-graph-table thead tr:first-child th { 
  border-top: var(--border-cell);
}


.api-version-graph-table .api-name { 
  font-weight: 600;
  font-family: var(--font-mono);
  text-align: left; 
  background: var(--bg-api-name) !important;
  min-width: var(--min-api-name-width);
  font-size: var(--font-size-api-name);
  padding: var(--padding-api-name);
  position: relative;
  z-index: var(--z-api-name);
  border-right: var(--border-api-column);
  box-shadow: 2px 0 3px -1px rgba(0, 0, 0, 0.15);
  will-change: transform;
}

.api-version-graph-table thead tr:first-child th { 
  position: relative;
  font-size: var(--font-size-header);
  z-index: var(--z-header);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  height: 32px;
  will-change: transform;
  transform-style: preserve-3d;
}

.api-version-graph-table thead tr:nth-child(2) th { 
  position: relative;
  font-size: var(--font-size-header);
  z-index: var(--z-header);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  height: 32px;
  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.25);
  will-change: transform;
  transform-style: preserve-3d;
}

.api-version-graph-table thead tr:first-child th:first-child {
  position: relative;
  z-index: var(--z-sticky-corner);
  box-shadow: 2px 2px 4px -1px rgba(0, 0, 0, 0.25);
  will-change: transform;
  transform-style: preserve-3d;
}

.api-version-graph-table th.year-header { 
  font-size: var(--font-size-year);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.api-version-graph-table th.year-separator,
.api-version-graph-table td.year-separator { 
  border-left: var(--border-year-separator);
}


.api-version-graph-table thead th { 
  background: var(--gradient-header) !important;
}

.api-version-graph-table thead th.year-header { 
  background: var(--gradient-year) !important;
}

.api-version-graph-table td.lts { 
  background: var(--color-lts);
}

.api-version-graph-table td.lts-dev { 
  background: var(--color-lts-dev);
}

.api-version-graph-table td.preview { 
  background: var(--color-preview);
}


.api-version-graph-table tbody tr:hover { 
  background: var(--bg-hover-row);
}

.api-version-graph-table tbody tr:hover .api-name {
  background: var(--bg-api-name) !important;
}

.api-version-graph-table tbody tr.highlight .api-name {
  background: var(--color-highlight-subtle) !important;
}

.api-version-graph-table tbody tr.highlight td.lts,
.api-version-graph-table tbody tr.highlight td.preview {
  background: var(--color-highlight);
}

.api-version-graph-table tbody tr.highlight td.lts-dev {
  background: var(--color-highlight-subtle);
}

.api-version-graph-table th.highlight-col {
  background: var(--color-highlight-hover) !important;
  box-shadow: var(--shadow-highlight) !important;
  position: relative;
  z-index: 15 !important;
}

.api-version-graph-table td.highlight-cell {
  background: var(--color-highlight) !important;
  box-shadow: var(--shadow-cell-inset) !important;
}

.api-version-graph-table .api-name.highlight-api-name {
  background: var(--color-highlight-subtle);
  font-weight: 700;
}

.api-version-graph-table tr.hidden { 
  display: none;
}