/* s07b — Đọ sức trên cùng 100 ô thật (benchmark). Colours: cyan = Hệ 1, violet = LLM, grey = rule, gold = audience/human. */
#s07b { background: radial-gradient(1100px 800px at 18% 62%, rgba(76, 201, 240, .07), transparent 70%), radial-gradient(900px 700px at 85% 40%, rgba(167, 139, 250, .05), transparent 70%); }
.s07b { --rule: #8fa59a; --l1: rgba(167, 139, 250, .62); --l2: rgba(167, 139, 250, .8); --l3: #a78bfa; }
.s07b h2 { font-size: 60px; }
.s07b-tag { position: absolute; right: 0; top: 0; }
.s07b-track { position: absolute; right: 0; top: 64px; display: flex; gap: 6px; font-size: 16px; }
.s07b-track span { white-space: nowrap; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink3); transition: all .5s var(--ease-out); }
.s07b-track span.on { color: var(--ink); border-color: var(--cyan); background: rgba(76, 201, 240, .12); }

/* ── left: map of the 100 tiles ── */
.s07b-left { position: absolute; left: 0; top: 150px; width: 470px; }
.s07b-map { position: relative; width: 440px; height: 440px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(76, 201, 240, .35); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); user-select: none; }
.s07b-map.hot:hover { transform: none; }
.s07b-map img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; transition: opacity .6s var(--ease-out); }
.s07b-map.before img.a { opacity: 0; }
.s07b-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.s07b-cell .f { fill: var(--red); transition: fill-opacity .3s; }
.s07b-cell .o { fill: transparent; stroke: rgba(236, 247, 240, .32); stroke-width: .025; transition: stroke .2s, stroke-width .2s; }
.s07b-cell:hover .o, .s07b-cell.hov .o { stroke: #fff; stroke-width: .07; }
.s07b-cell.ex .o { stroke: var(--violet); stroke-width: .1; }
.s07b-map.before .s07b-cell .f { fill-opacity: 0 !important; }
.s07b-date { position: absolute; left: 12px; top: 12px; font-size: 17px; padding: 5px 11px; border-radius: 8px; background: rgba(4, 12, 9, .78); pointer-events: none; }
.s07b-date .d19 { display: none; } .s07b-date .d26 { color: var(--cyan); }
.s07b-map.before .d19 { display: inline; } .s07b-map.before .d26 { display: none; }
.s07b-km { position: absolute; right: 12px; bottom: 12px; font-size: 16px; padding: 5px 11px; border-radius: 8px; background: rgba(4, 12, 9, .78); color: var(--ink2); pointer-events: none; }
.s07b-legend { margin-top: 10px; font-size: 18px; white-space: nowrap; color: var(--ink2); display: flex; align-items: center; gap: 10px; }
.s07b-legend i { flex: none; width: 44px; height: 12px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 77, 94, .08), rgba(255, 77, 94, .65)); }

.s07b-read { margin-top: 12px; padding: 12px 18px 10px; border-radius: 16px; }
.s07b-read .rh { display: flex; align-items: baseline; gap: 12px; font-size: 19px; color: var(--ink2); padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.s07b-read .rh > b { font: 700 24px var(--mono); color: var(--ink); }
.s07b-read .rh .hint { font-size: 16px; }
.s07b-read .rh em { margin-left: auto; font-style: normal; color: var(--ink2); }
.s07b-read .rh em b { font: 700 24px var(--mono); color: var(--red); }
.s07b-read .ri { display: grid; grid-template-columns: 136px 1fr 58px 62px; gap: 10px; align-items: center; height: 27px; font-size: 19px; }
.s07b-read .ri .n { color: var(--ink2); white-space: nowrap; }
.s07b-read .ri .tr { position: relative; height: 12px; background: rgba(170, 230, 200, .07); border-radius: 3px; }
.s07b-read .ri .tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; transition: width .35s var(--ease-out); }
.s07b-read .ri .tr u { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--red); transition: left .35s var(--ease-out); }
.s07b-read .ri .v { font: 600 19px var(--mono); text-align: right; }
.s07b-read .ri .e { font: 500 16px var(--mono); color: var(--ink3); text-align: right; }
.s07b-read .ri .e.bad { color: var(--amber); } .s07b-read .ri .e.ok { color: var(--green); }
.s07b-read .ri.h1 .n { color: var(--cyan); font-weight: 700; }

