/* ═══════════════ tokens ═══════════════ */
.interactive-article.article-generative-recommendation{
  color-scheme: light;
  --surface-1:var(--card-bg, var(--main-bg)); --page:var(--main-bg); --surface-2:var(--bs-tertiary-bg);
  --ink-1:var(--heading-color); --ink-2:var(--text-color); --ink-3:var(--text-muted-color);
  --grid:var(--main-border-color); --axis:var(--tb-border-color, var(--main-border-color)); --border:var(--main-border-color); --border-2:var(--tb-border-color, var(--main-border-color));
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s1-wash:rgba(42,120,214,.09); --s2-wash:rgba(235,104,52,.09);
  --s3-wash:rgba(27,175,122,.10); --s4-wash:rgba(237,161,0,.11);
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --good-text:#006300;
  --seq-100:#cde2fb; --seq-250:#86b6ef; --seq-350:#5598e7; --seq-400:#3987e5; --seq-450:#2a78d6; --seq-550:#1c5cab; --seq-650:#104281;
  --radius:10px; --shadow:0 1px 2px rgba(11,11,11,.04), 0 8px 24px -16px rgba(11,11,11,.16);
}
html[data-bs-theme="dark"] .interactive-article.article-generative-recommendation{
  color-scheme: dark;
  --surface-1:var(--card-bg, var(--main-bg)); --page:var(--main-bg); --surface-2:var(--bs-tertiary-bg);
  --ink-1:var(--heading-color); --ink-2:var(--text-color); --ink-3:var(--text-muted-color);
  --grid:var(--main-border-color); --axis:var(--tb-border-color, var(--main-border-color)); --border:var(--main-border-color); --border-2:var(--tb-border-color, var(--main-border-color));
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s1-wash:rgba(57,135,229,.15); --s2-wash:rgba(217,89,38,.15);
  --s3-wash:rgba(25,158,112,.16); --s4-wash:rgba(201,133,0,.16);
  --good-text:#0ca30c;
  --seq-100:#104281; --seq-250:#184f95; --seq-350:#1c5cab; --seq-400:#256abf; --seq-450:#2a78d6; --seq-550:#3987e5; --seq-650:#86b6ef;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
}
.interactive-article.article-generative-recommendation, .interactive-article.article-generative-recommendation *{box-sizing:border-box}
/* ═══════════════ nav ═══════════════ */
/* ═══════════════ layout ═══════════════ */
.interactive-article.article-generative-recommendation .wrap{max-width:1180px; margin:0 auto; padding:0 22px 100px}
.interactive-article.article-generative-recommendation section{padding-top:52px}
.interactive-article.article-generative-recommendation h1{font-size:clamp(30px,4.6vw,48px); line-height:1.16; letter-spacing:-.025em; font-weight:700; margin:0 0 18px}
.interactive-article.article-generative-recommendation h2{font-size:clamp(22px,2.9vw,31px); line-height:1.28; letter-spacing:-.02em; font-weight:670; margin:0 0 8px}
.interactive-article.article-generative-recommendation h3{font-size:19px; letter-spacing:-.01em; font-weight:620; margin:34px 0 10px}
.interactive-article.article-generative-recommendation h4{font-size:15.5px; font-weight:620; margin:22px 0 7px}
.interactive-article.article-generative-recommendation p{margin:0 0 14px; color:var(--ink-2); max-width:74ch}
.interactive-article.article-generative-recommendation .lead{font-size:18.5px; line-height:1.68; color:var(--ink-2); max-width:70ch}
.interactive-article.article-generative-recommendation .eyebrow{font-size:11.5px; font-weight:670; letter-spacing:.1em; text-transform:uppercase; color:var(--s1); margin:0 0 10px}
.interactive-article.article-generative-recommendation .sub{font-size:14.5px; color:var(--ink-3); max-width:74ch; margin:0 0 22px}
.interactive-article.article-generative-recommendation a{color:var(--s1)} .interactive-article.article-generative-recommendation a:hover{opacity:.78}
.interactive-article.article-generative-recommendation strong{color:var(--ink-1); font-weight:620}
.interactive-article.article-generative-recommendation code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em; background:var(--surface-2);
  border:1px solid var(--border); border-radius:5px; padding:1px 5px}
