/* ───────────── Telemetry lake page (/platform-telemetry-lake/) ─────────────
   Extras on top of pages.css: hero checklist, the lake architecture diagram,
   illustrated flow cards, the advantages bento, the capabilities explorer (live product windows) and big final stats. */

/* ───── Hero: every signal in one lake ─────
   The live window (APM) sits in front; stills of the other signals fan
   out behind it in depth, and a mint glow under them reads as the lake's surface. Only the front window is live. */
.tl-hero { padding-bottom: 72px; }
.tl-hero::before { top: 90px; height: 470px; }
.tl-hero .tl-specs { margin-top: 28px; }
.tl-deck { position: relative; margin-top: 56px; padding: 0 24px; perspective: 1700px; perspective-origin: 50% 40%; }
.page-hero.is-app .tl-deck .hero-shot { position: relative; z-index: 3; max-width: 900px; margin: 0 auto; }
.tl-deck .cxw { box-shadow: 0 0 0 1px rgba(19,233,137,.18), 0 50px 120px -40px rgba(19,233,137,.4), 0 40px 80px -30px rgb(0 0 0 / var(--sh)); }
/* The deck's label sits above the window on the page itself, as a plain eyebrow. It used to be a
   pill straddling the window's top edge, which needed a filled background to stay readable —
   the box existed to solve a problem that moving the text 20px up removes. */
.tl-shot-tag { position: absolute; z-index: 4; left: 50%; top: -34px; translate: -50% 0; font-family: var(--mono); font-size: 12.5px; color: var(--accent); white-space: nowrap; }
.tl-cards { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform-style: preserve-3d; }
.tl-card { position: absolute; width: 440px; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgb(var(--ink) / .1); background: var(--bg-1); box-shadow: 0 30px 60px -20px rgb(0 0 0 / var(--sh)); animation: tl-float 9s ease-in-out infinite; }
.tl-card img { display: block; width: 100%; height: auto; }
/* A plain rectangle on the card's solid inner edge. It keeps a background because a hairline
   alone is unreadable over a screenshot, but it is not a pill: square, evenly inset, no outline.
   Each card fades towards its outer edge, so a label anchored there floated over nothing and was
   clipped by the card's corner — it belongs on the side that stays solid. */
.tl-card figcaption {
  position: absolute; top: 12px; z-index: 1;
  padding: 5px 10px; border-radius: 4px; background: rgb(6 10 8 / .92);
  font-family: var(--mono); font-size: 12px; line-height: 1; color: var(--mint);
}
.tl-card[class*="tl-l"] figcaption { right: 14px; }
.tl-card[class*="tl-r"] figcaption { left: 14px; }
/* left cards face right, right cards face left; each step back sits further out, deeper and fainter. The inner
   edge tucks under the live window and the outer edge fades, so the fan reads as one surface. */
.tl-l1 { right: calc(50% + 340px); top: 0;   transform: rotateY(24deg) translateZ(-120px); opacity: .92; }
.tl-l2 { right: calc(50% + 380px); top: 44%; transform: rotateY(24deg) translateZ(-200px); opacity: .88; animation-delay: -3s; }
.tl-r1 { left: calc(50% + 340px);  top: 0;   transform: rotateY(-24deg) translateZ(-120px); opacity: .92; animation-delay: -1.5s; }
.tl-r2 { left: calc(50% + 380px);  top: 44%; transform: rotateY(-24deg) translateZ(-200px); opacity: .88; animation-delay: -4.5s; }
/* the back row: one card up behind each top corner of the live window, rising above the front pair, and one
   further out behind the front two. Their labels sit on the outer side, which the front cards don't cover. */
