.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; 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(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.tl-tools li { border: 1px solid var(--tr-panel-line); border-radius: 10px; background: var(--tr-panel); padding: 1rem 1.1rem; display: grid; gap: 0.5rem; align-content: start; }
.tl-tools h3 { margin: 0; font-size: 1.05rem; }
.tl-tools p { margin: 0; line-height: 1.5; color: var(--tr-muted); }
.tl-tools code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.82rem; }
.tl-status { display: inline-block; margin-left: 0.4rem; font-size: 0.75rem; font-weight: 600; color: var(--tr-recommended); }
.tl-status--in-development { color: var(--tr-development); }