.interactive-article.article-generative-recommendation ul, .interactive-article.article-generative-recommendation ol{color:var(--ink-2); max-width:74ch; padding-left:22px; margin:0 0 16px}
.interactive-article.article-generative-recommendation li{margin-bottom:7px}
.interactive-article.article-generative-recommendation hr{border:0; border-top:1px solid var(--grid); margin:44px 0}
.interactive-article.article-generative-recommendation .rule{border:0; border-top:1px solid var(--grid); margin:0 0 30px}
/* ═══════════════ cards ═══════════════ */
.interactive-article.article-generative-recommendation .card{background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow)}
.interactive-article.article-generative-recommendation .card.tight{padding:16px 18px}
.interactive-article.article-generative-recommendation .grid{display:grid; gap:14px}
.interactive-article.article-generative-recommendation .g2{grid-template-columns:repeat(2,1fr)} .interactive-article.article-generative-recommendation .g3{grid-template-columns:repeat(3,1fr)} .interactive-article.article-generative-recommendation .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.interactive-article.article-generative-recommendation .g2, .interactive-article.article-generative-recommendation .g3, .interactive-article.article-generative-recommendation .g4{grid-template-columns:1fr}}
.interactive-article.article-generative-recommendation .note{border-left:2px solid var(--s1); background:var(--s1-wash); padding:13px 16px; border-radius:0 8px 8px 0; margin:20px 0}
.interactive-article.article-generative-recommendation .note p{margin:0; color:var(--ink-2)} .interactive-article.article-generative-recommendation .note p+p{margin-top:9px}
.interactive-article.article-generative-recommendation .note.w{border-color:var(--warn); background:rgba(250,178,25,.10)}
.interactive-article.article-generative-recommendation .note.c{border-color:var(--critical); background:rgba(208,59,59,.09)}
.interactive-article.article-generative-recommendation .note.g{border-color:var(--good); background:rgba(12,163,12,.09)}
.interactive-article.article-generative-recommendation .note-t{font-weight:640; color:var(--ink-1); font-size:14px; display:block; margin-bottom:4px}
.interactive-article.article-generative-recommendation .kicker{font-size:11.5px; font-weight:660; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
/* ═══════════════ stat tiles ═══════════════ */
.interactive-article.article-generative-recommendation .tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px; margin:24px 0}
.interactive-article.article-generative-recommendation .tile{background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius); padding:15px 17px}
.interactive-article.article-generative-recommendation .tile .lab{font-size:12.5px; color:var(--ink-3); margin-bottom:5px; line-height:1.4}
.interactive-article.article-generative-recommendation .tile .val{font-size:27px; font-weight:660; letter-spacing:-.025em; line-height:1.1}
.interactive-article.article-generative-recommendation .tile .foot{font-size:11.5px; color:var(--ink-3); margin-top:5px; line-height:1.45}
/* ═══════════════ table ═══════════════ */
.interactive-article.article-generative-recommendation .tw{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-1)}
.interactive-article.article-generative-recommendation table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:600px}
.interactive-article.article-generative-recommendation th{text-align:left; font-weight:620; color:var(--ink-2); padding:10px 13px; border-bottom:1px solid var(--axis);
  background:var(--surface-2); font-size:12.5px; letter-spacing:.01em; white-space:nowrap; position:sticky; top:0}
.interactive-article.article-generative-recommendation td{padding:10px 13px; border-bottom:1px solid var(--grid); color:var(--ink-2); vertical-align:top}
.interactive-article.article-generative-recommendation tbody tr:last-child td{border-bottom:0}
.interactive-article.article-generative-recommendation tbody tr:hover td{background:var(--surface-2)}
.interactive-article.article-generative-recommendation td.num{font-variant-numeric:tabular-nums; white-space:nowrap}
.interactive-article.article-generative-recommendation .pos{color:var(--good-text); font-weight:600} .interactive-article.article-generative-recommendation .neg{color:var(--critical); font-weight:600}
/* ═══════════════ pills / chips ═══════════════ */
.interactive-article.article-generative-recommendation .pill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:2px 8px;
  border-radius:20px; border:1px solid var(--border-2); color:var(--ink-2); background:var(--surface-2); white-space:nowrap}