.tl-l4 { right: calc(50% + 260px); top: -26%; transform: rotateY(20deg) translateZ(-460px); opacity: .7; animation-delay: -5s; }
.tl-l3 { right: calc(50% + 600px); top: 20%;  transform: rotateY(30deg) translateZ(-560px); opacity: .6; animation-delay: -6s; }
.tl-r4 { left: calc(50% + 260px);  top: -26%; transform: rotateY(-20deg) translateZ(-460px); opacity: .7; animation-delay: -2s; }
.tl-r3 { left: calc(50% + 600px);  top: 20%;  transform: rotateY(-30deg) translateZ(-560px); opacity: .6; animation-delay: -7.5s; }
.tl-card[class*="tl-l"] img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.tl-card[class*="tl-r"] img { -webkit-mask-image: linear-gradient(270deg, transparent, #000 35%); mask-image: linear-gradient(270deg, transparent, #000 35%); }
.tl-card[class*="tl-l"] figcaption { left: auto; right: 30%; }
.tl-card[class*="tl-r"] figcaption { left: 30%; }
.tl-card:is(.tl-l3, .tl-l4) figcaption { right: auto; left: 18%; } .tl-card:is(.tl-r3, .tl-r4) figcaption { left: auto; right: 18%; }
@keyframes tl-float { 50% { translate: 0 -10px; } }
.tl-surface { position: absolute; z-index: 1; left: 50%; bottom: -90px; width: min(1600px, 130%); height: 260px; translate: -50% 0; pointer-events: none; background: radial-gradient(50% 45% at 50% 30%, rgba(19,233,137,.22), rgba(34,211,238,.06) 55%, transparent 75%); }
.tl-surface::before { content: ""; position: absolute; left: 10%; right: 10%; top: 30%; height: 1px; background: linear-gradient(90deg, transparent, rgba(134,255,201,.55), transparent); }

/* Four claims as one spec line: hairline-separated, the way .proof and .facts set out a figure.
   They were pills with green ticks, which is every SaaS hero ever drawn. */
.tl-specs { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; max-width: 820px; margin: 34px auto 0; }
.tl-specs li { padding: 2px 22px; font-size: 15px; line-height: 1.5; color: var(--fg-2); box-shadow: -1px 0 0 var(--line-2); }
.tl-specs li:first-child { box-shadow: none; }

.tl-inline { color: var(--mint); border-bottom: 1px solid rgba(134,255,201,.35); transition: color .2s, border-color .2s; }
.tl-inline:hover { color: var(--fg-0); border-color: var(--fg-0); }

/* ───── Architecture: Sources → Telemetry Lake → Access ───── */
.tl-arch { display: grid; grid-template-columns: minmax(0, 220px) 40px minmax(0, 1fr) 40px minmax(0, 236px); align-items: stretch; }
.tl-col { position: relative; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--card-a), var(--card-b)); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.tl-col > .eyebrow { margin-bottom: 4px; }
.tl-sources, .tl-access { align-self: center; }
.tl-stack { display: flex; flex-direction: column; gap: 10px; }
.tl-col svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.tl-src { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: rgb(var(--ink) / .02); font-size: 14.5px; color: var(--fg); transition: border-color .2s, background .2s; }
.tl-src svg { color: var(--mint); }
.tl-src:hover { border-color: rgba(19,233,137,.45); background: rgba(19,233,137,.06); }
.tl-wires { padding-top: 14px; border-top: 1px dashed var(--line-2); display: flex; flex-wrap: wrap; gap: 8px; }
.tl-wire { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg-2); transition: color .2s, border-color .2s; }
.tl-wire:hover { color: var(--fg-0); border-color: rgb(var(--ink) / .35); }

/* connector between columns */
.tl-conn { position: relative; align-self: center; height: 2px; margin: 0 4px; background: linear-gradient(90deg, rgba(19,233,137,.15), rgba(19,233,137,.8)); }
.tl-conn::after { content: ""; position: absolute; right: -2px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: translateY(-50%) rotate(45deg); }

