.nb-onpage-work-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);gap:68px;align-items:start}
.nb-onpage-work-copy{min-width:0}
.nb-onpage-work-body{min-width:0}
.nb-onpage-work-body>.sec-body{max-width:none}
.nb-onpage-work-visual{position:sticky;top:calc(var(--nb-header-height) + 80px);align-self:start}
.nb-onpage-browser{overflow:hidden;border:1.5px solid var(--ink);border-radius:var(--radius-md);background:var(--white)}
.nb-onpage-browser__bar{display:flex;align-items:center;gap:6px;padding:11px 13px;border-bottom:1px solid var(--line-strong);background:var(--paper)}
.nb-onpage-browser__bar>i{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
.nb-onpage-browser__bar>span{flex:1;margin-left:6px;padding:4px 8px;border-radius:var(--radius-pill);background:var(--white);font:500 8px/1.3 var(--font-sans);color:var(--gray)}
.nb-onpage-serp,.nb-onpage-heading,.nb-onpage-answer{display:flex;align-items:flex-start;gap:10px;margin:13px;padding:12px;border-radius:var(--radius-sm)}
.nb-onpage-serp{border:1px solid var(--line-strong);margin-bottom:8px}
.nb-onpage-serp>b,.nb-onpage-heading>b,.nb-onpage-answer>b,.nb-onpage-pagebody b,.nb-onpage-bottom b{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--sun);font:700 9px/1 var(--font-sans);color:var(--ink)}
.nb-onpage-serp span,.nb-onpage-heading span,.nb-onpage-answer span{min-width:0;flex:1}
.nb-onpage-serp small,.nb-onpage-serp strong,.nb-onpage-heading small,.nb-onpage-heading strong,.nb-onpage-answer small,.nb-onpage-answer strong{display:block}
.nb-onpage-serp small,.nb-onpage-heading small,.nb-onpage-answer small,.nb-onpage-pagebody small{font:600 8px/1.4 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.nb-onpage-serp strong{font:700 12px/1.35 var(--font-sans);color:var(--ink);margin-top:2px}
.nb-onpage-serp span>i{display:block;width:70%;height:4px;margin-top:6px;border-radius:2px;background:var(--line-strong)}
.nb-onpage-heading{align-items:center;margin-top:8px;margin-bottom:8px;background:var(--sun-tint)}
.nb-onpage-heading strong{font:700 16px/1.3 var(--font-display);color:var(--ink);margin-top:2px}
.nb-onpage-pagebody{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(92px,.65fr);gap:9px;margin:0 13px}
.nb-onpage-copy-block,.nb-onpage-image-block{min-height:126px;padding:12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm)}
.nb-onpage-copy-block>span,.nb-onpage-image-block>span{display:flex;align-items:center;gap:7px}
.nb-onpage-copy-block>strong{display:block;font:700 12px/1.35 var(--font-sans);color:var(--ink);margin:12px 0 9px}
.nb-onpage-copy-block>i{display:block;width:100%;height:5px;margin-top:6px;border-radius:3px;background:var(--dot-empty)}
.nb-onpage-copy-block>i:nth-of-type(2){width:86%}.nb-onpage-copy-block>i:nth-of-type(3){width:94%}.nb-onpage-copy-block>i:nth-of-type(4){width:63%}
.nb-onpage-image-block>div{position:relative;height:72px;margin-top:11px;overflow:hidden;border-radius:var(--radius-sm);background:var(--sun-tint)}
.nb-onpage-image-block>div:before{content:"";position:absolute;width:18px;height:18px;right:12px;top:11px;border-radius:50%;background:var(--sun)}
.nb-onpage-image-block>div>i{position:absolute;left:7px;right:7px;bottom:-15px;height:49px;background:var(--ink);clip-path:polygon(0 100%,28% 36%,47% 69%,68% 18%,100% 100%)}
.nb-onpage-image-block>div>i+ i{left:45%;right:-10px;bottom:-22px;height:47px;opacity:.22}
.nb-onpage-answer{align-items:center;margin-top:9px;margin-bottom:9px;border:1px solid var(--line-strong)}
.nb-onpage-answer strong{font:700 11px/1.35 var(--font-sans);margin-top:2px;color:var(--ink)}
.nb-onpage-answer>.nb-icon{width:20px;height:20px;color:var(--ink)}
.nb-onpage-bottom{display:flex;justify-content:space-between;gap:8px;padding:11px 13px;border-top:1px solid var(--line-strong);background:var(--paper)}
.nb-onpage-bottom>span{display:flex;align-items:center;gap:5px;font:600 9px/1.35 var(--font-sans);color:var(--ink)}
.nb-onpage-bottom .nb-icon{width:12px;height:12px}
.nb-onpage-bottom b{width:19px;height:19px;font-size:8px}
.nb-onpage-bottom code{font:600 9px/1.35 var(--font-sans);color:var(--ink);background:transparent}
@media(max-width:1000px){.nb-onpage-work-layout{grid-template-columns:minmax(0,1.05fr) minmax(330px,.85fr);gap:38px}.nb-onpage-work-visual{padding:22px}.nb-onpage-pagebody{grid-template-columns:1fr}.nb-onpage-image-block{min-height:100px}.nb-onpage-image-block>div{height:52px}.nb-onpage-copy-block{min-height:112px}}
@media(max-width:760px){.nb-onpage-work-layout{grid-template-columns:1fr;gap:0}.nb-onpage-work-copy{display:contents}.nb-onpage-work-copy>.sec-h2{order:1;margin-bottom:24px}.nb-onpage-work-visual{position:static;order:2;width:100%;max-width:480px;justify-self:center;margin-bottom:30px}.nb-onpage-work-body{order:3}.nb-onpage-pagebody{grid-template-columns:minmax(0,1.35fr) minmax(92px,.65fr)}.nb-onpage-image-block{min-height:126px}.nb-onpage-image-block>div{height:72px}.nb-onpage-copy-block{min-height:126px}}
@media(max-width:380px){.nb-onpage-pagebody{grid-template-columns:1fr}.nb-onpage-image-block{min-height:100px}.nb-onpage-image-block>div{height:52px}.nb-onpage-copy-block{min-height:112px}.nb-onpage-bottom{flex-direction:column}}