.interactive-article.article-generative-recommendation .pill.b{border-color:color-mix(in srgb,var(--s1) 40%,transparent); background:var(--s1-wash); color:var(--s1)}
.interactive-article.article-generative-recommendation .pill.o{border-color:color-mix(in srgb,var(--s2) 55%,transparent); background:var(--s2-wash); color:var(--ink-1)}
.interactive-article.article-generative-recommendation .pill.a{border-color:color-mix(in srgb,var(--s3) 45%,transparent); background:var(--s3-wash); color:var(--ink-1)}
.interactive-article.article-generative-recommendation .pill.y{border-color:color-mix(in srgb,var(--s4) 50%,transparent); background:var(--s4-wash); color:var(--ink-1)}
.interactive-article.article-generative-recommendation .dot{width:8px; height:8px; border-radius:50%; flex:none; display:inline-block}
.interactive-article.article-generative-recommendation .legend{display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 16px; font-size:12.5px; color:var(--ink-2)}
.interactive-article.article-generative-recommendation .legend .it{display:inline-flex; align-items:center; gap:6px}
.interactive-article.article-generative-recommendation .legend .ln{width:14px; height:2px; border-radius:1px; flex:none}
/* ═══════════════ buttons ═══════════════ */
.interactive-article.article-generative-recommendation .btn{background:var(--surface-2); border:1px solid var(--border-2); color:var(--ink-1); font:inherit; font-size:13px;
  font-weight:560; padding:6px 14px; border-radius:8px; cursor:pointer; transition:.15s; white-space:nowrap}
