*{box-sizing:border-box}
  body{margin:0;background:var(--plane);color:var(--ink);font-family:var(--sans);
    line-height:1.5;-webkit-font-smoothing:antialiased;}
  .wrap{max-width:1080px;margin:0 auto;padding:clamp(20px,4vw,56px) clamp(16px,4vw,40px) 72px;}
  .eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;}
  .masthead{border-bottom:1px solid var(--hairline);padding-bottom:26px;margin-bottom:34px;
    display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
  /* The cap is a guard against a runaway measure on a future long title, NOT a wrap point. Sized
     against the ACTUAL title -- "The Liquid Biopsy Research Landscape", 36 characters -- with a
     little headroom. It was 16ch against a 23-character title, which forced the heading into a
     narrow two-line column and left a dead gutter beside it. Headings tolerate a wider measure than
     body text, so the heading gets room while the LEDE keeps its ~52ch measure: using the width
     without widening the reading line. Re-check this if the title is ever lengthened. */
  h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,5vw,46px);line-height:1.04;
    margin:.28em 0 .18em;letter-spacing:-.01em;text-wrap:balance;max-width:38ch;}
  .lede{color:var(--secondary);font-size:clamp(15px,1.6vw,17px);max-width:52ch;margin:0;}
  /* Sits under the footer as the page's colophon (moved from the masthead at Nate's request,
     2026-08-24, for a cleaner opening). Left-aligned and unwrapped: at full width the lines are
     short, and nowrap would overflow a phone. */
  .provenance{font-size:12px;color:var(--muted);text-align:left;line-height:1.7;
    font-variant-numeric:tabular-nums;margin-top:10px;}
  .provenance b{color:var(--secondary);font-weight:600;}
  .themebtn{margin-top:10px;background:var(--card);color:var(--secondary);border:1px solid var(--hairline);
    border-radius:7px;padding:6px 11px;font:inherit;font-size:12px;cursor:pointer;}
  .themebtn:hover{color:var(--ink);border-color:var(--axis);}
  .themebtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

  /* Two cards only, so 1fr columns stretched each to ~530px of mostly empty card
     (Nate, 2026-08-24). Capped at 370px and centered instead; auto-fit still stacks
     them on a phone, and equal caps keep the pair symmetric. */
  .hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,370px));gap:16px;
    margin-bottom:40px;justify-content:center;}
  .tile{background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:22px 24px;}
  .tile.lead{padding:24px 26px;}
  .tile .k{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em;margin-bottom:8px;}
  /* Non-lead values sized up 2026-08-24 (Nate): at 36px the growth tile sat half empty
     beside the lead tile's 60px figure; the value is the card's content, so let it fill. */
  .tile .v{font-size:clamp(34px,4.6vw,52px);font-weight:650;letter-spacing:-.02em;line-height:1;}
  .tile.lead .v{font-size:clamp(40px,6vw,60px);color:var(--accent);}
  /* Display figures are set in the display face, with tabular lining figures so a
     column of numbers aligns. The site's claim is that every number traces to a source
     record; the numbers are the subject, so they get the typeface rather than being left
     in the interface sans. Revert = delete this rule. */
  .tile .v{font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;}
  .tile .u{font-size:13px;color:var(--secondary);margin-top:8px;}

  .section-head{margin:44px 2px 18px;}
  .section-head .eyebrow{color:var(--accent);}
  .section-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(22px,3vw,28px);margin:.2em 0 0;letter-spacing:-.01em;}
  .card{background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:22px 22px 12px;margin-bottom:22px;}
  .card h3{font-family:var(--serif);font-weight:600;font-size:20px;margin:0 0 3px;letter-spacing:-.01em;}
  .card .sub{color:var(--secondary);font-size:14px;margin:0 0 16px;max-width:66ch;}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  @media(max-width:720px){.grid2{grid-template-columns:1fr;}}
  .chart{position:relative;width:100%;}
  .chart svg{display:block;width:100%;height:auto;overflow:visible;}
  .chart svg text{font-family:var(--sans);}

  .legend{display:flex;flex-wrap:wrap;gap:12px 18px;margin:12px 2px 6px;}
  .lg{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--secondary);
    background:none;border:0;cursor:pointer;padding:2px 0;font-family:inherit;}
  .lg:hover{color:var(--ink);} .lg.off{opacity:.38;}
  .lg .kdot{width:10px;height:10px;border-radius:3px;flex:none;}
  .lg:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;}
  /* the growth chart's look-back control (2026-10-10): a text button inside the note under the chart */
  .linkbtn{font:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;
    text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}
  .linkbtn:hover{color:var(--ink);} .linkbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}

  .filters{display:flex;align-items:center;gap:10px;margin:2px 0 12px;flex-wrap:wrap;}
  .filters .lbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;}
  .seg{display:inline-flex;background:var(--card);border:1px solid var(--hairline);border-radius:9px;padding:3px;}
  .seg button{border:0;background:none;font:inherit;font-size:13px;color:var(--secondary);padding:5px 14px;border-radius:6px;cursor:pointer;}
  .seg button[aria-pressed="true"]{background:var(--accent);color:#fff;font-weight:600;}
  .seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .hint{font-size:12px;color:var(--muted);}

  .tip{position:absolute;pointer-events:none;background:var(--card);border:1px solid var(--hairline);
    border-radius:9px;padding:9px 11px;font-size:12.5px;box-shadow:0 6px 22px rgba(0,0,0,.13);
    min-width:150px;opacity:0;transition:opacity .09s;z-index:5;}
  .tip .ty{font-family:var(--serif);font-size:14px;font-weight:600;margin-bottom:6px;
    display:flex;justify-content:space-between;gap:12px;align-items:baseline;}
  .tip .ty .pf{font-family:var(--sans);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);font-weight:700;}
  .tip .row{display:flex;align-items:center;gap:8px;padding:2px 0;}
  .tip .row .key{width:12px;height:3px;border-radius:2px;flex:none;}
  .tip .row .nm{color:var(--secondary);flex:1;}
  .tip .row .vl{font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink);}
  .tip .tot{border-top:1px solid var(--hairline);margin-top:5px;padding-top:5px;font-weight:650;display:flex;justify-content:space-between;}
  .tip .ci{color:var(--muted);font-size:11.5px;margin-top:5px;font-variant-numeric:tabular-nums;}

  details{margin:6px 2px 4px;} summary{font-size:12.5px;color:var(--muted);cursor:pointer;padding:6px 0;}
  summary:hover{color:var(--secondary);} .tbl{overflow-x:auto;margin:6px 0 12px;}
  table{border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums;width:100%;}
  th,td{text-align:right;padding:5px 10px;border-bottom:1px solid var(--hairline);white-space:nowrap;}
  th:first-child,td:first-child{text-align:left;} thead th{color:var(--muted);font-weight:600;}
  .chip{display:inline-block;font-size:11px;padding:1px 7px;border-radius:20px;border:1px solid var(--hairline);color:var(--secondary);}
  .chip.company{background:var(--accent-soft);color:var(--accent);border-color:transparent;font-weight:600;}

  .method{background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:22px 24px;margin-top:34px;}
  .method h2{font-family:var(--serif);font-size:19px;margin:0 0 12px;}
  .method ul{margin:0;padding-left:18px;color:var(--secondary);font-size:13.5px;}
  .method li{margin-bottom:8px;} .method li:last-child{margin-bottom:0;} .method b{color:var(--ink);font-weight:600;}
  .flag{display:inline-block;background:var(--warn-bg);color:var(--warn);font-weight:700;font-size:10px;
    letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:5px;vertical-align:middle;}
  .wrap footer{margin-top:26px;color:var(--muted);font-size:12px;border-top:1px solid var(--hairline);padding-top:16px;line-height:1.7;}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
  /* drill-down affordance: only in-site (body.drillable set when the shared shell is present) */
  body.drillable svg .dhit{cursor:pointer;}

