.code-frame{border-radius:var(--radius-card);background:var(--color-code-block-bg);margin:24px 0;overflow:hidden}.code-frame__bar{color:#aab1c3;letter-spacing:.06em;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;min-height:48px;padding:8px 10px 8px 16px;font-size:12px;font-weight:700;line-height:18px;display:flex}figure.code-frame ::selection{color:var(--ds-white);background:#ffffff47}.code-frame__copy{min-height:32px;color:var(--ds-white);font:inherit;letter-spacing:0;cursor:pointer;background:0 0;border:1px solid #ffffff2e;border-radius:8px;padding:0 12px;font-size:12px;transition:border-color .1s,background .1s}.code-frame__copy[hidden]{display:none}.code-frame__copy:hover{border-color:var(--ds-white);background:#ffffff14}.code-frame__copy:focus-visible{outline:2px solid var(--ds-white);outline-offset:2px}.code-frame .article-code-block{color:#e6e9f2;counter-reset:code-line;tab-size:4;white-space:pre-wrap;border-radius:0;margin:0;padding:16px 16px 16px 52px;font:14px/22px ui-monospace,JetBrains Mono,SFMono-Regular,Menlo,Consolas,monospace;overflow-x:auto}.article-code-block code,[data-blog-content] .article-code-block code{overflow-wrap:anywhere;color:inherit;font:inherit;background:0 0;padding:0}.article-code-block .line:before{float:left;color:#5c6478;content:counter(code-line);counter-increment:code-line;text-align:right;user-select:none;width:3ch;margin-left:-36px;margin-right:calc(36px - 3ch)}.article-code-block .line:last-child:empty:before{content:none}