.tr-main { padding-bottom: var(--s6, 4rem); }
.tr-hero { display: grid; gap: 0.75rem; padding-top: 2.5rem; padding-bottom: 1.5rem; max-width: 78ch; margin-inline: auto; }
.tr-hero h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.02em; }
.tr-hero p { margin: 0; line-height: 1.55; color: var(--tr-muted); }
.tr-hero .tr-lead { color: var(--tr-ink); font-size: 1.08rem; }
.tr-key { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.875rem; }
.tr-key span { display: inline-flex; align-items: center; gap: 0.4rem; }
.tr-swatch { display: inline-block; width: 0.95rem; height: 0.95rem; border-radius: 3px; }
.tr-swatch--endpoint { background: var(--tr-endpoint); }
.tr-swatch--endpoint-few { background: var(--tr-endpoint-few); outline: 1px dashed var(--tr-endpoint); outline-offset: -1px; }
.tr-swatch--reference { background: repeating-linear-gradient(135deg, var(--tr-reference) 0 2px, var(--tr-reference-wash) 2px 5px); outline: 1px solid var(--tr-reference); outline-offset: -1px; }
.tr-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-top: 2rem; min-width: 0; }
.tr-section h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.tr-sub { margin: 0; font-size: 0.9rem; color: var(--tr-muted); line-height: 1.5; max-width: 80ch; }
.tr-tools { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; counter-reset: tool; }
.tr-tools li { border: 1px solid var(--tr-panel-line); border-top: 3px solid var(--tr-recommended); border-radius: 10px; background: var(--tr-panel); padding: 1rem 1.1rem; display: grid; gap: 0.5rem; align-content: start; }
.tr-tools h3 { margin: 0; font-size: 1.05rem; }
.tr-tools h3::before { counter-increment: tool; content: "Recommended " counter(tool); color: var(--tr-recommended); font-weight: 600; font-size: 0.8rem; display: block; letter-spacing: 0.02em; }
.tr-tools p, .tr-dev { margin: 0; line-height: 1.5; color: var(--tr-muted); }
.tr-dev { border-left: 3px solid var(--tr-development); padding-left: 0.8rem; max-width: 80ch; }
.tr-dev b { color: var(--tr-ink); }
.tr-findings { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.6rem; max-width: 82ch; line-height: 1.55; }
.tr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.tr-figure { margin: 0; border: 1px solid var(--tr-panel-line); border-radius: 12px; background: var(--tr-panel); padding: 1rem 1.1rem; display: grid; gap: 0.6rem; min-width: 0; }
.tr-figure figcaption { display: grid; gap: 0.25rem; }
.tr-figure h3 { margin: 0; font-size: 1.1rem; }
.tr-note { margin: 0; font-size: 0.85rem; color: var(--tr-muted); line-height: 1.5; max-width: 90ch; }
.tr-scroll { overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }
.tr-scroll svg { display: block; max-width: none; }
.tr-hint { display: none; margin: 0; font-size: 0.8rem; color: var(--tr-muted); }
.tr-numbers summary { cursor: pointer; font-size: 0.85rem; color: var(--tr-muted); }
.tr-main table { border-collapse: collapse; width: 100%; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.tr-main th, .tr-main td { text-align: left; padding: 0.35rem 0.55rem; border-bottom: 1px solid var(--tr-panel-line); vertical-align: top; }
.tr-main thead th { color: var(--tr-muted); font-weight: 600; white-space: nowrap; }
.tr-main tbody th { font-weight: 500; }
.tr-num { text-align: right; white-space: nowrap; }
.tr-rates { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.4rem; line-height: 1.5; }
.tr-footer { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; padding-block: 2rem; }
.tr-footer nav { display: flex; gap: 1.25rem; }
.tr-chart text { font-family: inherit; font-size: 11.5px; fill: var(--tr-ink); text-anchor: middle; }
.tr-chart .tr-t-value { font-size: 13px; font-weight: 600; }
.tr-chart .tr-t-cost, .tr-chart .tr-t-muted, .tr-chart .tr-t-foot, .tr-chart .tr-t-axis, .tr-chart .tr-t-tick { fill: var(--tr-muted); }
.tr-chart .tr-t-cost { font-variant-numeric: tabular-nums; }
.tr-chart .tr-t-name { font-weight: 600; }
.tr-chart .tr-t-tag { fill: var(--tr-recommended); font-weight: 700; }
.tr-chart .tr-t-group { text-anchor: start; font-weight: 600; font-size: 12px; }
.tr-chart .tr-t-tick { text-anchor: end; dominant-baseline: middle; }
.tr-chart .tr-t-foot { text-anchor: end; }
.tr-chart .tr-t-axis { text-anchor: start; }
.tr-chart .tr-grid { stroke: var(--tr-grid); }
.tr-chart .tr-axis, .tr-chart .tr-group-line { stroke: var(--tr-axis); }
.tr-chart .tr-divider { stroke: var(--tr-axis); stroke-dasharray: 4 4; }
.tr-chart .tr-fill--endpoint { fill: var(--tr-endpoint); }
.tr-chart .tr-fill--endpoint-few { fill: var(--tr-endpoint-few); stroke: var(--tr-endpoint); stroke-dasharray: 3 2; }
.tr-chart .tr-fill--reference { stroke: var(--tr-reference); }
.tr-chart .tr-hatch-wash { fill: var(--tr-reference-wash); }
.tr-chart .tr-hatch-line { fill: var(--tr-reference); }
.tr-chart .tr-logo-box { fill: var(--tr-logo-fill); stroke: var(--tr-logo-line); }
@media (max-width: 640px) {
  .tr-hero { padding-top: 1.5rem; }
  .tr-figure { padding: 0.8rem; }
  .tr-hint { display: block; }
}
.tl-tools { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tl-tools li { min-width: 0; border: 1px solid var(--tr-panel-line); border-radius: 14px; background: var(--tr-panel); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.tl-tools h3 { margin: 0; max-width: 28ch; font: 500 28px/1.15 var(--serif); letter-spacing: -.02em; }
.tl-tools p { margin: 0; line-height: 1.5; color: var(--tr-muted); }
.tr-main code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.82rem; }
.tl-status { display: inline-block; padding: 4px 8px; border-radius: 5px; background: var(--gold-wash); font: 11px/1.3 var(--sans); color: var(--tr-recommended); }
.tl-status--in-development { color: var(--tr-development); }
.tl-page .tr-hero { max-width: var(--shell); padding-block: 76px 52px; gap: 22px; }
.tl-page .tr-hero h1 { font: 500 clamp(44px, 5.4vw, 74px)/1.05 var(--serif); letter-spacing: -.035em; }
.tl-page .tr-hero .kicker, .tl-setup .kicker, .tl-section-heading .kicker { color: var(--gold); margin: 0 0 16px; }
.tl-page .tr-hero .kicker { margin-bottom: 0; }
.tl-page .tr-hero .tr-lead { font-size: 19px; color: var(--text-2); max-width: 46ch; }
.tl-page .quiet { width: fit-content; font-size: 14px; }
.tl-setup { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; padding-block: 38px 42px; border-block: 1px solid var(--line); }
.tl-setup h2 { font: 500 clamp(28px, 3vw, 38px)/1.12 var(--serif); letter-spacing: -.025em; }
.tl-setup p:not(.kicker) { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.tl-setup h2 + p { margin-top: 18px; max-width: 40ch; }
.tl-setup__commands { display: grid; align-content: start; gap: 16px; min-width: 0; }
.tl-setup .tl-requirement { font-size: 12px; color: var(--muted); }
.tl-command { min-width: 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.tl-command__heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; color: var(--muted); font-size: 11px; }
.tl-command pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.tl-copy { flex-shrink: 0; padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 5px; background: var(--bg); color: var(--text); font: inherit; cursor: pointer; }
.tl-copy:hover { border-color: var(--blue); color: var(--blue); }
.tl-copy:focus-visible, .tl-details summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
html:not(.js) .tl-copy { display: none; }
.tl-details { border-top: 1px solid var(--line); padding-top: 14px; font-size: 14px; }
.tl-details summary { cursor: pointer; color: var(--text-2); }
.tl-details p { margin-top: 14px; line-height: 1.65; }
.tl-details .quiet { display: inline-block; margin-top: 14px; }
.tl-catalog { padding-top: 64px; gap: 28px; }
.tl-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.tl-section-heading h2 { font: 500 clamp(28px, 3vw, 38px)/1.12 var(--serif); }
.tl-section-heading > p { max-width: 30ch; font-size: 14px; line-height: 1.6; color: var(--muted); }
.tl-tool-heading { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; }
.tl-kind { font: 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tl-fit { font-size: 15px; }
.tl-tools .tl-command { margin-top: auto; }
.tl-tools .tl-details p { margin-top: 14px; }
@media (max-width: 820px) {
  .tl-setup { gap: 32px; grid-template-columns: minmax(0, 1fr); }
  .tl-setup h2 + p { max-width: 55ch; }
  .tl-tools { grid-template-columns: minmax(0, 1fr); }
  .tl-section-heading { align-items: start; flex-direction: column; gap: 16px; }
  .tl-section-heading > p { max-width: 44ch; }
}
@media (max-width: 640px) {
  .tl-page .tr-hero { padding-block: 42px 32px; gap: 18px; }
  .tl-page .tr-hero .tr-lead { font-size: 17px; }
  .tl-catalog { padding-top: 40px; }
  .tl-tools li { padding: 22px; }
  .tl-tools h3 { font-size: 26px; }
  .tr-footer nav { flex-wrap: wrap; }
}