/* /best/ redesign previews (B1/B2/B3). Design D: ink rules, mono numbers, one spot colour. */
.bx{padding-top:clamp(24px,3vw,44px)}
.bx-h1{font-weight:900;font-size:clamp(40px,5.4vw,78px);line-height:.95;letter-spacing:-.035em;margin:0}
.bx-lede{font-size:clamp(17px,1.4vw,20px);color:var(--mut);margin:10px 0 0}
.bx-note{font-size:14px;color:var(--mut);margin:0 0 10px}
.bx-ex{font-size:12px;color:var(--mut);margin:8px 0 0;line-height:1.5}.bx-ex a{color:var(--mut)}
.bx-med{font-size:12px;color:var(--mut);margin:26px 0 0}
.bx .s-ad .ad{margin-top:40px}
.bx-list{list-style:none;margin:0;padding:0}
.bx-list li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid #d7d5cf}
.bx-list.bars li{grid-template-columns:30px minmax(150px,220px) minmax(0,1fr) 110px}
.bx-list a{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}.bx-list a b{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bx-list a:hover b{color:var(--spot)}
.bx-list .btl.xs{width:11px;height:30px;stroke-width:3;flex:none;margin:0}
.bx-n{font:500 12px var(--m);color:var(--spot)}
.bx-v{font:500 16px var(--m);text-align:right;white-space:nowrap}.bx-v small{font-family:var(--f);font-size:11px;color:var(--mut)}
.bx-bar{display:block;height:10px;position:relative}.bx-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.bx-list.bars li:first-child .bx-bar i{background:var(--spot)}
/* B1 leaderboard */
.lb1-wrap{margin-top:clamp(22px,3vw,40px);border-top:6px solid var(--ink)}
.lb1{border-bottom:1px solid var(--ink)}
.lb1 summary{list-style:none;display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,3fr) 70px;align-items:center;gap:18px;padding:16px 0;cursor:pointer}
.lb1 summary::-webkit-details-marker{display:none}
.lb1-h b{display:block;font-weight:900;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em}.lb1-h small{font:500 11px var(--m);text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.lb1-top{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lb1-top a{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-decoration:none}
.lb1-top .btl.sh{grid-row:1/3;width:20px;height:54px;stroke-width:2.2}
.lb1-top b{font-weight:700;font-size:15px;align-self:end}.lb1-top span{font:500 15px var(--m);align-self:start}.lb1-top span small{font-family:var(--f);font-size:11px;color:var(--mut)}
.lb1-top li:first-child span{color:var(--spot)}
.lb1-top a:hover b{color:var(--spot)}
.lb1-more{justify-self:end;font-weight:700;font-size:13px;border-bottom:2px solid var(--spot);padding-bottom:2px;white-space:nowrap}
.lb1[open] .lb1-more{border-color:var(--ink)}
.lb1-body{padding:0 0 22px;max-width:760px;margin-left:auto}
/* B2 chart */
.b2-tabs{display:flex;flex-wrap:wrap;gap:6px 22px;margin:clamp(20px,2.6vw,34px) 0 18px;border-bottom:3px solid var(--ink);padding-bottom:10px}
.b2-tabs button{font:700 15px var(--f);background:none;border:0;padding:4px 0;cursor:pointer;color:var(--mut);border-bottom:3px solid transparent;margin-bottom:-13px;padding-bottom:10px}
.b2-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--spot)}.b2-tabs button:hover{color:var(--ink)}
.b2-chart{padding:16px 22px 18px}
.b2-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:10px solid var(--ink);padding-bottom:6px;margin-bottom:6px}
.b2-head h2{margin:0;font-weight:900;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.025em}.b2-head p{margin:0;font-size:12px;color:var(--mut);max-width:44ch;text-align:right}
/* B3 question-first */
.b3 .bx-h1{text-align:center}
.b3-q{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:clamp(18px,2.4vw,30px) auto clamp(26px,3.4vw,46px);max-width:900px}
.b3-q button{font:600 15px var(--f);padding:9px 16px;border:1.5px solid var(--ink);border-radius:999px;background:none;cursor:pointer;color:var(--ink)}
.b3-q button[aria-pressed="true"]{background:var(--ink);color:#f2f0ea}.b3-q button:hover{border-color:var(--spot)}
.b3-card{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);border-top:10px solid var(--ink);padding-top:22px;align-items:start}
.b3-win{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:start}
.b3-bt .btl.big{width:150px;margin:0}
.b3-k{font:500 12px var(--m);text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:6px 0 4px}
.b3-txt h2{margin:0;font-weight:900;font-size:clamp(40px,4.6vw,68px);letter-spacing:-.035em;line-height:1}.b3-txt h2 a{text-decoration:none}.b3-txt h2 a:hover{color:var(--spot)}
.b3-v{font:500 clamp(28px,3vw,42px) var(--m);color:var(--spot);margin:14px 0 0}.b3-v small{font-family:var(--f);font-size:15px;color:var(--mut);margin-left:4px}.b3-v span{display:block;font:600 13px var(--f);color:var(--ink);margin-top:2px}
.b3-why{font-size:15px;color:var(--mut);max-width:42ch;margin:14px 0 0}
.b3-ru h3{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin:6px 0 6px;border-bottom:3px solid var(--ink);padding-bottom:8px}
.b3-more{margin-top:14px}.b3-more summary{cursor:pointer;font-weight:700;font-size:14px;display:inline-block;border-bottom:2px solid var(--spot);padding-bottom:2px}
.b3-all{display:inline-block;margin-top:14px;font-weight:700;font-size:14px;text-decoration:none}.b3-all:hover{color:var(--spot)}
@media(max-width:820px){.lb1 summary{grid-template-columns:1fr auto}.lb1-top{grid-column:1/-1;grid-row:2}.lb1-more{grid-row:1;grid-column:2}
 .b3-card{grid-template-columns:1fr}.bx-list.bars li{grid-template-columns:24px minmax(110px,1fr) 1fr 84px}}
@media(max-width:640px){.bx-h1{font-size:40px}.lb1-top{grid-template-columns:1fr;gap:6px}.lb1-top a{grid-template-columns:18px auto 1fr;grid-template-rows:auto}.lb1-top .btl.sh{grid-row:auto;width:14px;height:38px}.lb1-top span{text-align:right}
 .bx-list.bars li{grid-template-columns:22px minmax(0,1fr) 78px;row-gap:4px}.bx-list.bars .bx-bar{grid-column:2/4;grid-row:2;height:6px}
 .b2-tabs{flex-wrap:nowrap;overflow-x:auto;gap:18px;margin-right:-20px;padding-right:20px}.b2-tabs button{white-space:nowrap}.b2-chart{padding:12px}.b2-head{flex-direction:column;gap:4px}.b2-head p{text-align:left}
 .b3-q button{font-size:14px;padding:8px 13px}.b3-win{grid-template-columns:96px 1fr;gap:16px}.b3-bt .btl.big{width:96px}.b3-txt h2{font-size:36px}.b3-v{font-size:26px}}
.b3-card[hidden],.b2-p[hidden]{display:none}