.tutorial-opening { padding-bottom: 64px; }
.tutorial-opening__title { margin-top: 24px; }
.tutorial-opening__term { background: var(--grad-text); background-clip: text; -webkit-background-clip: text; color: transparent; }
.tutorial-opening__lead { max-width: 54em; margin-top: 20px; color: var(--text-muted); font-size: 18px; line-height: 1.85; }
.tutorial-opening__condition { max-width: 76ch; margin-top: 32px; }
.tutorial-opening__condition a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: .2em; }
.tutorial-toc { margin-top: 42px; }
.tutorial-opening__hint { color: var(--text-muted); font-size: 13px; }

.tutorial-step { scroll-margin-top: 24px; }
.tutorial-step__heading { display: flex; align-items: start; gap: 24px; margin-bottom: 36px; }
.tutorial-step__number { flex-shrink: 0; padding-top: 5px; color: var(--accent-dark); font: 13px/1.5 var(--font-mono); }
.section--dark .tutorial-step__number { color: var(--periwinkle); }
.tutorial-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); align-items: start; gap: clamp(28px, 6vw, 90px); }
.tutorial-layout--framed { padding: 36px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg); color: var(--text); box-shadow: var(--shadow-front); }
.tutorial-layout--text { grid-template-columns: minmax(0, 1fr) minmax(220px, 310px); }
.tutorial-copy { max-width: 74ch; }
.tutorial-copy p { color: var(--text-muted); line-height: 1.85; }
.section--dark .tutorial-copy p { color: var(--text-muted); }
.tutorial-copy strong { color: var(--text); font-weight: 500; }
.tutorial-copy h3 { font-size: 20px; }
.tutorial-layout .official-shot { width: min(100%, 280px); }
.tutorial-check { padding: 24px; border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--bg-panel); }
.tutorial-check .tutorial-check__label { color: var(--accent-dark); font-size: 13px; font-weight: 500; }
.tutorial-check ol { margin-top: 16px; }
.tutorial-check li { display: grid; gap: 2px; padding-block: 12px; border-top: 1px solid var(--border); }
.tutorial-check strong { font-weight: 500; }
.tutorial-check span { color: var(--text-muted); font-size: 14px; }
.tutorial-finish .wrap > p { max-width: 66ch; margin-top: 18px; color: var(--text-muted); line-height: 1.85; }

@media (max-width: 860px) {
  .tutorial-layout, .tutorial-layout--text { grid-template-columns: minmax(0, 1fr); }
  .tutorial-layout .official-shot { margin-top: 8px; }
  .tutorial-layout--framed { padding: 26px; }
  .tutorial-check { max-width: 440px; }
}
@media (max-width: 640px) {
  .tutorial-opening__lead { font-size: 16px; }
  .tutorial-step__heading { gap: 12px; }
  .tutorial-step__number { font-size: 11px; }
  .tutorial-layout--framed { padding: 20px; }
}