/* contender colour tokens shared by every chart */
.s07b .rule { --c: var(--rule); } .s07b .l1 { --c: var(--l1); } .s07b .l2 { --c: var(--l2); } .s07b .l3 { --c: var(--l3); }
.s07b .h1 { --c: var(--cyan); }
.s07b .casc { --c: linear-gradient(90deg, var(--cyan), var(--violet)); }
.s07b-read .ri .tr i, .s07b .bt i { background: var(--c); }

/* ── stage + panels ── */
.s07b-stage { position: absolute; left: 540px; right: 0; top: 150px; height: 728px; }
.s07b-p { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateX(40px); transition: opacity .5s var(--ease-out), transform .8s var(--ease-out), visibility 0s .5s; }
.s07b[data-p="0"] .s07b-p0, .s07b[data-p="1"] .s07b-p1, .s07b[data-p="2"] .s07b-p2, .s07b[data-p="3"] .s07b-p3, .s07b[data-p="4"] .s07b-p4, .s07b[data-p="5"] .s07b-p5 {
  opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease-out) .15s, transform 1s var(--ease-out) .15s, visibility 0s; }
.s07b .ct > b { display: block; font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.s07b .ct > span { display: block; font-size: 20px; color: var(--ink2); line-height: 1.25; margin-top: 3px; }
.s07b .ph { display: flex; align-items: center; gap: 22px; }
.s07b .ph h3 { font-size: 40px; }

/* panel 0 · set-up */
.s07b-p0 .lab { font-size: 19px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.s07b-p0 .cards { display: grid; grid-template-columns: 210px 624px 274px; gap: 16px; margin-top: 70px; }
.s07b-p0 .llmgrp { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.s07b-p0 .gl { position: absolute; left: 0; right: 0; top: -46px; height: 30px; border: 2px solid rgba(167, 139, 250, .55); border-bottom: none; border-radius: 10px 10px 0 0; }
.s07b-p0 .gl span { position: absolute; left: 50%; top: -17px; transform: translateX(-50%); white-space: nowrap; background: var(--bg); padding: 0 14px; font-size: 22px; font-weight: 600; color: var(--violet); }
.s07b-p0 .cc { position: relative; background: var(--panel); border: 1px solid var(--line); border-top: 6px solid var(--c); border-radius: 16px; padding: 18px 18px 16px; min-height: 168px; }
.s07b-p0 .cc b { display: block; font-size: 30px; line-height: 1.1; color: var(--ink); }
.s07b-p0 .cc span { display: block; font-size: 22px; line-height: 1.3; color: var(--ink2); margin-top: 8px; }
.s07b-p0 .cc.h1 { border-color: rgba(76, 201, 240, .5); border-top-color: var(--cyan); box-shadow: 0 0 0 1px rgba(76, 201, 240, .15), 0 20px 60px rgba(76, 201, 240, .12); }
.s07b-p0 .cc.h1 b { color: var(--cyan); }
.s07b-p0 .cc.llm b { color: #c9b8ff; }
.s07b-p0 .rules { display: flex; gap: 14px; margin-top: 22px; }
.s07b-p0 .rules span { font-size: 22px; color: var(--ink2); padding: 10px 18px; border-radius: 12px; border: 1px dashed var(--line2); }
.s07b-p0 .rules b { color: var(--ink); }
.s07b-ask { margin-top: 40px; padding: 26px 30px 22px; border-radius: 22px; border: 1px solid rgba(242, 193, 78, .45); background: rgba(242, 193, 78, .05); box-shadow: 0 20px 70px rgba(242, 193, 78, .08); }
.s07b-ask .q { font-size: 40px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.s07b-ask .q b { color: var(--gold); }
.s07b-ask .q small { font-size: 22px; font-weight: 400; color: var(--ink2); margin-left: 6px; }
.s07b-ask .opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
.s07b-ask button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line2); }
.s07b-ask button > b { flex: none; font: 800 26px/1 var(--mono); color: var(--gold); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(242, 193, 78, .6); }
.s07b-ask button span { font-size: 28px; font-weight: 700; line-height: 1.1; }
.s07b-ask button small { display: block; font-size: 20px; font-weight: 400; color: var(--ink2); margin-top: 4px; }
.s07b-ask button.picked { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242, 193, 78, .35), 0 20px 60px rgba(242, 193, 78, .16); }
.s07b-ask .hint { margin-top: 16px; }

/* shared bar rows */
.s07b .names { display: flex; flex-direction: column; }
.s07b .names span { height: 66px; display: flex; align-items: center; font-size: 24px; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.s07b .names span.h1 { color: var(--cyan); font-weight: 800; font-size: 26px; }
.s07b .names span.llm { color: #c9b8ff; }
.s07b .bars { position: relative; }
.s07b .br { display: grid; grid-template-columns: 1fr 92px; gap: 12px; align-items: center; height: 66px; }
.s07b .bt { position: relative; height: 30px; border-radius: 6px; background: rgba(170, 230, 200, .06); }
.s07b .bt i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); min-width: 4px; border-radius: 6px; }
.s07b .br.h1 .bt i { box-shadow: 0 0 24px rgba(76, 201, 240, .45); }
.s07b .bv { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink2); }
.s07b .br.h1 .bv { color: var(--cyan); }
.s07b .br.llm .bv { color: #c9b8ff; }
.s07b .bv.na { color: var(--ink3); font-weight: 400; }
.s07b .ax { position: relative; height: 26px; margin-right: 104px; border-top: 1px solid var(--line2); }
.s07b .ax span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 16px; color: var(--ink3); white-space: nowrap; }
.s07b .ax span:first-child { transform: none; }

/* panel 1 · quality */
.s07b-p1 .ans { font: 700 24px var(--mono); color: var(--bg); background: var(--gold); padding: 10px 18px; border-radius: 999px; white-space: nowrap; }
.s07b-p1 .ans b { font-size: 28px; }
.s07b-p1 .qg { display: grid; grid-template-columns: 158px repeat(3, 1fr); gap: 30px; margin-top: 30px; }
.s07b-p1 .names, .s07b-p2 .names { padding-top: 88px; }
.s07b-p1 .ct, .s07b-p2 .ct { height: 88px; }
.s07b-p1 .cl { position: absolute; top: -8px; bottom: -8px; width: 0; left: calc((100% - 104px) * var(--x)); border-left: 2.5px dashed var(--ink); z-index: 2; }
.s07b-p1 .cl span { position: absolute; top: 100%; left: -2px; margin-top: 4px; font: 600 17px var(--mono); color: var(--ink); white-space: nowrap; }
.s07b-p1 .qn { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.s07b-worse, .s07b-cav { font-size: 23px; line-height: 1.3; border-radius: 14px; padding: 14px 20px; }
.s07b-worse { color: var(--ink); background: rgba(167, 139, 250, .08); border: 1px solid rgba(167, 139, 250, .45); border-left: 4px solid var(--violet); }
.s07b-worse b { color: var(--violet); } .s07b-worse u { text-decoration-color: var(--ink); text-underline-offset: 5px; }
.s07b-cav { color: var(--ink); background: rgba(255, 176, 32, .07); border: 1px solid rgba(255, 176, 32, .4); border-left: 4px solid var(--amber); }
.s07b-cav b { color: var(--amber); } .s07b-cav u { text-decoration-color: var(--amber); text-underline-offset: 5px; }

/* panel 2 · cost & speed */
.s07b-p2 .hero { display: flex; align-items: center; gap: 34px; }
.s07b-p2 .hero > div { display: flex; align-items: baseline; gap: 14px; }
.s07b-p2 .hero .big { white-space: nowrap; font: 800 76px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(76, 201, 240, .35); }
.s07b-p2 .hero .w { white-space: nowrap; font-size: 28px; font-weight: 600; color: var(--ink); }
.s07b-p2 .hero > i { width: 2px; height: 70px; background: var(--line2); }
.s07b-p2 .hero em { font-style: normal; font-size: 20px; color: var(--ink2); margin-left: auto; white-space: nowrap; line-height: 1.25; }
.s07b-p2 .cg { display: grid; grid-template-columns: 158px 600px 1fr; gap: 26px; margin-top: 22px; }
.s07b-cost .ct span i, .s07b-cost .ct span i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin: 0 6px 0 4px; vertical-align: -1px; }
.s07b-cost .ct span i.ps { background: var(--ink2); } .s07b-cost .ct span i.yr { background: rgba(180, 205, 191, .35); }
.s07b-cost { position: relative; }
.s07b-cost .hd { position: absolute; right: 0; top: 58px; display: flex; gap: 0; font-size: 16px; color: var(--ink3); }
.s07b-cost .hd span { text-align: right; } .s07b-cost .hd span:first-child { width: 96px; } .s07b-cost .hd span:last-child { width: 132px; }
.s07b-cost .br { grid-template-columns: 1fr 90px 126px; gap: 6px; } .s07b-cost .bv { white-space: nowrap; }
.s07b-cost .bt i.yr { opacity: .38; }
.s07b-cost .bv.y { font-weight: 500; font-size: 22px; text-align: right; }
.s07b-cost .bv.p { text-align: right; }
.s07b-cost .ax { margin-right: 228px; }
.s07b-p2 .pass { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: 26px; font-size: 24px; color: var(--ink); padding: 14px 20px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.s07b-p2 .pass .dim { font-size: 21px; color: var(--ink2); white-space: nowrap; }

/* panel 3 · reliability */
.s07b-rep { padding: 18px 24px 16px; border-radius: 18px; }
.s07b-rep .ct { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.s07b-rep .ct span { margin: 0; }
.s07b-rep .rrow { display: grid; grid-template-columns: 150px 1fr 230px; align-items: center; height: 54px; }
.s07b-rep .rn { font-size: 26px; font-weight: 700; }
.s07b-rep .sqs { display: flex; gap: 6px; }
.s07b-rep .sq { position: relative; width: 30px; height: 30px; perspective: 200px; }
.s07b-rep .sq i { position: absolute; inset: 0; border-radius: 6px; background: var(--c, var(--cyan)); transition: transform .6s var(--ease-back), background .3s .25s; }
.s07b-rep .sq.h1 { --c: var(--cyan); } .s07b-rep .sq.llm { --c: var(--l2); }
.s07b-rep .sq.fl.on i { transform: rotateY(180deg); background: var(--amber); box-shadow: 0 0 18px rgba(255, 176, 32, .6); }
.s07b-rep .sq.fl.on::after { content: '↺'; position: absolute; inset: 0; display: grid; place-items: center; font: 800 20px var(--font); color: #1b1203; }
.s07b-rep .rv { white-space: nowrap; font-size: 24px; color: var(--ink2); text-align: right; }
.s07b-rep .rv b { font: 800 30px var(--mono); }
.s07b-rep .h1 .rv b { color: var(--cyan); } .s07b-rep .hk .rv b { color: var(--amber); }
.s07b-p3 .r3 { display: grid; grid-template-columns: 350px 350px 1fr; gap: 20px; margin-top: 20px; }
.s07b-p3 .r3 > .card { padding: 18px 20px; border-radius: 18px; }
.s07b-fail { border-color: rgba(167, 139, 250, .4); }
.s07b-fail .chips { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s07b-fail .chips img { width: 100%; aspect-ratio: 1; border-radius: 8px; display: block; }
.s07b-fail .chips .id { position: absolute; left: 8px; top: 8px; font-size: 17px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: rgba(4, 12, 9, .8); color: var(--violet); }
.s07b-fail .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 8px; }
.s07b-fail .nums span { font-size: 17px; color: var(--ink2); line-height: 1.1; }
.s07b-fail .nums b { display: block; font: 800 30px var(--mono); margin-top: 3px; }
.s07b-fail .nums .ref b { color: var(--red); } .s07b-fail .nums .h1 b { color: var(--cyan); } .s07b-fail .nums .llm b { color: var(--violet); }
.s07b .s07b-fail p { font-size: 22px; line-height: 1.3; color: var(--ink); margin: 0; }
.s07b-fail p b { color: var(--violet); }
.s07b-out .o1 { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; margin-top: 12px; }
.s07b-out .o2 { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.s07b-out .spr { width: 120px; height: 120px; border-radius: 8px; background: url(../data/web/benchmark_examples.png) no-repeat; background-size: 503.4px auto; background-position: -378.8px -178.1px; border: 1px solid rgba(76, 201, 240, .5); }
.s07b-out .o1 b, .s07b-out .o2 > div > b { font-size: 26px; } .s07b-out .o1 > div > b:first-child { display: block; } .s07b-out .o2 > div > b { margin-right: 10px; }
.s07b-out .o1 span, .s07b-out .o2 span { font-size: 22px; line-height: 1.3; color: var(--ink); }
.s07b-out .o2 .llmv { color: var(--violet); font-family: var(--mono); }
.s07b-out .llmq { margin-top: 10px; font-size: 16px; line-height: 1.35; color: #c9b8ff; background: rgba(167, 139, 250, .08); border: 1px dashed rgba(167, 139, 250, .5); border-radius: 8px; padding: 8px 12px; }

/* panel 4 · honest conclusion */
.s07b-p4 .tiers { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr; align-items: stretch; }
.s07b-p4 .tiers > i { font-style: normal; font-size: 32px; color: var(--ink3); display: grid; place-items: center; }
.s07b-p4 .tier { border-radius: 18px; padding: 20px 22px; border: 1px solid; background: var(--panel); }
.s07b-p4 .tier b { display: block; font-size: 32px; line-height: 1.12; white-space: nowrap; }
.s07b-p4 .tier span { display: block; font-size: 22px; color: var(--ink2); margin-top: 8px; line-height: 1.3; }
.s07b-p4 .tier.h1 { border-color: rgba(76, 201, 240, .55); box-shadow: 0 20px 60px rgba(76, 201, 240, .12); } .s07b-p4 .tier.h1 b { color: var(--cyan); }
.s07b-p4 .tier.llm { border-color: rgba(167, 139, 250, .55); box-shadow: 0 20px 60px rgba(167, 139, 250, .12); } .s07b-p4 .tier.llm b { color: var(--violet); }
.s07b-p4 .tier.hu { border-color: rgba(242, 193, 78, .55); box-shadow: 0 20px 60px rgba(242, 193, 78, .1); } .s07b-p4 .tier.hu b { color: var(--gold); }
.s07b-p4 .casc { margin-top: 24px; padding: 20px 26px; border-radius: 20px; }
.s07b-p4 .casc .ct { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.s07b-p4 .casc .ct > span { margin: 0; white-space: nowrap; }
.s07b-p4 .cn { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 24px; margin-top: 14px; }
.s07b-p4 .cn > div { border-top: 1px solid var(--line); padding-top: 12px; }
.s07b-p4 .cn .big { display: block; font: 800 72px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.s07b-p4 .cn > div > span:last-child { display: block; font-size: 22px; color: var(--ink2); margin-top: 8px; line-height: 1.3; }
.s07b-honest { display: flex; gap: 20px; align-items: flex-start; margin-top: 22px; padding: 18px 24px; border-radius: 16px; background: rgba(167, 139, 250, .07); border: 1px solid rgba(167, 139, 250, .45); border-left: 4px solid var(--violet); }
.s07b-honest .tag { flex: none; margin-top: 4px; }
.s07b .s07b-honest p { margin: 0; font-size: 26px; line-height: 1.35; color: var(--ink); }
.s07b-honest .a, .s07b-honest .b { font-family: var(--mono); font-weight: 700; }
.s07b-honest .b { color: var(--cyan); }
.s07b-next5 { margin-top: 16px; font-size: 19px; color: var(--ink2); }

/* panel 5 · paperwork benchmark (SYNTHETIC records) */
.s07b-p5 .ph { align-items: center; }
.s07b-p5 .ph .tag.big { flex: none; font-size: 22px; padding: 12px 18px; background: rgba(255, 176, 32, .1); box-shadow: 0 0 30px rgba(255, 176, 32, .15); }
.s07b-p5 .ph h3 { font-size: 36px; }
.s07b-p5 .ph .sub { display: block; font-size: 19px; color: var(--ink2); margin-top: 4px; }
.s07b-p5 .hero { display: flex; align-items: center; gap: 28px; margin-top: 14px; }
.s07b-p5 .hero > div { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.s07b-p5 .hero .big { font: 800 66px/1 var(--font); letter-spacing: -.03em; text-shadow: 0 0 40px rgba(76, 201, 240, .35); }
.s07b-p5 .hero .w { font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.s07b-p5 .hero > i { width: 2px; height: 56px; background: var(--line2); }
.s07b-p5 .hero em { font-style: normal; font-size: 20px; color: var(--ink2); margin-left: auto; }
.s07b-p5 .jt { margin-top: 12px; }
.s07b-p5 .jh, .s07b-p5 .jr { display: grid; grid-template-columns: 270px 1fr 140px 140px 76px 100px; gap: 14px; align-items: center; }
.s07b-p5 .jh { white-space: nowrap; font-size: 18px; color: var(--ink2); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.s07b-p5 .jh em { font-style: normal; color: var(--ink3); margin-left: 6px; }
.s07b-p5 .jh span:nth-child(n+5) { text-align: center; }
.s07b-p5 .jr { height: 56px; border-bottom: 1px solid var(--line); }
.s07b-p5 .jr .n { white-space: nowrap; font-size: 22px; font-weight: 700; color: var(--ink2); line-height: 1.05; }
.s07b-p5 .jr .n small { display: block; font-size: 16px; font-weight: 400; color: var(--ink3); margin-top: 2px; }
.s07b-p5 .jr.h1 { background: linear-gradient(90deg, rgba(76, 201, 240, .12), rgba(76, 201, 240, 0)); border-radius: 10px; border-bottom: none; }
.s07b-p5 .jr.h1 .n { color: var(--cyan); }
.s07b-p5 .jr.llm .n { color: #c9b8ff; }
.s07b .jraw { --c: rgba(76, 201, 240, .38); }
.s07b-p5 .cc, .s07b-p5 .pm { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.s07b-p5 .cc b { width: 100px; text-align: right; }
.s07b-p5 .pm b { width: 64px; text-align: right; font-size: 20px; }
.s07b-p5 .bt { height: 22px; }
.s07b-p5 .jr b { font-size: 22px; color: var(--ink2); }
.s07b-p5 .jr.h1 b { color: var(--cyan); } .s07b-p5 .jr.llm b { color: #c9b8ff; }
.s07b-p5 .fn { font-size: 30px; font-weight: 800; text-align: center; }
.s07b-p5 .fn.ok { color: var(--green); } .s07b-p5 .fn.bad { color: var(--amber); }
.s07b-p5 .lt { font-size: 22px; text-align: center; color: var(--ink2); }
.s07b-p5 .jr.h1 .lt { color: var(--cyan); font-weight: 700; }
.s07b-p5 .jn { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.s07b-p5 .jw, .s07b-p5 .jh2 { font-size: 20.5px; line-height: 1.3; border-radius: 14px; padding: 12px 18px; color: var(--ink); }
.s07b-p5 .jw { background: rgba(255, 176, 32, .07); border: 1px solid rgba(255, 176, 32, .4); border-left: 4px solid var(--amber); }
.s07b-p5 .jw > b { color: var(--amber); } .s07b-p5 .jw u { text-decoration-color: var(--amber); text-underline-offset: 4px; }
.s07b-p5 .jh2 { background: rgba(167, 139, 250, .07); border: 1px solid rgba(167, 139, 250, .45); border-left: 4px solid var(--violet); }
.s07b-p5 .jh2 > b:first-child { color: var(--violet); }
.s07b-p5 p.na { font-size: 22px; color: var(--ink3); }

#s07b > .src { font-size: 15px; color: var(--ink3); max-width: 1680px; }

.s07b-tag5 { display: none; }
.s07b[data-p="5"] .s07b-tag:not(.s07b-tag5) { display: none; }
.s07b[data-p="5"] .s07b-tag5 { display: inline-flex; }
.s07b-date em { font-style: normal; color: var(--ink3); margin-left: 6px; }
.s07b-p5 .jr.h1 { padding-left: 8px; margin-left: -8px; }
/* visible glosses: metric column subtitles + the pre-registered 10% rule */
.s07b .ct > span.gl-note { display: flex; font-size: 19px; line-height: 1.25; }
.s07b .ct > span.gl-note::before { margin-top: 1px; }
.s07b-p0 .s07b-n10 { display: flex; margin-top: 12px; font-size: 19px; }
.s07b-p0 .s07b-n10 + .s07b-ask { margin-top: 16px; }

/* polish pass: keep the hero row inside the 1800px content edge; ease crowded log-axis ticks */
.s07b-p2 .hero { gap: 22px; }
.s07b .ax span { font-size: 15px; letter-spacing: -.02em; }