.tutorial { min-width: 0; }
.tutorial > h3 { font-size: 23px; line-height: 1.3; }
.tutorial p, .tutorial li { line-height: 1.7; }
.tutorial-demo { color: var(--muted); font-size: 12px; }
.tutorial-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 25px; }
.tutorial-index a { border: 1px solid var(--border, #ddd); border-radius: 8px; padding: 7px 10px; color: var(--primary, #514bc3); text-decoration: none; }
.tutorial-step { padding: 8px 0 23px; margin: 0 0 20px; border-bottom: 1px solid var(--border, #ddd); scroll-margin-top: 22px; }
.tutorial-step h4 { display: flex; align-items: center; gap: 10px; font-size: 18px; line-height: 1.4; margin: 5px 0 14px; }
.tutorial-step h4 > span { display: inline-grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; color: #fff; background: var(--primary, #514bc3); font-size: 15px; }
.tutorial-result { border-left: 3px solid var(--primary, #514bc3); padding: 9px 13px; background: rgba(81,75,195,.06); border-radius: 0 7px 7px 0; }
.tutorial-figure { margin: 18px 0 8px; }
.tutorial-figure img { display: block; width: 100%; max-width: 100%; height: auto; border: 1px solid var(--border, #ddd); border-radius: 10px; }
.tutorial-figure a { display: block; }
.tutorial-figure figcaption { font-size: 11px; line-height: 1.5; margin-top: 7px; color: var(--muted); }
.tutorial details { margin: 18px 0; }
.tutorial-help { border-top: 1px solid var(--border, #ddd); padding-top: 15px; }
@media (max-width: 600px) { .tutorial > h3 { font-size: 20px; } .tutorial-step h4 { font-size: 16px; } .tutorial-index { display: grid; grid-template-columns: 1fr; } .tutorial-index a { font-size: 13px; } .tutorial p, .tutorial li { font-size: 14px; } }