| .synth { |
| letter-spacing: 0; |
| } |
| .synth * { |
| letter-spacing: 0; |
| } |
| .synth-head { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| flex-wrap: wrap; |
| } |
| .synth-head h1 { |
| font-family: var(--f-body); |
| font-size: 25px; |
| } |
| .synth-title { |
| display: flex; |
| align-items: baseline; |
| gap: 12px; |
| flex-wrap: wrap; |
| } |
| .synth-head .synth-identity { |
| font: 11px var(--f-mono); |
| color: var(--muted); |
| } |
| .release-label { |
| font: 12px var(--f-mono); |
| color: var(--accent); |
| } |
| .synth-nav { |
| display: flex; |
| gap: 22px; |
| border-bottom: 1px solid var(--line); |
| overflow: auto; |
| } |
| .synth-nav a { |
| white-space: nowrap; |
| padding: 10px 0; |
| text-decoration: none; |
| color: var(--muted); |
| border-bottom: 2px solid transparent; |
| } |
| .synth-nav a[aria-current="page"] { |
| color: var(--ink); |
| border-color: var(--accent); |
| } |
| .synth-status { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| font-size: 13px; |
| flex-wrap: wrap; |
| } |
| .synth-dot { |
| width: 7px; |
| height: 7px; |
| display: inline-block; |
| border-radius: 50%; |
| background: #137667; |
| } |
| .synth-status[data-state="stale"] .synth-dot, |
| .synth-status[data-state="error"] .synth-dot { |
| background: #b86a15; |
| } |
| .synth-status[data-state="stopped"] .synth-dot { |
| background: #7d8791; |
| } |
| .synth-icon { |
| width: 34px; |
| height: 34px; |
| border: 1px solid var(--line); |
| border-radius: 4px; |
| background: var(--surface); |
| color: var(--ink); |
| display: inline-grid; |
| place-items: center; |
| cursor: pointer; |
| flex: none; |
| } |
| .synth-icon svg { |
| width: 16px; |
| height: 16px; |
| } |
| .synth-icon:disabled { |
| opacity: 0.45; |
| cursor: wait; |
| } |
| .synth-kpis { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| border-top: 1px solid var(--line); |
| border-bottom: 1px solid var(--line); |
| } |
| .synth-kpis[data-columns="5"] { |
| grid-template-columns: repeat(5, minmax(0, 1fr)); |
| } |
| .synth-title select { |
| min-height: 30px; |
| padding: 3px 6px; |
| font-size: 12px; |
| } |
| .synth-kpi { |
| padding: 20px 16px; |
| min-width: 0; |
| border-right: 1px solid var(--line); |
| } |
| .synth-kpi:first-child { |
| padding-left: 0; |
| } |
| .synth-kpi:last-child { |
| border-right: 0; |
| } |
| .synth-kpi strong { |
| display: block; |
| font: 500 30px/1.4 var(--f-mono); |
| } |
| .synth-kpi span { |
| color: var(--muted); |
| font-size: 13px; |
| } |
| .synth-progress { |
| display: flex; |
| height: 9px; |
| background: var(--sunk); |
| width: 100%; |
| overflow: hidden; |
| } |
| .synth-progress > span { |
| height: 100%; |
| } |
| .synth-progress .done { |
| background: #167d70; |
| } |
| .synth-progress .running { |
| background: #488ab1; |
| } |
| .synth-progress .failed { |
| background: #c66740; |
| } |
| .synth-facts { |
| display: flex; |
| gap: 12px 28px; |
| flex-wrap: wrap; |
| font-size: 13px; |
| color: var(--muted); |
| } |
| .synth-facts b { |
| color: var(--ink); |
| font-family: var(--f-mono); |
| font-weight: 500; |
| } |
| .synth-section { |
| padding-top: 20px; |
| border-top: 1px solid var(--line); |
| display: grid; |
| gap: 14px; |
| min-width: 0; |
| } |
| .synth-section > * { |
| min-width: 0; |
| } |
| .synth-section:first-child { |
| padding-top: 0; |
| border-top: 0; |
| } |
| .synth-section h2 { |
| font-family: var(--f-body); |
| font-size: 18px; |
| } |
| .synth-table { |
| overflow: auto; |
| min-width: 0; |
| } |
| .synth-table table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 13px; |
| } |
| .synth-table th { |
| text-align: left; |
| font-weight: 500; |
| color: var(--muted); |
| border-bottom: 1px solid var(--line); |
| padding: 9px 12px 9px 0; |
| } |
| .synth-table td { |
| border-bottom: 1px solid var(--line); |
| padding: 12px 12px 12px 0; |
| vertical-align: top; |
| overflow-wrap: anywhere; |
| } |
| .synth-table td:last-child, |
| .synth-table th:last-child { |
| padding-right: 0; |
| } |
| .synth-table th { |
| white-space: nowrap; |
| } |
| .synth-table .source { |
| min-width: 190px; |
| font-family: var(--f-mono); |
| font-size: 12px; |
| } |
| .synth-table .num { |
| font-family: var(--f-mono); |
| white-space: nowrap; |
| } |
| .synth-table .status-text { |
| white-space: nowrap; |
| } |
| .synth-empty { |
| color: var(--muted); |
| padding: 18px 0; |
| } |
| .synth-toolbar { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 12px; |
| flex-wrap: wrap; |
| } |
| .synth-toolbar select, |
| .synth-toolbar input { |
| font: inherit; |
| font-size: 13px; |
| color: var(--ink); |
| background: var(--surface); |
| border: 1px solid var(--line); |
| border-radius: 4px; |
| padding: 7px 10px; |
| min-width: 0; |
| } |
| .synth-toolbar input { |
| width: 220px; |
| max-width: 100%; |
| } |
| .synth-resource { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 20px; |
| } |
| .reference-details .synth-resource { |
| margin-block: 20px; |
| } |
| .synth-resource dl { |
| margin: 0; |
| display: grid; |
| grid-template-columns: 1fr auto; |
| gap: 7px; |
| font-size: 13px; |
| } |
| .synth-resource dt { |
| color: var(--muted); |
| } |
| .synth-resource dd { |
| margin: 0; |
| font-family: var(--f-mono); |
| } |
| .synth-resource progress { |
| width: 100%; |
| height: 5px; |
| accent-color: #488ab1; |
| grid-column: 1/-1; |
| } |
| .synth-callout { |
| border-left: 3px solid #b86a15; |
| padding: 4px 0 4px 14px; |
| font-size: 13px; |
| line-height: 1.8; |
| } |
| .synth-version-picker { |
| display: flex; |
| gap: 0; |
| flex-wrap: wrap; |
| width: fit-content; |
| border: 1px solid var(--line); |
| border-radius: 4px; |
| overflow: hidden; |
| position: sticky; |
| top: 0; |
| z-index: 3; |
| } |
| .synth-version-picker a { |
| border: 0; |
| border-right: 1px solid var(--line); |
| min-width: 66px; |
| padding: 9px 12px; |
| cursor: pointer; |
| font: 13px var(--f-mono); |
| color: var(--ink); |
| background: var(--surface); |
| text-decoration: none; |
| text-align: center; |
| } |
| .synth-version-picker a:last-child { |
| border-right: 0; |
| } |
| .synth-version-picker a[aria-current="page"] { |
| background: var(--ink); |
| color: var(--surface); |
| } |
| .synth-version-detail { |
| display: grid; |
| gap: 16px; |
| min-height: 280px; |
| } |
| .synth-version-heading { |
| display: flex; |
| align-items: baseline; |
| justify-content: space-between; |
| gap: 10px 20px; |
| flex-wrap: wrap; |
| } |
| .synth-version-heading > span { |
| font-size: 12px; |
| color: var(--muted); |
| } |
| .synth-version-delta { |
| max-width: 90ch; |
| font-size: 14px; |
| line-height: 1.9; |
| } |
| .synth-feature-section { |
| display: grid; |
| gap: 12px; |
| min-width: 0; |
| margin-top: 12px; |
| } |
| .synth-feature-section h3 { |
| font: 600 15px var(--f-body); |
| } |
| .synth-feature-section p { |
| font-size: 13px; |
| line-height: 1.9; |
| color: var(--muted); |
| } |
| .synth-version-table td:first-child { |
| width: 22%; |
| font-weight: 500; |
| } |
| .synth-version-overview td:first-child { |
| width: 62px; |
| white-space: nowrap; |
| font-family: var(--f-mono); |
| } |
| .synth-version-table td { |
| line-height: 1.85; |
| } |
| .synth-version-limits .synth-links { |
| margin-block: 16px 4px; |
| } |
| .synth-version-detail ul { |
| padding-left: 20px; |
| display: grid; |
| gap: 9px; |
| font-size: 14px; |
| } |
| .synth-version-detail h2 { |
| font: 700 20px var(--f-body); |
| } |
| .synth-meta { |
| display: flex; |
| gap: 10px 22px; |
| color: var(--muted); |
| font-size: 13px; |
| flex-wrap: wrap; |
| } |
| .synth-code { |
| background: var(--sunk); |
| border: 1px solid var(--line); |
| border-radius: 4px; |
| padding: 16px; |
| position: relative; |
| min-width: 0; |
| } |
| .synth-code pre { |
| margin: 0; |
| padding-right: 34px; |
| overflow: auto; |
| font: 12px/1.8 var(--f-mono); |
| white-space: pre; |
| tab-size: 4; |
| } |
| .synth-code .synth-icon { |
| position: absolute; |
| right: 8px; |
| top: 8px; |
| } |
| .synth-code-title { |
| font-size: 14px; |
| font-weight: 500; |
| } |
| .synth-steps { |
| display: grid; |
| gap: 24px; |
| } |
| .synth-steps section { |
| display: grid; |
| gap: 12px; |
| min-width: 0; |
| } |
| .synth-links { |
| display: flex; |
| gap: 12px 22px; |
| flex-wrap: wrap; |
| font-size: 13px; |
| } |
| .synth details { |
| border-bottom: 1px solid var(--line); |
| padding: 12px 0; |
| } |
| .synth summary { |
| cursor: pointer; |
| font-size: 14px; |
| } |
| .synth details > p { |
| padding-top: 10px; |
| font-size: 13px; |
| color: var(--muted); |
| } |
| .synth-samples { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 22px; |
| } |
| .synth-samples figure { |
| margin: 0; |
| min-width: 0; |
| } |
| .synth-samples img { |
| width: 100%; |
| aspect-ratio: 16/9; |
| object-fit: contain; |
| background: #10161c; |
| border: 1px solid var(--line); |
| } |
| .synth-samples figcaption { |
| padding-top: 12px; |
| display: grid; |
| gap: 6px; |
| font-size: 13px; |
| } |
| .synth-samples small { |
| color: var(--muted); |
| } |
| .synth-error { |
| color: #b34b35; |
| } |
| .synth-good { |
| color: #167d70; |
| } |
| .synth-skeleton { |
| min-height: 350px; |
| padding-top: 30px; |
| color: var(--muted); |
| } |
| .synth .subtle { |
| font-size: 13px; |
| color: var(--muted); |
| } |
| .synth-pager { |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| gap: 8px; |
| padding-top: 12px; |
| font: 12px var(--f-mono); |
| } |
| .synth-pager span { |
| margin-right: 8px; |
| } |
| @media (max-width: 900px) { |
| .synth-version-picker { |
| top: 56px; |
| } |
| } |
| @media (max-width: 760px) { |
| .synth-kpis[data-columns="5"] { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
| .synth-kpis { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
| .synth-kpi { |
| padding: 14px 12px; |
| } |
| .synth-kpi:nth-child(2) { |
| border-right: 0; |
| } |
| .synth-kpi:nth-child(n + 3) { |
| border-top: 1px solid var(--line); |
| } |
| .synth-kpi:nth-child(3) { |
| padding-left: 0; |
| } |
| .synth-kpi strong { |
| font-size: 25px; |
| } |
| .synth-resource { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 20px; |
| } |
| .synth-samples { |
| grid-template-columns: 1fr; |
| } |
| .synth-samples img { |
| max-height: 330px; |
| } |
| .synth-table table { |
| min-width: 600px; |
| } |
| .synth-nav { |
| gap: 20px; |
| } |
| .synth-version-picker { |
| width: 100%; |
| } |
| .synth-version-picker a { |
| flex: 1; |
| min-width: 44px; |
| padding: 8px 5px; |
| } |
| .synth-version-detail { |
| min-height: 0; |
| } |
| .synth-facts-table table { |
| min-width: 0; |
| table-layout: fixed; |
| } |
| .synth-facts-table th:first-child, |
| .synth-facts-table td:first-child { |
| width: 28%; |
| } |
| .synth-head h1 { |
| font-size: 24px; |
| } |
| } |
|
|
