:root { --bg:#faf9f5; --ink:#1a1914; --muted:#77756c; --blue:#2d4f9e; --warm:var(--c2); --line:#e6e4dc; --card:#ffffff;
          --serif:"Source Serif 4",Georgia,serif; --sans:"Inter",-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bg); color:var(--ink); font-family:var(--serif); -webkit-font-smoothing:antialiased; }
  ::selection { background:var(--blue); color:#fff; }
  .wrap { width:100%; max-width:680px; margin:0 auto; padding:0 24px; }
  .wide { width:100%; max-width:820px; margin:0 auto; padding:0 24px; }
  header { padding:32px 0; } header .wrap { display:flex; align-items:center; justify-content:space-between; max-width:820px; }
  .brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); } .brand svg { width:30px; height:30px; }
  .brand span { font-family:var(--sans); font-weight:600; font-size:16px; letter-spacing:-0.01em; }
  nav a { font-family:var(--sans); font-weight:500; font-size:13px; color:var(--muted); text-decoration:none; margin-left:20px; } nav a:hover { color:var(--blue); }

  .kicker { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin:40px 0 18px; }
  h1 { font-weight:400; font-size:clamp(32px,5.4vw,46px); line-height:1.16; letter-spacing:-0.012em; margin-bottom:22px; text-wrap:balance; }
  h1 em { font-style:italic; color:var(--blue); }
  .dek { font-size:20px; line-height:1.55; color:var(--muted); margin-bottom:26px; text-wrap:pretty; }
  .byline { font-family:var(--sans); font-size:13px; color:var(--muted); padding-bottom:28px; border-bottom:1px solid var(--line); }
  .byline b { color:var(--ink); font-weight:500; }

  article p { font-size:18.5px; line-height:1.7; margin:0 0 22px; text-wrap:pretty; }
  h2 { font-weight:400; font-size:clamp(25px,3.6vw,31px); line-height:1.25; letter-spacing:-0.008em; margin:64px 0 8px; text-wrap:balance; }
  h2 .n { font-family:var(--sans); font-size:13.5px; font-weight:600; letter-spacing:.08em; color:var(--blue); display:block; margin-bottom:10px; }
  h3 { font-family:var(--sans); font-size:15px; font-weight:600; margin:34px 0 10px; }
  .sub { color:var(--muted); font-size:17px; line-height:1.6; margin-bottom:24px; }
  a { color:var(--blue); text-underline-offset:3px; }
  code { font-family:var(--mono); font-size:.82em; background:#f0eee6; padding:1px 5px; border-radius:4px; }
  strong { font-weight:600; }

  .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:10px; background:var(--card); margin:36px auto 8px; overflow:hidden; }
  .stat { padding:20px 18px; border-right:1px solid var(--line); } .stat:last-child { border-right:0; }
  .stat .v { font-size:34px; line-height:1; letter-spacing:-0.02em; color:var(--blue); }
  .stat .v small { font-size:.5em; color:var(--muted); margin-left:2px; }
  .stat .l { font-family:var(--sans); font-size:12.5px; line-height:1.45; color:var(--muted); margin-top:10px; }

  figure { margin:34px auto 38px; } figure img { display:block; width:100%; height:auto; }
  figcaption { font-family:var(--sans); font-size:13px; line-height:1.55; color:var(--muted); margin-top:12px; padding-left:14px; border-left:2px solid var(--line); }
  figcaption b { color:var(--ink); font-weight:600; }

  .todo { font-family:var(--sans); font-size:13.5px; line-height:1.6; color:#6b4a12; background:#fdf3dc; border:1px dashed #e0b85c; border-radius:8px; padding:12px 14px; margin:0 0 22px; }
  .todo b { font-weight:600; } .todo ul { margin:6px 0 0 18px; }
  .draft { border-left:3px solid var(--line); padding-left:16px; color:#3f3d36; }
  body.clean .todo { display:none; } body.clean .draft { border:0; padding:0; color:inherit; }

  .takeaways { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px 22px 8px; margin:30px 0 30px; } .takeaways .h { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--blue); margin-bottom:12px; } .takeaways ul { margin:0 0 0 18px; } .takeaways li { font-size:16.5px; line-height:1.6; margin-bottom:12px; } .takeaways li b { font-weight:600; }
  .evidence { font-family:var(--sans); font-size:13.5px; color:var(--muted); margin:-14px 0 30px; } .evidence a { font-weight:500; }
  .callout { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:8px; padding:18px 20px; margin:30px 0; }
  .callout p { font-size:17px; margin:0; } .callout .h { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--blue); margin-bottom:8px; }

  .cases { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:30px auto 36px; }
  .case { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; display:flex; flex-direction:column; }
  .case .tag { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
  .case .tag.fp { color:var(--warm); } .case .tag.ff { color:var(--blue); }
  .case h4 { font-weight:400; font-size:19px; line-height:1.3; margin:8px 0 10px; }
  .case p { font-size:14.5px; line-height:1.55; color:#3f3d36; margin:0 0 12px; font-family:var(--sans); }
  .votes { margin-top:auto; display:grid; grid-template-columns:1fr auto; gap:4px 10px; font-family:var(--sans); font-size:12.5px; border-top:1px solid var(--line); padding-top:12px; }
  .votes span:nth-child(odd) { color:var(--muted); } .votes .bad { color:var(--warm); font-weight:600; } .votes .ok { color:var(--blue); font-weight:600; }

  table.t { width:100%; border-collapse:collapse; font-family:var(--sans); font-size:14px; margin:26px 0 34px; }
  table.t th { text-align:right; font-weight:500; color:var(--muted); font-size:12px; padding:8px 10px; border-bottom:1px solid var(--line); }
  table.t th:first-child, table.t td:first-child { text-align:left; }
  table.t td { text-align:right; padding:10px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
  table.t td.own { background:#eef1f8; font-weight:600; color:var(--blue); } table.t td.hd { font-weight:600; }

  ol.inc { list-style:none; counter-reset:i; margin:26px 0 30px; } ol.inc li { counter-increment:i; position:relative; padding:0 0 18px 46px; font-size:17px; line-height:1.6; }
  ol.inc li:before { content:counter(i,decimal-leading-zero); position:absolute; left:0; top:2px; font-family:var(--sans); font-size:12px; font-weight:600; color:var(--blue); letter-spacing:.05em; }
  ol.inc li b { font-weight:600; }

  .end { border-top:1px solid var(--line); margin-top:32px; padding:22px 0 8px; } .end p { font-size:17px; color:var(--muted); }
  footer { border-top:1px solid var(--line); padding:20px 0 28px; margin-top:56px; }
  footer .wrap { max-width:820px; display:flex; justify-content:space-between; font-family:var(--sans); font-size:12px; color:var(--muted); }
  .bar { position:fixed; right:16px; bottom:16px; font-family:var(--sans); font-size:12px; background:var(--ink); color:#fff; border-radius:999px; padding:8px 14px; cursor:pointer; opacity:.85; border:0; }
  @media (max-width:720px){ .case code{overflow-wrap:anywhere} .stats{grid-template-columns:1fr 1fr} .stat:nth-child(2){border-right:0} .stat:nth-child(-n+2){border-bottom:1px solid var(--line)} .cases{grid-template-columns:1fr} article p{font-size:17.5px} table.t{font-size:12.5px} table.t td,table.t th{padding:8px 5px} }
  h1.sm { font-size:clamp(27px,4.2vw,37px); line-height:1.2; }
  h2.label-only { margin:44px 0 14px; } h2.label-only .n { margin-bottom:0; }
  /* hover chart */
  .abchart { --c2:#1a1914; --tint:#9fb0d8; --neut:#c9c6ba; background:#fdfcf9; border:1px solid var(--line); border-radius:14px; padding:26px 30px 22px; font-family:Inter,system-ui,sans-serif; }
  .abc-title { font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
  .abc-sub { font-size:13px; color:var(--muted); margin-top:5px; height:38px; overflow:hidden; line-height:1.45; } .abc-sub b { color:var(--ink); font-weight:600; }
  .abc-plot { position:relative; margin-top:14px; padding-bottom:26px; }
  .abc-grid { position:absolute; left:170px; right:56px; top:0; bottom:26px; pointer-events:none; }
  .abc-grid i { position:absolute; top:0; bottom:0; width:1px; background:var(--line); } .abc-grid i:first-child { background:#cfccc0; }
  .abc-grid em { position:absolute; bottom:-22px; transform:translateX(-50%); font-style:normal; font-size:11.5px; color:var(--muted); }
  .abc-row { position:relative; display:flex; align-items:center; padding:7px 56px 7px 0; cursor:default; outline:none; transition:opacity .15s; }
  .abc-name { width:170px; flex:none; font-size:14.5px; font-weight:500; color:var(--ink); }
  figure img.abc-ico { display:inline-block; width:17px; height:17px; margin-right:10px; vertical-align:-3px; opacity:.85; }
  .abc-track { position:relative; flex:1; height:34px; }
  .abc-bar { position:absolute; left:0; top:0; bottom:0; background:var(--blue); border-radius:0 5px 5px 0; transition:background .15s; }
  .abc-bar.own { background:var(--c2); } .abc-bar.tint { background:var(--tint); }
  .abc-ci, .abc-val { opacity:0; transition:opacity .15s; }
  .abc-ci { position:absolute; top:50%; height:0; border-top:1.5px solid #77756c; } .abc-ci:before, .abc-ci:after { content:""; position:absolute; top:-6px; height:11px; border-left:1.5px solid #77756c; } .abc-ci:before { left:0; } .abc-ci:after { right:0; }
  .abc-val { position:absolute; top:50%; transform:translateY(-50%); margin-left:10px; font-size:14.5px; font-weight:600; color:var(--ink); }
  .abchart.active .abc-row:not(.on) { opacity:.3; } .abc-row.on .abc-ci, .abc-row.on .abc-val { opacity:1; }
  .abc-legend { display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:8px; font-size:12.5px; color:var(--muted); } .abc-legend i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:7px; }
  .abd-track { height:44px; display:flex; flex-direction:column; gap:4px; } .abd-line { position:relative; flex:1; display:block; }
  .abd-bar { position:absolute; left:0; top:0; bottom:0; background:var(--blue); border-radius:0 4px 4px 0; } .abd-bar.own { background:var(--c2); } .abd-row .abc-val { font-size:12.5px; margin-left:8px; }
  .abf-bar { display:flex; gap:3px; height:46px; margin:14px 0 12px; } .abf-seg { display:flex; align-items:center; justify-content:center; border-radius:5px; min-width:34px; transition:opacity .15s; outline:none; } .abf-seg b { color:#fff; font-size:16px; font-weight:600; }
  .abc-sub.static { height:auto; } .abf-legend b { color:var(--ink); font-weight:600; }
  .abchart.active .abf-seg:not(.on) { opacity:.3; }
  .abk-track { display:flex; align-items:center; height:24px; gap:2px; } .abk-track span { height:100%; border-radius:3px; } .abk-track em { font-style:normal; font-size:13px; font-weight:600; color:var(--ink); margin-left:8px; }
  .abm .abx-row { padding:4px 0; } .abm .abx-track { height:16px; } .abm .abx-v { font-size:12.5px; font-weight:500; } .abx-v.zero { color:#c9c6ba; } .abm .abc-name { font-size:13.5px; }
  table.abh { width:100%; border-collapse:separate; border-spacing:3px; margin-top:14px; table-layout:fixed; font-family:Inter,system-ui,sans-serif; } table.abh th { font-size:12px; font-weight:600; color:var(--ink); text-align:center; padding-bottom:6px; } table.abh th:first-child { width:27%; } table.abh th em { display:block; font-style:normal; font-weight:400; font-size:11.5px; color:var(--muted); }
  td.abh-name { font-size:12.5px; color:var(--ink); padding-right:10px; } table.abh td span { display:block; text-align:center; font-size:12px; font-weight:600; padding:7px 0; border-radius:4px; } table.abh td span.zero { color:#c9c6ba; font-weight:400; }
  .abx { margin-top:12px; } .abx-row { display:flex; align-items:center; padding:7px 0; } .abx-row.abc-row { padding-right:0; }
  .abx-cell { flex:1; display:flex; align-items:center; gap:8px; padding:0 14px; border-left:1px solid var(--line); min-width:0; }
  .abx-head { padding-bottom:10px; } .abx-head .abx-cell { display:block; border-left-color:transparent; } .abx-head b { display:block; font-size:13px; font-weight:600; color:var(--ink); } .abx-head em { font-style:normal; font-size:11.5px; color:var(--muted); }
  .abx-track { position:relative; flex:1; height:22px; background:#f1efe8; border-radius:4px; overflow:hidden; } .abx-bar { position:absolute; left:0; top:0; bottom:0; background:var(--blue); } .abx-bar.own { background:var(--c2); }
  .abx-v { width:30px; text-align:right; font-size:13.5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; } .abx-v.own { color:var(--c2); }
  @media (max-width:720px){ .abc-grid i:nth-child(even) em{display:none} figure img.abc-ico{width:13px;height:13px;margin-right:5px;vertical-align:-2px} td.abh-name{font-size:12px;padding-right:4px} table.abh th{font-size:11px;vertical-align:bottom;padding-bottom:4px} table.abh th em{display:none} table.abh th .abh-j{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;line-height:1;padding:2px 0} table.abh th:first-child{width:24%} table.abh td span{font-size:11.5px;padding:7px 0;border-radius:3px} table.abh td span i{display:none} table.abh{border-spacing:3px 4px} td.abh-name{font-size:11px;line-height:1.2;overflow-wrap:anywhere;hyphens:auto} .abx-cell{padding:0 6px;gap:4px} .abm .abx-row{flex-wrap:wrap} .abm .abc-name{width:100%;padding:4px 0 3px} .abm .abx-head .abc-name{display:none} .abm .abx-cell:first-of-type,.abm .abc-name + .abx-cell{border-left:0;padding-left:0} .abx-v{width:22px;font-size:11.5px} .abx-head b{font-size:11px} .abx-track{height:16px}
  .abchart{padding:18px 16px 14px;min-width:0} .abc-name{width:104px;font-size:12.5px} .abc-grid{left:104px;right:40px} .abc-row{padding-right:40px} .abc-track{height:26px} .abd-track{height:36px} .abc-sub{height:76px} }

  .repo { display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink); text-decoration:none; border:1px solid var(--line); background:var(--card); border-radius:999px; padding:9px 16px; margin:22px 0 6px; } .repo:hover { border-color:var(--blue); color:var(--blue); } .repo span { color:var(--muted); font-weight:400; }
  .repobox { border:1px solid var(--line); background:var(--card); border-radius:14px; padding:22px 24px; margin:34px 0 8px; font-family:var(--sans); } .repobox b { display:block; font-size:16px; margin-bottom:6px; } .repobox p { font-size:14.5px; line-height:1.55; color:var(--muted); margin:0 0 14px; } .repobox .repo { margin:0; }

  .byline { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
  .ghl { display:inline-flex; align-items:center; gap:7px; color:var(--muted); text-decoration:none; font-weight:500; } .ghl:hover { color:var(--blue); }