.interactive-article.article-generative-recommendation .btn:hover{background:var(--surface-1); border-color:var(--ink-3)}
.interactive-article.article-generative-recommendation .btn:disabled{opacity:.4; cursor:default}
.interactive-article.article-generative-recommendation .btn.pri{background:var(--s1); border-color:var(--s1); color:#fff}
.interactive-article.article-generative-recommendation .btn.pri:hover{filter:brightness(1.08)}
.interactive-article.article-generative-recommendation .btn.sm{font-size:12px; padding:4px 10px}
.interactive-article.article-generative-recommendation .ctrls{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 18px}
.interactive-article.article-generative-recommendation .chips{display:flex; flex-wrap:wrap; gap:6px}
.interactive-article.article-generative-recommendation .chip{background:var(--surface-2); border:1px solid var(--border); color:var(--ink-2); font:inherit; font-size:12.5px;
  padding:4px 11px; border-radius:20px; cursor:pointer; transition:.13s}
.interactive-article.article-generative-recommendation .chip:hover{border-color:var(--ink-3); color:var(--ink-1)}
.interactive-article.article-generative-recommendation .chip[aria-pressed="true"]{background:var(--s1); border-color:var(--s1); color:#fff; font-weight:560}
.interactive-article.article-generative-recommendation .chip.cold[aria-pressed="true"]{background:var(--s4); border-color:var(--s4); color:#1a1a19}
/* ═══════════════ tabs ═══════════════ */
.interactive-article.article-generative-recommendation .tabs{display:flex; gap:2px; border-bottom:1px solid var(--grid); margin:0 0 22px; overflow-x:auto; scrollbar-width:none}
.interactive-article.article-generative-recommendation .tabs::-webkit-scrollbar{display:none}
.interactive-article.article-generative-recommendation .tab{background:none; border:0; border-bottom:2px solid transparent; color:var(--ink-3); font:inherit; font-size:14px;
  font-weight:550; padding:9px 15px; cursor:pointer; white-space:nowrap; transition:.15s; margin-bottom:-1px}
.interactive-article.article-generative-recommendation .tab:hover{color:var(--ink-1)}
.interactive-article.article-generative-recommendation .tab[aria-selected="true"]{color:var(--s1); border-bottom-color:var(--s1)}
/* ═══════════════ details ═══════════════ */
.interactive-article.article-generative-recommendation details{border:1px solid var(--border); border-radius:9px; background:var(--surface-1); margin-bottom:9px; overflow:hidden}
.interactive-article.article-generative-recommendation summary{cursor:pointer; padding:12px 16px; font-size:14.5px; font-weight:580; color:var(--ink-1); list-style:none;
  display:flex; align-items:center; gap:9px}
.interactive-article.article-generative-recommendation summary::-webkit-details-marker{display:none}
.interactive-article.article-generative-recommendation summary::before{content:"+"; color:var(--ink-3); font-weight:600; font-size:15px; width:12px; flex:none}
.interactive-article.article-generative-recommendation details[open] summary::before{content:"−"; color:var(--s1)}
.interactive-article.article-generative-recommendation details[open] summary{border-bottom:1px solid var(--grid)}
.interactive-article.article-generative-recommendation .dbody{padding:14px 16px 4px 37px}
.interactive-article.article-generative-recommendation .dbody p:last-child{margin-bottom:12px}
/* ═══════════════ glossary term ═══════════════ */
.interactive-article.article-generative-recommendation .t{border-bottom:1px dashed var(--ink-3); cursor:help; color:var(--ink-1)}
/* ═══════════════ funnel ═══════════════ */
.interactive-article.article-generative-recommendation .funnel{display:flex; flex-direction:column; gap:3px; margin:8px 0 4px}
.interactive-article.article-generative-recommendation .fstage{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:14px}
.interactive-article.article-generative-recommendation .fbar{height:32px; border-radius:0 4px 4px 0; background:var(--s1); display:flex; align-items:center;
  padding-left:11px; color:#fff; font-size:12.5px; font-weight:600; min-width:66px; transition:width .5s cubic-bezier(.3,.9,.3,1)}
.interactive-article.article-generative-recommendation .fmeta{font-size:12.5px; color:var(--ink-3); min-width:0; line-height:1.4}
.interactive-article.article-generative-recommendation .fmeta b{color:var(--ink-1); font-weight:600}
@media(max-width:720px){.interactive-article.article-generative-recommendation .fstage{grid-template-columns:1fr; gap:2px} .interactive-article.article-generative-recommendation .fmeta{padding-left:11px; margin-bottom:6px}}
/* ═══════════════ side-by-side paradigm demo ═══════════════ */
.interactive-article.article-generative-recommendation .vs{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:920px){.interactive-article.article-generative-recommendation .vs{grid-template-columns:1fr}}
.interactive-article.article-generative-recommendation .vspane{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-1); padding:0; overflow:hidden}
.interactive-article.article-generative-recommendation .vshead{padding:12px 16px; border-bottom:1px solid var(--grid); display:flex; align-items:center; justify-content:space-between; gap:10px}
.interactive-article.article-generative-recommendation .vshead .nm{font-weight:640; font-size:15px; display:flex; align-items:center; gap:8px}
.interactive-article.article-generative-recommendation .vsbody{padding:16px; min-height:352px}
.interactive-article.article-generative-recommendation .step{display:flex; gap:11px; padding:9px 0; opacity:.34; transition:opacity .35s}
.interactive-article.article-generative-recommendation .step.on{opacity:1}
.interactive-article.article-generative-recommendation .step.done{opacity:.62}
.interactive-article.article-generative-recommendation .snum{width:21px; height:21px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:11px;
  font-weight:660; background:var(--surface-2); border:1px solid var(--border-2); color:var(--ink-3); margin-top:2px}
.interactive-article.article-generative-recommendation .step.on .snum{background:var(--s1); border-color:var(--s1); color:#fff}
.interactive-article.article-generative-recommendation .vspane.trad .step.on .snum{background:var(--s2); border-color:var(--s2)}
.interactive-article.article-generative-recommendation .step.done .snum{background:var(--surface-2); border-color:var(--good); color:var(--good-text)}
.interactive-article.article-generative-recommendation .stxt{font-size:13.5px; color:var(--ink-2); flex:1; line-height:1.6}
.interactive-article.article-generative-recommendation .stxt b{color:var(--ink-1)}
.interactive-article.article-generative-recommendation .stag{font-size:11px; color:var(--ink-3); margin-top:3px; font-variant-numeric:tabular-nums}
.interactive-article.article-generative-recommendation .vsfoot{border-top:1px solid var(--grid); padding:11px 16px; background:var(--surface-2); font-size:12.5px; color:var(--ink-2)}
/* ═══════════════ RQ visual ═══════════════ */
.interactive-article.article-generative-recommendation .rq{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:14px}
@media(max-width:1000px){.interactive-article.article-generative-recommendation .rq{grid-template-columns:1fr}}
.interactive-article.article-generative-recommendation .vecbar{display:flex; gap:3px; align-items:flex-end; height:56px; margin:6px 0 3px}
.interactive-article.article-generative-recommendation .vb{flex:1; border-radius:2px 2px 0 0; background:var(--s1); min-height:2px; position:relative; transition:height .4s, background .3s}
.interactive-article.article-generative-recommendation .vb.neg{background:var(--s2)}
.interactive-article.article-generative-recommendation .veclabels{display:flex; gap:3px; font-size:9.5px; color:var(--ink-3); line-height:1.15}
.interactive-article.article-generative-recommendation .veclabels span{flex:1; text-align:center; overflow:hidden; word-break:break-all}
.interactive-article.article-generative-recommendation .cbrow{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:9px 0}
.interactive-article.article-generative-recommendation .cw{border:1px solid var(--border); border-radius:8px; padding:8px 9px; background:var(--surface-2); transition:.25s; position:relative}
.interactive-article.article-generative-recommendation .cw.win{border-color:var(--s1); background:var(--s1-wash); box-shadow:0 0 0 1px var(--s1)}
.interactive-article.article-generative-recommendation .cw .cwn{font-size:11px; color:var(--ink-3); font-weight:600; display:flex; justify-content:space-between; align-items:center}
.interactive-article.article-generative-recommendation .cw.win .cwn{color:var(--s1)}
.interactive-article.article-generative-recommendation .cw .cwd{font-size:14px; font-weight:640; font-variant-numeric:tabular-nums; margin-top:2px; color:var(--ink-1)}
.interactive-article.article-generative-recommendation .cw .cwl{font-size:10px; color:var(--ink-3)}
.interactive-article.article-generative-recommendation .mini{display:flex; gap:2px; align-items:flex-end; height:22px; margin-top:5px}
.interactive-article.article-generative-recommendation .mini i{flex:1; background:var(--ink-3); border-radius:1px 1px 0 0; min-height:1px; opacity:.55}
.interactive-article.article-generative-recommendation .cw.win .mini i{background:var(--s1); opacity:1}
.interactive-article.article-generative-recommendation .sidchip{display:inline-flex; align-items:center; gap:2px; font-family:ui-monospace,Menlo,monospace; font-size:15px;
  font-weight:660; background:var(--s1-wash); border:1px solid color-mix(in srgb,var(--s1) 40%,transparent);
  color:var(--s1); padding:4px 11px; border-radius:8px; letter-spacing:.02em}
.interactive-article.article-generative-recommendation .sidchip.dis{background:var(--s4-wash); border-color:color-mix(in srgb,var(--s4) 55%,transparent); color:var(--ink-1)}
/* tree */
.interactive-article.article-generative-recommendation .tree{font-size:12.5px; max-height:432px; overflow-y:auto; padding-right:6px}
.interactive-article.article-generative-recommendation .tree::-webkit-scrollbar{width:6px} .interactive-article.article-generative-recommendation .tree::-webkit-scrollbar-thumb{background:var(--axis); border-radius:3px}
.interactive-article.article-generative-recommendation .tnode{border-left:1.5px solid var(--grid); margin-left:9px; padding-left:11px}
.interactive-article.article-generative-recommendation .tlab{display:flex; align-items:center; gap:7px; padding:3px 0; color:var(--ink-3)}
.interactive-article.article-generative-recommendation .tlab .tc{font-family:ui-monospace,Menlo,monospace; font-size:11px; font-weight:660; background:var(--surface-2);
  border:1px solid var(--border); border-radius:4px; padding:0 5px; color:var(--ink-2); flex:none}
.interactive-article.article-generative-recommendation .tleaf{display:flex; align-items:center; gap:7px; padding:2px 0; color:var(--ink-2)}
.interactive-article.article-generative-recommendation .tleaf .tc{font-family:ui-monospace,Menlo,monospace; font-size:10.5px; color:var(--ink-3); flex:none}
.interactive-article.article-generative-recommendation .tnode.act{border-left-color:var(--s1)}
.interactive-article.article-generative-recommendation .tnode.act>.tlab{color:var(--s1); font-weight:600}
.interactive-article.article-generative-recommendation .tleaf.act{color:var(--s1); font-weight:640}
.interactive-article.article-generative-recommendation .tleaf.act .tc{color:var(--s1)}
.interactive-article.article-generative-recommendation .tleaf.coll{color:var(--ink-1)}
.interactive-article.article-generative-recommendation .tleaf.coll .tc{color:var(--critical); font-weight:700}
.interactive-article.article-generative-recommendation .tleaf.newit{color:var(--ink-1); font-weight:640}
.interactive-article.article-generative-recommendation .tleaf.newit .tc{color:var(--good-text); font-weight:700}
/* residual chart */
.interactive-article.article-generative-recommendation .resid{display:flex; align-items:flex-end; gap:9px; height:88px; margin:12px 0 4px}
.interactive-article.article-generative-recommendation .rcol{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; height:100%}
.interactive-article.article-generative-recommendation .rcol .rb{width:100%; max-width:26px; background:var(--seq-400); border-radius:4px 4px 0 0; transition:height .5s}
.interactive-article.article-generative-recommendation .rcol .rv{font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--ink-1); font-weight:600}
.interactive-article.article-generative-recommendation .rcol .rl{font-size:10.5px; color:var(--ink-3); text-align:center; line-height:1.25}
/* ═══════════════ timeline ═══════════════ */
.interactive-article.article-generative-recommendation .tl-wrap{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-1); overflow:hidden}
.interactive-article.article-generative-recommendation .tl-scroll{overflow-x:auto; padding:0}
.interactive-article.article-generative-recommendation .tl{min-width:1400px; padding:18px 20px 8px; position:relative}
.interactive-article.article-generative-recommendation .tl-years{display:grid; grid-template-columns:132px repeat(7,1fr); font-size:11.5px; color:var(--ink-3);
  font-weight:640; border-bottom:1px solid var(--grid); padding-bottom:6px; margin-bottom:4px}
.interactive-article.article-generative-recommendation .tl-years>div{padding-left:3px}
.interactive-article.article-generative-recommendation .tl-years>div:first-child{position:sticky; left:0; background:var(--surface-1); z-index:6}
.interactive-article.article-generative-recommendation .tl-lane{display:grid; grid-template-columns:132px 1fr; gap:0; border-bottom:1px solid var(--grid); align-items:stretch}
.interactive-article.article-generative-recommendation .tl-lane:last-child{border-bottom:0}
.interactive-article.article-generative-recommendation .tl-lname{font-size:11.5px; font-weight:640; color:var(--ink-2); padding:14px 12px 14px 0; display:flex;
  align-items:flex-start; gap:7px; line-height:1.35; position:sticky; left:0; z-index:5;
  background:var(--surface-1); box-shadow:1px 0 0 var(--grid)}
.interactive-article.article-generative-recommendation .tl-track{position:relative; padding:14px 0; min-height:56px;
  background-image:repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px calc(100%/7))}
.interactive-article.article-generative-recommendation .tl-node{position:absolute; transform:translate(-50%,0); background:var(--surface-2); border:1px solid var(--border-2);
  border-radius:16px; padding:3px 9px; font-size:11.5px; font-weight:600; color:var(--ink-2); cursor:pointer;
  white-space:nowrap; transition:.14s; z-index:1}
.interactive-article.article-generative-recommendation .tl-node:hover{border-color:var(--ink-3); color:var(--ink-1); z-index:3}
.interactive-article.article-generative-recommendation .tl-node.on{z-index:4; color:var(--ink-1); font-weight:700}
.interactive-article.article-generative-recommendation .tl-node.big{font-weight:680; padding:4px 11px; font-size:12px}
.interactive-article.article-generative-recommendation .tl-node .mk{width:6px; height:6px; border-radius:50%; display:inline-block; margin-right:5px; vertical-align:1px}
.interactive-article.article-generative-recommendation .tl-panel{border-top:1px solid var(--axis); padding:16px 20px; background:var(--surface-2); min-height:118px}
.interactive-article.article-generative-recommendation .tl-panel h4{margin:0 0 3px; font-size:16px}
.interactive-article.article-generative-recommendation .tl-panel .meta{font-size:11.5px; color:var(--ink-3); margin-bottom:9px; display:flex; flex-wrap:wrap; gap:6px 12px}
.interactive-article.article-generative-recommendation .tl-panel p{font-size:13.5px; margin:0 0 8px; max-width:82ch}
.interactive-article.article-generative-recommendation .tl-panel .lim{font-size:13px; color:var(--ink-2); background:var(--surface-1); border:1px solid var(--border);
  border-radius:7px; padding:9px 12px; max-width:82ch}
.interactive-article.article-generative-recommendation .tl-panel .lim b{font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:2px}
/* ═══════════════ venn ═══════════════ */
.interactive-article.article-generative-recommendation .venn-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:16px; align-items:start}
@media(max-width:960px){.interactive-article.article-generative-recommendation .venn-wrap{grid-template-columns:1fr}}
.interactive-article.article-generative-recommendation .venn{width:100%; height:auto; display:block}
.interactive-article.article-generative-recommendation .venn .z{cursor:pointer; outline:none}
.interactive-article.article-generative-recommendation .venn .vz{transition:opacity .2s}
.interactive-article.article-generative-recommendation .venn .z:focus-visible{stroke:var(--ink-1); stroke-width:2; stroke-dasharray:4 3}
.interactive-article.article-generative-recommendation .venn text{font-family:inherit; pointer-events:none; user-select:none}
.interactive-article.article-generative-recommendation .vpanel{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-1); padding:16px 18px; min-height:250px}
.interactive-article.article-generative-recommendation .vpanel h4{margin:0 0 3px; font-size:16px}
.interactive-article.article-generative-recommendation .vpanel .vt{font-size:12px; color:var(--ink-3); margin-bottom:10px}
.interactive-article.article-generative-recommendation .vpanel p{font-size:13.5px; margin:0 0 10px}
.interactive-article.article-generative-recommendation .vpanel ul{font-size:13px; padding-left:19px; margin:0}
/* ═══════════════ bar chart ═══════════════ */
.interactive-article.article-generative-recommendation .bchart{margin:6px 0 2px}
.interactive-article.article-generative-recommendation .brow{display:grid; grid-template-columns:186px 1fr 68px; gap:11px; align-items:center; padding:4px 0; font-size:12px}
@media(max-width:700px){.interactive-article.article-generative-recommendation .brow{grid-template-columns:120px 1fr 56px; gap:8px; font-size:11.5px}}
.interactive-article.article-generative-recommendation .brow .bl{color:var(--ink-2); text-align:right; line-height:1.3; white-space:normal; word-break:keep-all}
.interactive-article.article-generative-recommendation .btrack{height:100%; position:relative; display:flex; align-items:center; height:20px}
.interactive-article.article-generative-recommendation .bfill{height:15px; border-radius:0 4px 4px 0; background:var(--s1); transition:width .6s cubic-bezier(.3,.9,.3,1)}
.interactive-article.article-generative-recommendation .bfill.o{background:var(--s2)} .interactive-article.article-generative-recommendation .bfill.a{background:var(--s3)} .interactive-article.article-generative-recommendation .bfill.gray{background:var(--axis)}
.interactive-article.article-generative-recommendation .brow .bv{font-variant-numeric:tabular-nums; font-weight:620; color:var(--ink-1); font-size:12.5px}
.interactive-article.article-generative-recommendation .baxis{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-3); margin-left:197px;
  border-top:1px solid var(--grid); padding-top:4px; font-variant-numeric:tabular-nums}