.tl-lake { border-color: rgba(19,233,137,.4); background: radial-gradient(90% 60% at 50% 0%, rgba(19,233,137,.12), transparent 70%), linear-gradient(180deg, var(--card-a), var(--card-b)); box-shadow: 0 0 0 1px rgba(19,233,137,.08), 0 40px 120px -50px rgba(19,233,137,.45); }
.tl-lake-head { display: flex; align-items: center; justify-content: center; gap: 10px; padding-bottom: 4px; }
.tl-lake-head strong { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.tl-box { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: rgb(var(--ink) / .025); transition: border-color .2s, background .2s; }
a.tl-box:hover { border-color: rgba(19,233,137,.45); background: rgba(19,233,137,.05); }
.tl-box b { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.tl-box b svg { color: var(--mint); }
.tl-box p { font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.tl-box .link { font-size: 13.5px; margin-top: 2px; }
.tl-box .eyebrow { margin-bottom: 2px; font-size: 11px; }
.tl-streama { align-items: center; text-align: center; border-color: rgba(19,233,137,.28); background: rgba(19,233,137,.06); }
.tl-streama b { font-size: 18px; }
.tl-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-chips a { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(19,233,137,.3); background: rgba(19,233,137,.07); font-size: 13.5px; color: var(--mint); transition: background .2s, color .2s; }
.tl-chips a:hover { background: rgba(19,233,137,.18); color: var(--fg-0); }
.tl-storage { border-color: rgba(34,211,238,.3); background: rgba(34,211,238,.05); }
.tl-storage .eyebrow { color: var(--cyan); }
a.tl-storage:hover { border-color: rgba(34,211,238,.6); background: rgba(34,211,238,.08); }

.tl-acc { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgb(var(--ink) / .02); text-align: center; transition: border-color .2s, background .2s; }
a.tl-acc:hover { border-color: rgba(19,233,137,.45); background: rgba(19,233,137,.06); }
.tl-acc b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--fg); }
.tl-acc b svg { color: var(--mint); }
.tl-acc > span { font-size: 12.5px; line-height: 1.45; color: var(--fg-2); }
.tl-olly { border-color: rgba(19,233,137,.5); background: rgba(19,233,137,.1); }
.tl-olly img { height: 26px; width: auto; }
.tl-pills { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tl-pills a { display: inline-block; font-family: var(--mono); font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg); transition: border-color .2s, color .2s; }
.tl-pills a:hover { border-color: var(--accent); color: var(--mint); }

/* ───── Light-theme illustrations, inverted for the dark theme ───── */
.tl-ill { border-radius: 12px; overflow: hidden; }
.tl-ill img { display: block; width: 100%; height: auto; filter: var(--flip, invert(1) hue-rotate(180deg) brightness(.92) contrast(1.05)); mix-blend-mode: var(--flip-blend, screen); }

/* flow cards: illustration on top */
.tl-flow .step .tl-ill { margin: -8px -8px 26px; aspect-ratio: 800 / 600; display: grid; place-items: center; background: radial-gradient(closest-side, rgba(19,233,137,.08), transparent); }
.tl-flow .step .tl-ill img { width: 100%; height: 100%; object-fit: contain; }

/* ───── Advantages bento ───── */
.tl-bento { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px; }
.tl-adv { padding: 32px; display: flex; flex-direction: column; }
.tl-adv h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 12px; }
.tl-adv p { font-size: 15.5px; line-height: 1.6; color: var(--fg-2); }
.tl-adv .tl-ill { margin-top: auto; padding-top: 24px; }
.tl-adv-tall { grid-row: span 2; }
.tl-ill-sm img { max-width: 360px; margin: 0 auto; }
.tl-list { list-style: none; margin-top: 20px; display: grid; gap: 10px; }
.tl-list li { position: relative; padding-left: 26px; font-size: 15px; color: var(--fg); }
.tl-list li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 11px; height: 6px; border-left: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent); transform: rotate(-45deg); }

/* ───── Capabilities explorer ───── */
.tl-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 48px; }
.tl-tab { font: inherit; font-size: 13.5px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--fg-2); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.tl-tab:hover { color: var(--fg); border-color: rgb(var(--ink) / .3); }
.tl-tab[aria-selected="true"] { color: #000; background: var(--accent); border-color: var(--accent); }
.tl-tab:focus-visible, .tl-item:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

.tl-explorer { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: center; }
.tl-panel .eyebrow { margin-bottom: 18px; }
.tl-items { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.tl-item { width: 100%; text-align: left; font: inherit; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; padding: 16px 0 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--fg-3); cursor: pointer; position: relative; transition: color .2s; }
.tl-item::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; transform: translateY(-50%); background: var(--line-2); transition: background .2s, box-shadow .2s; }
.tl-item:hover { color: var(--fg); }
.tl-item[aria-current] { color: var(--fg); }
.tl-item[aria-current]::before { background: var(--accent); box-shadow: 0 0 10px rgba(19,233,137,.8); }
.tl-cat-link { margin-top: 26px; }

.tl-stage > [hidden] { display: none !important; } /* .cxw sets its own display */
.tl-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.tl-caption b { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--fg-2); }
.tl-caption .link { font-size: 14px; }
.tl-caption [hidden] { display: none; }

/* ───── Final stats ───── */
.tl-stats b { margin: 0 0 8px; font-size: clamp(34px, 3.6vw, 46px); line-height: 1; font-weight: 600; letter-spacing: -0.045em; color: var(--accent); }
.tl-stats div { display: flex; flex-direction: column; }
.tl-stats span { color: var(--fg-2); }

