/* Public code presentation. Inline examples keep their place in the paragraph. */
main :not(pre) > code,
.ocm-product-description__body :not(pre) > code {
    display: inline;
    width: auto;
    padding: .12em .34em;
    border: 1px solid #dce5ef;
    border-radius: 4px;
    background: #eef3f9;
    color: #245785;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    white-space: normal;
    overflow-wrap: anywhere;
}
main pre,
.ocm-product-description__body pre {
    max-width: 100%;
    padding: 1.25rem;
    border: 1px solid #2b3a50;
    border-radius: 10px;
    background: #111827;
    color: #e5edf8;
    font-size: 14px;
    line-height: 1.75;
    tab-size: 4;
    white-space: pre;
    overflow: auto;
}
.ocm-code {
    min-width: 0;
    max-width: 100%;
    margin: 1.5rem 0;
    border: 1px solid #2b3a50;
    border-radius: 10px;
    background: #111827;
    overflow: hidden;
}
.ocm-code__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid #2b3a50;
    background: #192337;
    color: #b7c6dc;
    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ocm-code__copy {
    flex: 0 0 auto;
    padding: .3rem .65rem;
    border: 1px solid #42546e;
    border-radius: 5px;
    background: transparent;
    color: #e5edf8;
    font: inherit;
    cursor: pointer;
}
.ocm-code__copy:hover { background: #2b3a50; }
.ocm-code__copy:focus-visible,
main .ocm-code pre:focus-visible {
    outline: 2px solid #7dd3fc;
    outline-offset: -3px;
}
main .ocm-code pre,
.ocm-product-description__body .ocm-code pre {
    margin: 0;
    padding: 1.1rem 1.25rem 1.3rem;
    border: 0;
    border-radius: 0;
    scrollbar-color: #516582 #111827;
}
main .ocm-code pre code,
.ocm-product-description__body .ocm-code pre code {
    display: block;
    width: max-content;
    min-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e5edf8;
    font: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
}
.ocm-code .hljs-comment,
.ocm-code .hljs-quote { color: #a7b9d0; }
.ocm-code .hljs-keyword,
.ocm-code .hljs-selector-tag,
.ocm-code .hljs-literal { color: #ffadb5; }
.ocm-code .hljs-string,
.ocm-code .hljs-regexp,
.ocm-code .hljs-addition { color: #a9dfb5; }
.ocm-code .hljs-number,
.ocm-code .hljs-attr,
.ocm-code .hljs-variable,
.ocm-code .hljs-symbol { color: #f4ce8c; }
.ocm-code .hljs-title,
.ocm-code .hljs-section,
.ocm-code .hljs-name,
.ocm-code .hljs-type { color: #8dc8ff; }
.ocm-code .hljs-built_in,
.ocm-code .hljs-link,
.ocm-code .hljs-bullet,
.ocm-code .hljs-meta { color: #8fe1e0; }
.ocm-code .hljs-deletion { color: #ffadb5; }
.ocm-code .hljs-emphasis { font-style: italic; }
.ocm-code .hljs-strong,
.ocm-code .hljs-section { font-weight: 700; }
.ocm-code__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .ocm-code { margin: 1.25rem 0; border-radius: 8px; }
    .ocm-code__bar { padding: .6rem .8rem; }
    main .ocm-code pre,
    .ocm-product-description__body .ocm-code pre { padding: .9rem; font-size: 13px; }
}
@media print {
    .ocm-code__copy { display: none; }
    main .ocm-code pre code { width: auto; white-space: pre-wrap; }
}