.tutorial-walkthrough { margin: 1.6rem 0 2rem; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface, transparent); }
.tutorial-walkthrough h3 { margin: 0 0 .5rem; }
.tutorial-walkthrough .tutorial-caption, .tutorial-walkthrough .tutorial-hint { color: var(--muted); font-size: .88rem; }
.tutorial-controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.tutorial-controls[hidden], .tutorial-step[hidden] { display: none; }
.tutorial-controls button { font: inherit; font-size: .82rem; font-weight: 650; color: var(--text); background: var(--card, transparent); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .75rem; cursor: pointer; min-height: 44px; }
.tutorial-controls [data-tutorial="play"] { background: #1264db; color: #fff; border-color: #1264db; }
.tutorial-controls button:disabled { opacity: .5; cursor: default; }
.tutorial-controls button:focus-visible, .tutorial-image-link:focus-visible { outline: 3px solid #568aff; outline-offset: 3px; }
.tutorial-status { margin-left: auto; font-size: .8rem; color: var(--muted); }
.prose-article .tutorial-steps { list-style: none; margin: 0; padding: 0; }
.tutorial-step { margin: 0 0 1.5rem; animation: tutorial-reveal .24s ease-out; }
.tutorial-step h4 { font-size: 1rem; margin: .6rem 0; }
.tutorial-step figure { margin: 0; }
.tutorial-image-link { display: block; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); }
.tutorial-step img { display: block; width: 100%; height: auto; background: #f1f5fc; }
.tutorial-step figcaption { margin-top: .7rem; line-height: 1.65; font-size: .93rem; }
.tutorial-hint { margin-bottom: 0; }
@keyframes tutorial-reveal { from { opacity: .3; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .tutorial-walkthrough { padding: .7rem; } .tutorial-controls { gap: .4rem; } .tutorial-status { margin-left: 0; flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .tutorial-step { animation: none; } }
@media print { .tutorial-controls, .tutorial-hint { display: none !important; } .tutorial-step[hidden] { display: block !important; } .tutorial-step { break-inside: avoid; } }