/* ───── Responsive ───── */
@media (max-width: 1500px) {
  .tl-card { width: 360px; }
  .tl-l1, .tl-l2 { right: calc(50% + 350px); }
  .tl-r1, .tl-r2 { left: calc(50% + 350px); }
  .tl-l2, .tl-r2 { top: 36%; } /* shorter cards: keep the pair touching */
  .tl-l3 { right: calc(50% + 520px); } .tl-r3 { left: calc(50% + 520px); }
  .tl-l4 { right: calc(50% + 240px); } .tl-r4 { left: calc(50% + 240px); }
}
@media (max-width: 1200px) {
  .page-hero.is-app .tl-deck .hero-shot { max-width: 820px; }
  .tl-card { width: 300px; }
  .tl-l1, .tl-l2 { right: calc(50% + 320px); }
  .tl-r1, .tl-r2 { left: calc(50% + 320px); }
}
.tl-phone { display: none; }
@media (max-width: 1120px) { /* the fan doesn't fit: the composed image (deck/mobile.webp) replaces cards and live window */
  .tl-cards, .page-hero.is-app .tl-deck .hero-shot { display: none; }
  .tl-phone { display: block; position: relative; z-index: 3; max-width: 560px; margin: -24px auto 0; }
  .tl-phone img { display: block; width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 6%, #000 88%, transparent);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 6%, #000 88%, transparent); mask-composite: intersect; }
}
@media (max-width: 960px) { .tl-deck { margin-top: 44px; padding: 0; } }
@media (prefers-reduced-motion: reduce) { .tl-card { animation: none; } }
@media (max-width: 1120px) {
  .tl-arch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .tl-arch .tl-conn { display: none; }
  .tl-lake { grid-column: 1 / -1; order: -1; }
  .tl-sources, .tl-access { align-self: stretch; }
  .tl-explorer { gap: 40px; }
}
@media (max-width: 960px) {
  .tl-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tl-adv-tall { grid-row: auto; grid-column: 1 / -1; }
  .tl-adv-tall .tl-ill { max-width: 520px; margin-left: auto; margin-right: auto; width: 100%; }
  .tl-explorer { grid-template-columns: minmax(0, 1fr); }
  .tl-items { flex-direction: row; flex-wrap: wrap; gap: 8px; border: 0; }
  .tl-item { width: auto; font-size: 14px; letter-spacing: 0; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--fg-2); }
  .tl-item::before { display: none; }
  .tl-item[aria-current] { color: var(--mint); border-color: rgba(19,233,137,.5); background: rgba(19,233,137,.08); }
  .tl-tabs { margin-bottom: 36px; }
  .tl-cat-link { margin-top: 18px; }
}
@media (max-width: 720px) {
  .tl-arch { grid-template-columns: minmax(0, 1fr); }
  .tl-lake { order: 0; }
  .tl-arch .tl-conn { display: block; justify-self: center; width: 2px; height: 28px; margin: 0; background: linear-gradient(180deg, rgba(19,233,137,.15), rgba(19,233,137,.8)); }
  .tl-arch .tl-conn::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
  .tl-arch { gap: 10px; }
  .tl-sources .tl-stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tl-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .tl-hero { padding-bottom: 48px; }
  .tl-shot-tag { font-size: 10.5px; top: -28px; }
  /* Two columns on a phone, so the rules still line up instead of wrapping mid-row. */
  .tl-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; max-width: 340px; }
  .tl-specs li { padding: 0 12px; font-size: 13.5px; text-align: center; }
  .tl-specs li:nth-child(odd) { box-shadow: none; }
  .tl-col { padding: 16px; }
  .tl-bento { grid-template-columns: minmax(0, 1fr); }
  .tl-adv { padding: 26px; }
  .tl-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-left: -20px; margin-right: -20px; padding: 0 20px 6px; scrollbar-width: none; }
  .tl-tabs::-webkit-scrollbar { display: none; }
  .tl-tab { flex: 0 0 auto; }
  .tl-caption { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* light skin: the cards and the phone composite have light twins (deck/*-light.webp, made by tools/deck-cards with THEME=light) */
:root:not([data-theme="light"]) .tl-phone.on-light, :root[data-theme="light"] .tl-phone.on-dark { display: none; }
:root[data-theme="light"] .tl-card figcaption { background: rgb(255 255 255 / .94); box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }

/* Light skin: small green text uses --mint (≥4.5:1 on the light surfaces); --accent stays for dots, fills,
   borders and large numbers. Light only, so the dark skin is unchanged. */
:root[data-theme="light"] /* The deck's label sits above the window on the page itself,
:root[data-theme="light"] as a plain eyebrow. It used to be a
   pill straddling the window's top edge,
:root[data-theme="light"] which needed a filled background to stay readable —
   the box existed to solve a problem that moving the text 20px up removes. */
.tl-shot-tag { color: var(--mint); }

/* ───── Live query benchmark (the medium account on benchmarks.coralogix.com; page.js keeps it live) ───── */
.tl-bench { margin-top: 64px; padding: clamp(28px, 4vw, 46px); border: 1px solid var(--line); border-radius: 18px; text-align: left;
  background: linear-gradient(145deg, rgba(19,233,137,.06), transparent 45%), rgb(var(--ink) / .018); }
.tl-bench-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; }
/* the live heartbeat, as on benchmarks.coralogix.com: a beacon that pulses, and the countdown to the next refresh */
.tl-live { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: 13px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tl-beacon { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(19,233,137,.5); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .tl-beacon { animation: tl-beacon 1.6s ease-out infinite; }
  @keyframes tl-beacon { 0% { box-shadow: 0 0 0 0 rgba(19,233,137,.55); opacity: 1; } 70% { box-shadow: 0 0 0 7px rgba(19,233,137,0); opacity: .75; } 100% { box-shadow: 0 0 0 0 rgba(19,233,137,0); opacity: 1; } }
}
.tl-bench-head h3 { font-size: clamp(27px, 3.2vw, 42px); font-weight: 560; letter-spacing: -.04em; }
.tl-bench-link { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; color: var(--mint); }
.tl-bench-link i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(19,233,137,.65); }
.tl-bench-intro { max-width: 760px; margin-top: 20px; font-size: 15px; line-height: 1.65; color: var(--fg-2); }
.tl-bench-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 30px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-1); }
.tl-bench-facts div { min-width: 0; padding: 22px 24px; }
.tl-bench-facts div + div { border-left: 1px solid var(--line); }
.tl-bench-facts b, .tl-bench-facts span { display: block; }
.tl-bench-facts b { font-size: clamp(26px, 2.8vw, 36px); line-height: 1; font-weight: 580; letter-spacing: -.045em; color: var(--fg-0); white-space: nowrap; }
.tl-bench-facts span { margin-top: 10px; font-size: 12px; line-height: 1.35; color: var(--fg-2); }
.tl-bench-engines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.tl-bench-engine { min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-1); }
.tl-bench-engine-head b { display: block; font-size: 17px; font-weight: 600; color: var(--fg-0); }
.tl-bench-engine-head span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--fg-3); }
.tl-bench-p50 { margin-top: 22px; }
.tl-bench-p50 b { display: block; font-size: clamp(40px, 4.6vw, 60px); line-height: 1; font-weight: 580; letter-spacing: -.05em; color: var(--accent); white-space: nowrap; }
.tl-bench-p50 span { display: block; margin-top: 8px; font-size: 12.5px; color: var(--fg-2); }
.tl-bench-bars { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.tl-bench-bars li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 64px; align-items: center; gap: 12px; }
.tl-bench-bars span { font: 11px var(--mono); color: var(--fg-3); }
.tl-bench-bars i { position: relative; height: 8px; border-radius: 4px; background: rgb(var(--ink) / .06); overflow: hidden; }
.tl-bench-bars em { position: absolute; inset: 0 auto 0 0; width: max(var(--w), 3px); border-radius: 4px; background: var(--accent); transition: width .8s var(--ease); }
.tl-bench-bars li:nth-child(2) em { opacity: .75; } .tl-bench-bars li:nth-child(3) em { opacity: .55; }
.tl-bench-bars b { font: 500 12.5px var(--mono); color: var(--fg); text-align: right; white-space: nowrap; }
.tl-bench-n { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-2); }
.tl-bench-n b { color: var(--fg-0); font-weight: 600; }
:root[data-theme="light"] .tl-bench-link { color: var(--mint); }
@media (max-width: 960px) {
  .tl-bench-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-bench-facts div:nth-child(3) { border-left: 0; }
  .tl-bench-facts div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tl-bench-engines { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .tl-bench { padding: 25px 18px; }
  .tl-bench-head { display: block; }
  .tl-bench-link { margin-top: 20px; }
  .tl-bench-engine { padding: 20px; }
  }
@media (prefers-reduced-motion: reduce) { .tl-bench-bars em { transition: none; } }
.tl-bench-link .tl-ext { flex: 0 0 auto; margin-left: -2px; transition: transform .2s ease; }
.tl-bench-link:hover .tl-ext { transform: translate(2px, -2px); }
.tl-bench-link .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }