/* ============ tokens: light is the base, both themes defined at token level ============ */
.interactive-article.article-g2pro{
  --paper:#F2F3EF; --paper-2:#E7E9E2; --surface:#FCFCFA; --surface-2:#F6F7F2;
  --ink:#16262A; --ink-2:#4C5F62; --ink-3:#7E8D8C;
  --rule:#D8DCD3; --rule-2:#C0C7BA;
  --near:#35709E; --cate:#7C5FA8; --tu:#C9622B; --to:#1F7F77;
  --accent:#C9622B; --accent-soft:#F6E3D6;
  --good:#2F7D5B; --warn:#A8791A; --bad:#B24A3C;
  --shadow:0 1px 2px rgba(22,38,42,.05), 0 8px 24px -12px rgba(22,38,42,.16);
  --grid-line:rgba(22,38,42,.055); --chip-fg:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  html[data-bs-theme="dark"] .interactive-article.article-g2pro{
    --paper:#0E1517; --paper-2:#090F11; --surface:#152023; --surface-2:#1B272A;
    --ink:#E2E8E3; --ink-2:#9BADAC; --ink-3:#6F8180;
    --rule:#243234; --rule-2:#34464A;
    --near:#74AFDB; --cate:#AF98DE; --tu:#EC9760; --to:#4FC4B6;
    --accent:#EC9760; --accent-soft:#3A2519;
    --good:#63C593; --warn:#DCAC4C; --bad:#E5806F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
    --grid-line:rgba(226,232,227,.045); --chip-fg:#0E1517;
  }
}
html[data-bs-theme="dark"] .interactive-article.article-g2pro{
  --paper:#0E1517; --paper-2:#090F11; --surface:#152023; --surface-2:#1B272A;
  --ink:#E2E8E3; --ink-2:#9BADAC; --ink-3:#6F8180;
  --rule:#243234; --rule-2:#34464A;
  --near:#74AFDB; --cate:#AF98DE; --tu:#EC9760; --to:#4FC4B6;
  --accent:#EC9760; --accent-soft:#3A2519;
  --good:#63C593; --warn:#DCAC4C; --bad:#E5806F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  --grid-line:rgba(226,232,227,.045); --chip-fg:#0E1517;
}

.interactive-article.article-g2pro *,
.interactive-article.article-g2pro *::before,
.interactive-article.article-g2pro *::after{box-sizing:border-box}
.interactive-article.article-g2pro{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans","IBM Plex Sans SC",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:17px; line-height:1.78; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:28px 28px;
}
.interactive-article.article-g2pro ::selection{background:var(--accent-soft); color:var(--ink)}
.interactive-article.article-g2pro :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
@media (prefers-reduced-motion:reduce){.interactive-article.article-g2pro *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ============ layout ============ */
.interactive-article.article-g2pro .prose{
  display:grid;
  grid-template-columns:
    [full-start] minmax(1.15rem,1fr)
    [wide-start] minmax(0,10rem)
    [main-start] min(46rem, calc(100% - 2.3rem)) [main-end]
    minmax(0,10rem) [wide-end]
    minmax(1.15rem,1fr) [full-end];
  row-gap:1.35rem;
  padding-bottom:6rem;
}
.interactive-article.article-g2pro .prose>*{grid-column:main}
.interactive-article.article-g2pro .plate{grid-column:wide}
.interactive-article.article-g2pro .full{grid-column:full}
@media (max-width:900px){ .interactive-article.article-g2pro .plate{grid-column:full} }

/* ============ type ============ */
.interactive-article.article-g2pro h1,
.interactive-article.article-g2pro h2,
.interactive-article.article-g2pro h3,
.interactive-article.article-g2pro h4{font-family:"IBM Plex Serif","IBM Plex Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Georgia,serif; text-wrap:balance; margin:0; font-weight:600; letter-spacing:-.01em}
.interactive-article.article-g2pro h2{font-size:1.72rem; line-height:1.32; margin-top:3.4rem}
.interactive-article.article-g2pro h3{font-size:1.22rem; line-height:1.4; margin-top:2.1rem; color:var(--ink)}
.interactive-article.article-g2pro h4{font-size:1rem; line-height:1.45; margin-top:1.4rem; font-family:"IBM Plex Sans","IBM Plex Sans SC",sans-serif; font-weight:600}
.interactive-article.article-g2pro p{margin:0}
.interactive-article.article-g2pro a{color:var(--ink); text-decoration-color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1.5px}
.interactive-article.article-g2pro a:hover{color:var(--accent)}
.interactive-article.article-g2pro strong{font-weight:600; color:var(--ink)}
.interactive-article.article-g2pro em{font-style:italic; color:var(--ink-2)}
.interactive-article.article-g2pro code,
.interactive-article.article-g2pro .mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace; font-variant-numeric:tabular-nums}
.interactive-article.article-g2pro p code,
.interactive-article.article-g2pro li code{font-size:.86em; background:var(--surface-2); border:1px solid var(--rule); border-radius:4px; padding:.08em .34em}
.interactive-article.article-g2pro ul,
.interactive-article.article-g2pro ol{margin:0; padding-left:1.35rem}
.interactive-article.article-g2pro li{margin:.34rem 0}
.interactive-article.article-g2pro li::marker{color:var(--ink-3)}
.interactive-article.article-g2pro hr{border:0; border-top:1px solid var(--rule); margin:2.6rem 0}

.interactive-article.article-g2pro .eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:.7rem;
}
.interactive-article.article-g2pro .eyebrow::after{content:""; flex:1; height:1px; background:var(--rule)}
.interactive-article.article-g2pro .lede{font-size:1.14rem; line-height:1.72; color:var(--ink-2)}
.interactive-article.article-g2pro .small{font-size:.88rem; line-height:1.65; color:var(--ink-2)}
.interactive-article.article-g2pro .cap{font-family:"IBM Plex Mono",monospace; font-size:.74rem; line-height:1.6; color:var(--ink-3); letter-spacing:.01em}

/* ============ header ============ */
.interactive-article.article-g2pro .masthead{grid-column:full; padding:0 1.15rem; margin-bottom:.5rem}
.interactive-article.article-g2pro .masthead-in{max-width:70rem; margin:0 auto; padding:3.4rem 0 2rem; border-bottom:1px solid var(--rule)}
.interactive-article.article-g2pro .tagline{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.6rem}
.interactive-article.article-g2pro h1{font-size:clamp(2.1rem,5.4vw,3.35rem); line-height:1.1; letter-spacing:-.025em}
.interactive-article.article-g2pro h1 .sub{display:block; font-size:.42em; font-weight:500; letter-spacing:0; color:var(--ink-2); margin-top:.85rem; line-height:1.45; font-style:italic}
.interactive-article.article-g2pro .meta-row{display:flex; flex-wrap:wrap; gap:.45rem .5rem; margin-top:1.7rem}
.interactive-article.article-g2pro .tag{
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.04em;
  border:1px solid var(--rule-2); border-radius:100px; padding:.22rem .62rem; color:var(--ink-2);
  background:var(--surface);
}
.interactive-article.article-g2pro .tag.hi{border-color:var(--accent); color:var(--accent)}

/* ============ figure plates ============ */
.interactive-article.article-g2pro .plate-box{
  background:var(--surface); border:1px solid var(--rule); border-radius:10px;
  box-shadow:var(--shadow); overflow:hidden; margin:1.4rem 0;
}
.interactive-article.article-g2pro .plate-head{
  display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
  padding:.85rem 1.1rem; border-bottom:1px solid var(--rule); background:var(--surface-2);
}
.interactive-article.article-g2pro .plate-num{font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:600; letter-spacing:.12em; color:var(--accent)}
.interactive-article.article-g2pro .plate-title{font-family:"IBM Plex Sans","IBM Plex Sans SC",sans-serif; font-weight:600; font-size:.94rem}
.interactive-article.article-g2pro .plate-note{font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--ink-3); margin-left:auto}
.interactive-article.article-g2pro .plate-body{padding:1.1rem}
.interactive-article.article-g2pro .plate-foot{padding:.7rem 1.1rem; border-top:1px solid var(--rule); background:var(--surface-2)}

.interactive-article.article-g2pro figure{margin:1.6rem 0; display:flex; flex-direction:column; gap:.65rem}
.interactive-article.article-g2pro figure img{width:100%; height:auto; display:block; border:1px solid var(--rule); border-radius:8px; background:#fff}
.interactive-article.article-g2pro figcaption{font-family:"IBM Plex Mono",monospace; font-size:.73rem; line-height:1.65; color:var(--ink-3)}
.interactive-article.article-g2pro figcaption b{color:var(--ink-2); font-weight:500}

/* ============ callouts ============ */
.interactive-article.article-g2pro .note{
  border-left:2px solid var(--accent); background:var(--surface); padding:.9rem 1.1rem;
  border-radius:0 8px 8px 0; margin:1.4rem 0; font-size:.94rem; line-height:1.72;
  display:flex; flex-direction:column; gap:.5rem;
}
.interactive-article.article-g2pro .note.teal{border-left-color:var(--to)}
.interactive-article.article-g2pro .note.blue{border-left-color:var(--near)}
.interactive-article.article-g2pro .note-t{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600}
.interactive-article.article-g2pro .note.teal .note-t{color:var(--to)} .interactive-article.article-g2pro .note.blue .note-t{color:var(--near)}

/* ============ equations ============ */
.interactive-article.article-g2pro .eq{
  font-family:"IBM Plex Mono",monospace; font-size:.9rem; line-height:1.9;
  background:var(--surface); border:1px solid var(--rule); border-radius:8px;
  padding:.85rem 1.05rem; margin:1.1rem 0; overflow-x:auto;
  display:flex; align-items:center; gap:1rem;
}
.interactive-article.article-g2pro .eq .body{flex:1; white-space:nowrap}
.interactive-article.article-g2pro .eq .tagno{color:var(--ink-3); font-size:.78rem; flex-shrink:0}
.interactive-article.article-g2pro .eq i{font-family:"IBM Plex Serif",serif; font-style:italic; font-size:1.05em}
.interactive-article.article-g2pro .v{color:var(--accent); font-weight:500}
.interactive-article.article-g2pro .v2{color:var(--to); font-weight:500}
.interactive-article.article-g2pro .v3{color:var(--near); font-weight:500}

/* ============ details / 深入 ============ */
.interactive-article.article-g2pro details.deep{
  border:1px solid var(--rule); border-radius:8px; background:var(--surface);
  margin:1.2rem 0; overflow:hidden;
}
.interactive-article.article-g2pro details.deep>summary{
  cursor:pointer; padding:.7rem 1rem; list-style:none; display:flex; align-items:center; gap:.6rem;
  font-family:"IBM Plex Mono",monospace; font-size:.76rem; letter-spacing:.06em; color:var(--ink-2);
  background:var(--surface-2); user-select:none;
}
.interactive-article.article-g2pro details.deep>summary::-webkit-details-marker{display:none}
.interactive-article.article-g2pro details.deep>summary::before{content:"+"; color:var(--accent); font-weight:600; font-size:1rem; width:.8rem}
.interactive-article.article-g2pro details.deep[open]>summary::before{content:"−"}
.interactive-article.article-g2pro details.deep>summary:hover{color:var(--ink)}
.interactive-article.article-g2pro .deep-body{padding:.3rem 1rem 1rem; display:flex; flex-direction:column; gap:.85rem; font-size:.93rem}
.interactive-article.article-g2pro .deep-body .eq{margin:.3rem 0}

/* ============ controls ============ */
.interactive-article.article-g2pro .ctl-row{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
.interactive-article.article-g2pro button.chip,
.interactive-article.article-g2pro .chip{
  font-family:"IBM Plex Mono",monospace; font-size:.75rem; letter-spacing:.02em;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink-2);
  border-radius:100px; padding:.3rem .72rem; cursor:pointer; transition:all .16s ease;
  display:inline-flex; align-items:center; gap:.4rem;
}
.interactive-article.article-g2pro button.chip:hover{border-color:var(--ink-3); color:var(--ink)}
.interactive-article.article-g2pro button.chip[aria-pressed="true"],
.interactive-article.article-g2pro button.chip.on{
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.interactive-article.article-g2pro button.chip .dot{width:.5rem; height:.5rem; border-radius:50%; background:currentColor; flex-shrink:0}
.interactive-article.article-g2pro button.chip.edge[aria-pressed="true"]{background:var(--c); border-color:var(--c); color:var(--chip-fg)}

.interactive-article.article-g2pro .seg{display:inline-flex; border:1px solid var(--rule-2); border-radius:7px; overflow:hidden; background:var(--surface)}
.interactive-article.article-g2pro .seg button{
  font-family:"IBM Plex Mono",monospace; font-size:.74rem; border:0; background:transparent;
  color:var(--ink-2); padding:.36rem .8rem; cursor:pointer; border-right:1px solid var(--rule);
}
.interactive-article.article-g2pro .seg button:last-child{border-right:0}
.interactive-article.article-g2pro .seg button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.interactive-article.article-g2pro .seg button:hover:not([aria-pressed="true"]){background:var(--surface-2); color:var(--ink)}

.interactive-article.article-g2pro .slider-wrap{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
.interactive-article.article-g2pro .slider-wrap label{font-family:"IBM Plex Mono",monospace; font-size:.74rem; color:var(--ink-2); white-space:nowrap}
.interactive-article.article-g2pro input[type=range]{
  -webkit-appearance:none; appearance:none; height:3px; border-radius:3px;
  background:var(--rule-2); flex:1; min-width:110px; cursor:pointer;
}
.interactive-article.article-g2pro input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--accent); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--accent); cursor:pointer;
}
.interactive-article.article-g2pro input[type=range]::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; background:var(--accent);
  border:2px solid var(--surface); box-shadow:0 0 0 1px var(--accent); cursor:pointer;
}

/* ============ readouts ============ */
.interactive-article.article-g2pro .readout{display:flex; flex-wrap:wrap; gap:1.5rem}
.interactive-article.article-g2pro .ro{display:flex; flex-direction:column; gap:.1rem}
.interactive-article.article-g2pro .ro .k{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.interactive-article.article-g2pro .ro .n{font-family:"IBM Plex Mono",monospace; font-size:1.28rem; font-weight:600; line-height:1.2; font-variant-numeric:tabular-nums}
.interactive-article.article-g2pro .ro .n small{font-size:.6em; font-weight:400; color:var(--ink-3); margin-left:.15em}

/* ============ tables ============ */
.interactive-article.article-g2pro .tbl-scroll{overflow-x:auto; margin:1.3rem 0; border:1px solid var(--rule); border-radius:8px; background:var(--surface)}
.interactive-article.article-g2pro table{border-collapse:collapse; width:100%; font-size:.82rem; font-variant-numeric:tabular-nums}
.interactive-article.article-g2pro th,
.interactive-article.article-g2pro td{padding:.42rem .68rem; text-align:right; white-space:nowrap; border-bottom:1px solid var(--rule)}
.interactive-article.article-g2pro th:first-child,
.interactive-article.article-g2pro td:first-child{text-align:left; font-family:"IBM Plex Sans","IBM Plex Sans SC",sans-serif}
.interactive-article.article-g2pro thead th{
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; background:var(--surface-2); position:sticky; top:0;
}
.interactive-article.article-g2pro tbody td{font-family:"IBM Plex Mono",monospace; color:var(--ink-2)}
.interactive-article.article-g2pro tbody tr:last-child td{border-bottom:0}
.interactive-article.article-g2pro tr.hero td{background:var(--accent-soft); color:var(--ink); font-weight:600}
.interactive-article.article-g2pro tr.hero td:first-child{color:var(--accent)}
.interactive-article.article-g2pro tr.grp td{background:var(--surface-2); font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:left}
.interactive-article.article-g2pro td.best{color:var(--ink); font-weight:600}

/* ============ misc ============ */
.interactive-article.article-g2pro .grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.85rem; margin:1.3rem 0}
.interactive-article.article-g2pro .card{background:var(--surface); border:1px solid var(--rule); border-radius:9px; padding:.95rem 1.05rem; display:flex; flex-direction:column; gap:.45rem}
.interactive-article.article-g2pro .card h4{margin:0}
.interactive-article.article-g2pro .card .small{color:var(--ink-2)}
.interactive-article.article-g2pro .kbadge{
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); display:inline-flex; align-items:center; gap:.35rem;
}
.interactive-article.article-g2pro .kbadge::before{content:""; width:.45rem; height:.45rem; border-radius:1px; background:var(--c,var(--ink-3))}
.interactive-article.article-g2pro svg{display:block; max-width:100%}
.interactive-article.article-g2pro .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ============ [1] UST-KG explorer ============ */
.interactive-article.article-g2pro #kg-stage{position:relative; background:var(--surface-2); border:1px solid var(--rule); border-radius:8px}
.interactive-article.article-g2pro #kg-svg{width:100%; height:auto; aspect-ratio:100/72; touch-action:pan-y}
.interactive-article.article-g2pro .kg-node{cursor:pointer}
.interactive-article.article-g2pro .kg-node circle.hit{fill:transparent}
.interactive-article.article-g2pro .kg-node .body{transition:r .2s ease, fill .2s ease, stroke-width .2s ease}
.interactive-article.article-g2pro .kg-node .lbl{
  font-family:"IBM Plex Mono",monospace; font-size:2.05px; fill:var(--ink-2);
  text-anchor:middle; pointer-events:none; transition:fill .2s ease, font-weight .2s;
}
.interactive-article.article-g2pro .kg-node.sel .lbl,
.interactive-article.article-g2pro .kg-node.traj .lbl{fill:var(--ink); font-weight:600}
.interactive-article.article-g2pro .kg-node.dim{opacity:.26}
.interactive-article.article-g2pro .kg-edge{transition:opacity .3s ease, stroke-width .2s ease; pointer-events:none}
.interactive-article.article-g2pro .kg-edge.dim{opacity:.1}
.interactive-article.article-g2pro .kg-traj-path{fill:none; stroke:var(--tu); stroke-width:.9; stroke-linecap:round; stroke-linejoin:round; opacity:.5; stroke-dasharray:2.5 1.8}
.interactive-article.article-g2pro #kg-hint{
  font-family:"IBM Plex Mono",monospace; font-size:.78rem; line-height:1.75;
  background:var(--paper-2); border:1px solid var(--rule); border-radius:8px;
  padding:.8rem .95rem; min-height:6.2rem; white-space:pre-wrap; word-break:break-word;
}
.interactive-article.article-g2pro #kg-hint .hid{color:var(--accent); font-weight:600}
.interactive-article.article-g2pro #kg-hint .rel{font-weight:500}
.interactive-article.article-g2pro #kg-hint .ph{color:var(--ink-3); font-style:italic; font-family:"IBM Plex Sans SC",sans-serif}
.interactive-article.article-g2pro .kg-legend{display:flex; flex-wrap:wrap; gap:.55rem 1.1rem; align-items:center}

/* ============ [2] prompt bench ============ */
.interactive-article.article-g2pro #pb-prompt{
  font-family:"IBM Plex Mono",monospace; font-size:.74rem; line-height:1.72;
  background:var(--paper-2); border:1px solid var(--rule); border-radius:8px;
  padding:.85rem .95rem; max-height:23rem; overflow-y:auto; white-space:pre-wrap; word-break:break-word;
  scrollbar-width:thin;
}
.interactive-article.article-g2pro .pb-block{display:block; border-left:2px solid var(--rule-2); padding-left:.7rem; margin:0 0 .75rem; transition:border-color .2s, opacity .3s}
.interactive-article.article-g2pro .pb-block:last-child{margin-bottom:0}
.interactive-article.article-g2pro .pb-block .bt{display:block; color:var(--ink-3); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.15rem}
.interactive-article.article-g2pro .pb-block.cand{border-left-color:var(--near)} .interactive-article.article-g2pro .pb-block.cand .bt{color:var(--near)}
.interactive-article.article-g2pro .pb-block.hint{border-left-color:var(--accent)} .interactive-article.article-g2pro .pb-block.hint .bt{color:var(--accent)}
.interactive-article.article-g2pro .pb-block.hist{border-left-color:var(--to)} .interactive-article.article-g2pro .pb-block.hist .bt{color:var(--to)}
.interactive-article.article-g2pro .pb-block.qa{border-left-color:var(--cate)} .interactive-article.article-g2pro .pb-block.qa .bt{color:var(--cate)}
.interactive-article.article-g2pro .pb-block.off{opacity:.22}
.interactive-article.article-g2pro .pb-hi{background:var(--accent-soft); border-radius:3px; padding:0 .15em}
.interactive-article.article-g2pro .pb-new{animation:slidein .32s ease both}
@keyframes slidein{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
.interactive-article.article-g2pro .pb-tok{color:var(--ink-3)}

.interactive-article.article-g2pro .rank{display:flex; flex-direction:column; gap:.32rem}
.interactive-article.article-g2pro .rank-row{
  display:flex; align-items:center; gap:.55rem; font-family:"IBM Plex Mono",monospace; font-size:.78rem;
  padding:.28rem .5rem; border-radius:5px; border:1px solid transparent; transition:all .3s ease;
}
.interactive-article.article-g2pro .rank-row .pos{color:var(--ink-3); font-size:.68rem; width:1.4rem}
.interactive-article.article-g2pro .rank-row .id{font-weight:500}
.interactive-article.article-g2pro .rank-row .nm{color:var(--ink-3); font-size:.72rem; font-family:"IBM Plex Sans SC",sans-serif; margin-left:auto; text-align:right}
.interactive-article.article-g2pro .rank-row.gt{background:var(--accent-soft); border-color:var(--accent)}
.interactive-article.article-g2pro .rank-row.gt .id{color:var(--accent); font-weight:600}
.interactive-article.article-g2pro .rank-row.decoy{border-color:var(--rule-2); border-style:dashed}

/* ============ [3] GP2L attribution ============ */
.interactive-article.article-g2pro .gp-steps{display:flex; flex-direction:column; gap:.4rem}
.interactive-article.article-g2pro .gp-step{
  display:flex; gap:.7rem; padding:.55rem .7rem; border-radius:7px; border:1px solid transparent;
  transition:all .25s ease; cursor:pointer; text-align:left; background:transparent; font:inherit; color:inherit;
}
.interactive-article.article-g2pro .gp-step:hover{background:var(--surface-2)}
.interactive-article.article-g2pro .gp-step[aria-current="true"]{background:var(--surface-2); border-color:var(--rule-2)}
.interactive-article.article-g2pro .gp-step .sn{
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; font-weight:600; color:var(--ink-3);
  border:1px solid var(--rule-2); border-radius:50%; width:1.35rem; height:1.35rem; flex-shrink:0;
  display:grid; place-items:center; margin-top:.15rem; transition:all .25s;
}
.interactive-article.article-g2pro .gp-step[aria-current="true"] .sn{background:var(--accent); border-color:var(--accent); color:var(--paper)}
.interactive-article.article-g2pro .gp-step .st{font-size:.85rem; font-weight:600; line-height:1.4}
.interactive-article.article-g2pro .gp-step .sd{font-size:.76rem; color:var(--ink-2); line-height:1.55}
.interactive-article.article-g2pro .gp-step:not([aria-current="true"]) .sd{display:none}

.interactive-article.article-g2pro .hint-bars{display:flex; flex-direction:column; gap:.3rem}
.interactive-article.article-g2pro .hb{display:grid; grid-template-columns:2.6rem 1fr auto; align-items:center; gap:.55rem; font-family:"IBM Plex Mono",monospace; font-size:.72rem}
.interactive-article.article-g2pro .hb .hn{color:var(--ink-3)}
.interactive-article.article-g2pro .hb .track{position:relative; height:1.15rem; background:var(--paper-2); border-radius:3px; overflow:hidden}
.interactive-article.article-g2pro .hb .bar{position:absolute; inset:0 auto 0 0; border-radius:3px; transition:width .5s cubic-bezier(.4,0,.2,1), background .3s}
.interactive-article.article-g2pro .hb .bar.tgt{background:var(--to); opacity:.85}
.interactive-article.article-g2pro .hb .bar.pred{background:var(--bad); opacity:.75}
.interactive-article.article-g2pro .hb .bar.delta{background:var(--accent)}
.interactive-article.article-g2pro .hb:not(.pos) .bar{opacity:.3}
.interactive-article.article-g2pro .hb.pos .bar{opacity:1}
.interactive-article.article-g2pro .hb .val{color:var(--ink-2); min-width:2.6rem; text-align:right}
.interactive-article.article-g2pro .hb.pos .hn{color:var(--accent); font-weight:600}
.interactive-article.article-g2pro .hb.pos .val{color:var(--accent); font-weight:600}
.interactive-article.article-g2pro .hb .lab{
  position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  font-size:.62rem; letter-spacing:.06em; color:var(--chip-fg); opacity:0; transition:opacity .3s;
}
.interactive-article.article-g2pro .hb.pos .lab{opacity:1}
.interactive-article.article-g2pro .zbar{display:flex; align-items:flex-end; gap:2px; height:4.5rem}
.interactive-article.article-g2pro .zcol{flex:1; border-radius:2px 2px 0 0; background:var(--rule-2); transition:height .5s ease, background .3s}
.interactive-article.article-g2pro .zcol.pos{background:var(--accent)}

.interactive-article.article-g2pro .flowbox{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr)); gap:.5rem; align-items:stretch;
}
.interactive-article.article-g2pro .fb{
  border:1px solid var(--rule); border-radius:7px; padding:.55rem .65rem; background:var(--surface-2);
  display:flex; flex-direction:column; gap:.2rem; transition:all .3s ease; position:relative;
}
.interactive-article.article-g2pro .fb.act{border-color:var(--accent); background:var(--accent-soft)}
.interactive-article.article-g2pro .fb .fk{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.interactive-article.article-g2pro .fb .fv{font-family:"IBM Plex Mono",monospace; font-size:.82rem; font-weight:500; line-height:1.35}
.interactive-article.article-g2pro .fb.act .fk{color:var(--accent)}

/* ============ results chart ============ */
.interactive-article.article-g2pro .barchart{display:flex; flex-direction:column; gap:.28rem}
.interactive-article.article-g2pro .bc-row{display:grid; grid-template-columns:5.6rem 1fr 3.2rem; align-items:center; gap:.6rem; font-size:.76rem}
.interactive-article.article-g2pro .bc-row .bn{font-family:"IBM Plex Sans SC",sans-serif; color:var(--ink-2); font-size:.74rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.interactive-article.article-g2pro .bc-row .btrack{height:1.05rem; background:var(--paper-2); border-radius:3px; overflow:hidden}
.interactive-article.article-g2pro .bc-row .bfill{height:100%; border-radius:3px; background:var(--rule-2); transition:width .55s cubic-bezier(.4,0,.2,1), background .3s}
.interactive-article.article-g2pro .bc-row .bv{font-family:"IBM Plex Mono",monospace; text-align:right; color:var(--ink-2); font-variant-numeric:tabular-nums}
.interactive-article.article-g2pro .bc-row.trad .bfill{background:var(--near); opacity:.5}
.interactive-article.article-g2pro .bc-row.llm .bfill{background:var(--cate); opacity:.55}
.interactive-article.article-g2pro .bc-row.ours .bfill{background:var(--accent)}
.interactive-article.article-g2pro .bc-row.ours .bn,
.interactive-article.article-g2pro .bc-row.ours .bv{color:var(--accent); font-weight:600}

.interactive-article.article-g2pro .ablate{display:flex; flex-direction:column; gap:.3rem}
.interactive-article.article-g2pro .ab-row{display:grid; grid-template-columns:6.2rem 1fr 3.4rem; align-items:center; gap:.6rem; font-size:.76rem}
.interactive-article.article-g2pro .ab-row .an{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-2)}
.interactive-article.article-g2pro .ab-row .atrack{height:1rem; background:var(--paper-2); border-radius:3px; position:relative; overflow:hidden}
.interactive-article.article-g2pro .ab-row .afill{position:absolute; right:50%; top:0; bottom:0; background:var(--bad); opacity:.7; transition:width .5s ease}
.interactive-article.article-g2pro .ab-row .azero{position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--rule-2)}
.interactive-article.article-g2pro .ab-row .av{font-family:"IBM Plex Mono",monospace; text-align:right; color:var(--bad); font-variant-numeric:tabular-nums}

