.tutorial-page { max-width: 860px; }
.tutorial-page h1 { word-break: break-word; }
.tutorial-page h2 { scroll-margin-top: 24px; }
.tutorial-page h3 { scroll-margin-top: 24px; }
.tutorial-page p { white-space: pre-wrap; overflow-wrap: anywhere; }
.tutorial-image { margin: 22px 0 30px; text-align: center; }
.tutorial-image img { display: block; width: min(100%, 760px); height: auto; max-height: 760px; margin: 0 auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); object-fit: contain; }
html.dark .tutorial-image img { box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
@media (max-width: 520px) { .tutorial-image { margin: 18px -2px 24px; } .tutorial-image img { border-radius: 6px; } }

.tutorial-page ol, .tutorial-page ul { margin: 12px 0 22px; padding-left: 28px; color: var(--text-soft); }
.tutorial-page li { margin: 6px 0; padding-left: 4px; }
.tutorial-page blockquote { margin: 18px 0 26px; border-left: 4px solid var(--brand); border-radius: 0 8px 8px 0; background: var(--bg-soft); padding: 12px 18px; color: var(--text-soft); }
.tutorial-page blockquote p:first-child { margin-top: 0; }
.tutorial-page blockquote p:last-child { margin-bottom: 0; }