@media(max-width:700px){.interactive-article.article-generative-recommendation .baxis{margin-left:128px}}
.interactive-article.article-generative-recommendation .mfu{display:flex; align-items:center; gap:9px; padding:7px 0; font-size:12.5px; border-bottom:1px solid var(--grid)}
.interactive-article.article-generative-recommendation .mfu:last-child{border-bottom:0}
.interactive-article.article-generative-recommendation .mfu .nm{width:132px; flex:none; color:var(--ink-2)}
.interactive-article.article-generative-recommendation .mfu .tr{flex:1; height:16px; position:relative; background:var(--surface-2); border-radius:4px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--border)}
.interactive-article.article-generative-recommendation .mfu .a{position:absolute; left:0; top:0; height:100%; background:var(--axis); border-radius:4px}
.interactive-article.article-generative-recommendation .mfu .b{position:absolute; left:0; top:0; height:100%; background:var(--s1); border-radius:4px; transition:width .6s}
.interactive-article.article-generative-recommendation .mfu .vv{width:112px; flex:none; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-1); font-weight:600; font-size:12px}
/* misc */
.interactive-article.article-generative-recommendation .flow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; margin:12px 0}
.interactive-article.article-generative-recommendation .fb{border:1px solid var(--border-2); background:var(--surface-2); border-radius:7px; padding:5px 10px; color:var(--ink-2)}
.interactive-article.article-generative-recommendation .fb.hi{border-color:var(--s1); background:var(--s1-wash); color:var(--s1); font-weight:600}
.interactive-article.article-generative-recommendation .fa{color:var(--ink-3); font-size:14px}
.interactive-article.article-generative-recommendation .tokens{display:flex; gap:5px; flex-wrap:wrap; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; margin:8px 0}
.interactive-article.article-generative-recommendation .tk{border:1px solid var(--border-2); background:var(--surface-2); border-radius:5px; padding:2px 7px; color:var(--ink-2)}
.interactive-article.article-generative-recommendation .tk.hi{border-color:var(--s1); background:var(--s1-wash); color:var(--s1); font-weight:660}
.interactive-article.article-generative-recommendation .tk.out{border-color:var(--s3); background:var(--s3-wash); color:var(--ink-1); font-weight:660}
.interactive-article.article-generative-recommendation .tk.gh{opacity:.4; border-style:dashed}
.interactive-article.article-generative-recommendation .beam{font-size:12.5px}
.interactive-article.article-generative-recommendation .brw{display:flex; align-items:center; gap:8px; padding:4px 0; font-family:ui-monospace,Menlo,monospace}
.interactive-article.article-generative-recommendation .brw .p{border:1px solid var(--border-2); border-radius:5px; padding:2px 8px; background:var(--surface-2); color:var(--ink-2)}
.interactive-article.article-generative-recommendation .brw .p.keep{border-color:var(--s1); background:var(--s1-wash); color:var(--s1); font-weight:660}
.interactive-article.article-generative-recommendation .brw .p.cut{opacity:.34; text-decoration:line-through}
.interactive-article.article-generative-recommendation .brw .sc{font-size:11px; color:var(--ink-3); font-family:system-ui,sans-serif; font-variant-numeric:tabular-nums}
.interactive-article.article-generative-recommendation .foot{border-top:1px solid var(--grid); margin-top:56px; padding-top:22px; font-size:12.5px; color:var(--ink-3); max-width:86ch}
.interactive-article.article-generative-recommendation .foot a{color:var(--ink-2)}
.interactive-article.article-generative-recommendation .srcs{columns:2; column-gap:26px; font-size:12px; line-height:1.7}
@media(max-width:760px){.interactive-article.article-generative-recommendation .srcs{columns:1}}
.interactive-article.article-generative-recommendation .tip{position:fixed; z-index:99; background:var(--surface-1); border:1px solid var(--border-2); border-radius:8px;
  padding:9px 12px; font-size:12.5px; color:var(--ink-2); max-width:290px; box-shadow:var(--shadow); pointer-events:none;
  opacity:0; transition:opacity .12s; line-height:1.55}
.interactive-article.article-generative-recommendation .tip b{color:var(--ink-1); display:block; margin-bottom:2px; font-size:13px}
.interactive-article.article-generative-recommendation .tip.show{opacity:1}
.interactive-article.article-generative-recommendation .anchor{position:relative; top:-6px}
@media print{ .interactive-article.article-generative-recommendation .card{break-inside:avoid}}
/* Keep the standalone page's visual deck while Chirpy owns the single page h1. */
.interactive-article.article-generative-recommendation .article-deck-title {
  max-width: none;
  margin: 0 0 18px;
  color: var(--ink-1);
  font-size: clamp(30px, 4.6vw, 48px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.025em;
}