@media (max-width:640px){ .interactive-article.article-g2pro #kg-cols,
.interactive-article.article-g2pro #pb-cols,
.interactive-article.article-g2pro #gp-cols{grid-template-columns:1fr!important} }
.interactive-article.article-g2pro .mono i,
.interactive-article.article-g2pro code i,
.interactive-article.article-g2pro .eq i{font-family:"IBM Plex Serif",Georgia,serif; font-style:italic}



/* Chirpy owns the page shell and article gutter. */
.interactive-article.article-g2pro{
  margin:0;
  padding:0;
  background:transparent;
  color:var(--ink);
  font-size:1rem;
}
.interactive-article.article-g2pro .prose{display:block;padding:0;}
.interactive-article.article-g2pro .prose>*{max-width:100%;}
.interactive-article.article-g2pro .prose>p,
.interactive-article.article-g2pro .prose>ul,
.interactive-article.article-g2pro .prose>ol,
.interactive-article.article-g2pro .prose>details{margin-block:1.15rem;}
.interactive-article.article-g2pro .article-intro{padding:0 0 1.5rem;border-bottom:1px solid var(--rule);margin-bottom:1.4rem;}
.interactive-article.article-g2pro .paper-title{font-size:1.08rem;line-height:1.6;margin:.6rem 0 0;}
.interactive-article.article-g2pro .paper-meta{margin-top:1rem;color:var(--ink-3);}
.interactive-article.article-g2pro .article-footer{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--rule);}
.interactive-article.article-g2pro h2{scroll-margin-top:5rem;}
.interactive-article.article-g2pro .eq{display:grid;grid-template-columns:minmax(0,1fr) auto;}
.interactive-article.article-g2pro .eq .body{min-width:0;white-space:normal;overflow-x:auto;overscroll-behavior-inline:contain;}
.interactive-article.article-g2pro .eq mjx-container[display="true"]{min-width:max-content;margin:.35em auto!important;}
.interactive-article.article-g2pro .lightbox{position:fixed;inset:0;background:rgba(8,14,16,.93);z-index:1100;display:none;align-items:center;justify-content:center;padding:2rem;cursor:zoom-out;}
.interactive-article.article-g2pro .lightbox.is-open{display:flex;}
.interactive-article.article-g2pro .lightbox img{max-width:100%;max-height:100%;border-radius:6px;background:#fff;}
@media (max-width:640px){
  .interactive-article.article-g2pro .plate-body{padding:.85rem;}
  .interactive-article.article-g2pro .plate-head{align-items:flex-start;}
  .interactive-article.article-g2pro .plate-note{width:100%;margin-left:0;}
}