/* track page: the warm-palette vocabulary (RB5) */
.eyebrow{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;color:var(--secondary)}
.section-head .eyebrow{color:var(--secondary)}
.masthead{border-bottom:0;padding-bottom:0}
h1{font-weight:700;letter-spacing:-.02em;line-height:1.02}
.section-head h2{font-weight:700;letter-spacing:-.012em}
.card h3{font-weight:600}
.tile,.card{box-shadow:var(--shadow)}
.tile .k{color:var(--secondary)}
.tile.lead .v{color:var(--s1)}
.lede{max-width:62ch}
th,thead th{color:var(--secondary)}
tr:hover td{background:rgba(20,33,61,.035)}

/* bar treatment: depth */
  .bars:not([data-own-color]) .bar:not(.partner) .fill,
  .bars:not([data-own-color]) .bar .bf{background-repeat:no-repeat;
    background-size:calc(100% / var(--frac,1)) 100%;
    background-image:linear-gradient(to right, color-mix(in srgb, var(--s1) 60%, #fff) 0%,
      var(--s1) 48%, color-mix(in srgb, var(--s1) 58%, #0b1f44) 100%);}
  .bars.bs-pre .fill, .bars.bs-pre .bf{clip-path:inset(0 100% 0 0);}
  .bars.bs-in .fill, .bars.bs-in .bf{clip-path:inset(0 0 0 0);
    transition:clip-path .75s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 45ms), filter .12s;}
  .bars .bar{transition:opacity .18s ease;}
  .bars:hover .bar:not(:hover){opacity:.45;}
  .bars .bar .track{transition:background-color .18s ease;}
  .bars .bar .val, .bars .bar .bv{transition:color .18s ease;}
  .bars .bar:hover .track{background-color:var(--accent-soft);}
  .bars .bar:hover .val, .bars .bar:hover .bv{color:var(--accent);}
  .bars .bar:hover .fill, .bars .bar:hover .bf{filter:saturate(1.15);}
  @media (prefers-reduced-motion:reduce){
    .bars .fill, .bars .bf{clip-path:none !important;transition:none !important;}
    .bars .bar, .bars .bar .track, .bars .bar .val, .bars .bar .bv{transition:none !important;}
  }

  .cm-pre{clip-path:inset(0 100% 0 0);}
  .cm-pre[data-reveal="up"]{clip-path:inset(100% 0 0 0);}
  .cm-in{clip-path:inset(0 0 0 0);transition:clip-path var(--reveal,.7s) cubic-bezier(.2,.7,.2,1);}
  .heat.cm-pre{clip-path:none;}
  .heat.cm-pre td{opacity:0;}
  .heat.cm-in{clip-path:none;transition:none;}
  .heat.cm-in td{opacity:1;transition:opacity .45s ease calc(var(--cmd,0) * 1ms);}
  /* an SVG heatmap opts in with data-reveal="cells" (the Research page, Nate 2026-10-11): the same cell-by-cell
     fade as the heat tables, palest first, instead of the left-to-right wipe. `.cmc` is set by the script on each
     shaded cell and its label; the shade itself is fill-opacity, which `opacity` multiplies, so it is kept. */
  .cm-pre[data-reveal="cells"]{clip-path:none;}
  .cm-pre[data-reveal="cells"] .cmc{opacity:0;}
  .cm-in[data-reveal="cells"]{clip-path:none;transition:none;}
  .cm-in[data-reveal="cells"] .cmc{opacity:1;transition:opacity .45s ease calc(var(--cmd,0) * 1ms);}
  /* a grouped chart opts in with data-reveal="groups" (What Is Surging, Nate 2026-10-11): each <g class="sect"> wipes
     in left to right on its own, one section after the other, each over --reveal, the next starting as the previous
     ends (the script sets --cmd per section). data-reveal-hold lengthens the hold before the clip is dropped. */
  .cm-pre[data-reveal="groups"]{clip-path:none;}
  .cm-pre[data-reveal="groups"] g.sect{clip-path:inset(0 100% 0 0);}
  .cm-in[data-reveal="groups"]{clip-path:none;transition:none;}
  .cm-in[data-reveal="groups"] g.sect{clip-path:inset(0 0 0 0);transition:clip-path var(--reveal,.7s) cubic-bezier(.2,.7,.2,1) calc(var(--cmd,0) * 1ms);}
  /* an SVG bar chart opts in with data-reveal="bars" (What Is Surging, Nate 2026-10-11): the bar treatment's own
     timing, bar after bar: each bar (rect[fill-opacity], marked .cmb) wipes in over .75s starting 45ms after the one
     before it, down the whole chart; its value (text[data-val], marked .cmv) fades in as the bar arrives. */
  .cm-pre[data-reveal="bars"]{clip-path:none;}
  .cm-pre[data-reveal="bars"] .cmb{clip-path:inset(0 100% 0 0);}
  .cm-pre[data-reveal="bars"] .cmv{opacity:0;}
  .cm-in[data-reveal="bars"]{clip-path:none;transition:none;}
  .cm-in[data-reveal="bars"] .cmb{clip-path:inset(0 0 0 0);transition:clip-path .75s cubic-bezier(.2,.7,.2,1) calc(var(--cmd,0) * 1ms);}
  .cm-in[data-reveal="bars"] .cmv{opacity:1;transition:opacity .3s ease calc((var(--cmd,0) + 450) * 1ms);}
  /* hover: discrete marks */
  .heat td{transition:opacity .18s ease;}
  .heat.cm-done:hover td[data-drill]:not(:hover){opacity:.5;}
  svg .col{transition:opacity .18s ease;}
  svg:hover .col:not(:hover){opacity:.45;}
  @media (prefers-reduced-motion:reduce){
    .cm-pre, .cm-in{clip-path:none !important;transition:none !important;}
    .heat.cm-pre td, .heat.cm-in td{opacity:1 !important;transition:none !important;}
    .cm-pre[data-reveal="cells"] .cmc, .cm-in[data-reveal="cells"] .cmc{opacity:1 !important;transition:none !important;}
    .cm-pre[data-reveal="groups"] g.sect, .cm-in[data-reveal="groups"] g.sect{clip-path:none !important;transition:none !important;}
    .cm-pre[data-reveal="bars"] .cmb, .cm-in[data-reveal="bars"] .cmb{clip-path:none !important;transition:none !important;}
    .cm-pre[data-reveal="bars"] .cmv, .cm-in[data-reveal="bars"] .cmv{opacity:1 !important;transition:none !important;}
    .heat td, svg .col{transition:none !important;}
  }