*{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;}

  .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;}