/* Editorial additions scoped to the refreshed, static tutorials. */
.tutorial-page .tutorial-background { font-size: 15px; color: #53615a; }
.tutorial-toc { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: 12px; }
.tutorial-toc strong { flex-basis: 100%; font-size: 15px; }
.tutorial-toc a { font-size: 14px; }
.tutorial-page section { scroll-margin-top: 100px; }
.tutorial-page .pro-body h2 { margin: 30px 0 14px; font-size: 23px; line-height: 1.5; }
.tutorial-page .pro-body h3 { margin: 22px 0 10px; font-size: 19px; line-height: 1.5; }
.tutorial-page section > p + p, .tutorial-page section > ol + p, .tutorial-page section > ul + p { margin-top: 16px; }
.tutorial-page .pro-body li { margin-top: 10px; }
.tutorial-page .tutorial-note { padding: 14px 18px; border-radius: 10px; background: #f1f5f2; font-size: 14px; color: #47584d; }
.tutorial-page blockquote { margin: 14px 0; padding: 12px 18px; font-style: normal; background: #f4f7f4; }
.tutorial-page pre { overflow-x: auto; padding: 14px 18px; border: 1px solid var(--color-border); border-radius: 10px; margin: 14px 0; }
.tutorial-page pre code { padding: 0; background: transparent; white-space: pre; }
.tutorial-table { overflow-x: auto; margin: 16px 0; border-radius: 8px; }
.tutorial-table table { min-width: 620px; }
.tutorial-table caption { text-align: left; color: #53615a; font-size: 13px; margin-bottom: 10px; }
.tutorial-table td, .tutorial-table th { vertical-align: top; }
.tutorial-table th[scope="row"] { width: 23%; }
.tutorial-table:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
@media (max-width: 600px) {
    .tutorial-page .pro-body h2 { font-size: 21px; }
    .tutorial-toc { padding: 14px 16px; gap: 10px 14px; }
}