.tutorial-page { max-width: 1040px; margin: 0 auto; }
.tutorial-header { display:none; }
.tutorial-eyebrow { color: #9a7628; font-size: 11px; font-weight: 800; letter-spacing: .22em; }
.tutorial-header h2 { margin: 6px 0 8px; font-size: 30px; }
.tutorial-header p { margin: 0; color: var(--muted); }
.tutorial-body { display: grid; gap: 18px; }
.tutorial-body.is-collapsed .tutorial-phases { display:none; }
.tutorial-summary-toggle { display:flex; width:100%; align-items:center; gap:16px; padding:18px 22px; border:0; background:#fff; color:#1e2330; font:inherit; text-align:left; cursor:pointer; }
.tutorial-summary-title { display:grid; min-width:0; }
.tutorial-summary-title strong { font-size:19px; line-height:1.45; }
.tutorial-summary-title small { color:#5b6280; font-size:12.5px; }
.tutorial-summary-eyebrow { color:#3d55e6; font-size:10.5px; font-weight:800; letter-spacing:.14em; }
.tutorial-next-assistive { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.tutorial-summary-copy { display:flex; align-items:center; gap:18px; margin:0 0 0 auto; color:#5b6280; font-size:12.5px; font-weight:700; white-space:nowrap; }
.tutorial-summary-copy i { display:grid; width:34px; height:34px; place-items:center; border:1px solid #e7ebf2; border-radius:9px; font-style:normal; }
.tutorial-summary, .tutorial-phase { border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(19, 31, 55, .05); }
.tutorial-summary { overflow:hidden; padding:0; border-radius:18px; }
.tutorial-summary-copy span { color:#5b6280; font-weight:700; }
.tutorial-progress { height: 8px; overflow: hidden; border-radius: 999px; background: #edf0f5; }
.tutorial-summary > .tutorial-progress { position:absolute; width:130px; margin:-30px 56px 0 auto; right:22px; height:6px; }
.tutorial-progress span { display: block; width: var(--tutorial-progress); height: 100%; border-radius: inherit; background:#0f7a4e; transition: width .2s; }
.tutorial-phase { overflow: hidden; }
.tutorial-phase-header { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px; padding: 18px 20px; background: #faf8f2; border-bottom: 1px solid #eadfbe; }
.tutorial-phase-number { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #151922; color: #fff; font-weight: 800; }
.tutorial-phase-header h3 { margin: 0 0 3px; font-size: 18px; }
.tutorial-phase-header p { margin: 0; color: var(--muted); font-size: 13px; }
.tutorial-phase-header > strong { color: #8c6c28; }
.tutorial-phase-steps { padding: 0 20px; }
.tutorial-step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.tutorial-step:last-child { border-bottom: 0; }
.tutorial-step-number { display: grid; place-items: center; align-self: start; width: 30px; height: 30px; border: 1px solid #d5c28b; border-radius: 50%; color: #8c6c28; font-weight: 800; }
.tutorial-step.is-done .tutorial-step-number { background: #e8f7ed; border-color: #9bd2aa; color: #18783b; }
.tutorial-step.is-current { margin: 0 -20px; padding: 20px; background: #fffcf3; }
.tutorial-next-label { display: inline-block; margin-bottom: 6px; padding: 3px 8px; border-radius: 999px; background: #171b24; color: #fff; font-size: 11px; font-weight: 800; }
.tutorial-step-content h4 { margin: 0 0 5px; font-size: 16px; }
.tutorial-step-content p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.tutorial-choices, .tutorial-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tutorial-choices { margin-bottom: 10px; }
.tutorial-choice { min-width: 112px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); font-weight: 700; cursor: pointer; }
.tutorial-choice.is-selected { border-color: #1d2738; background: #1d2738; color: #fff; }
.tutorial-choice:disabled { cursor: wait; opacity: .7; }
.tutorial-actions .btn { text-decoration: none; }
.tutorial-manual { color: #8c6c28; }
.tutorial-loading, .tutorial-load-error { margin: 0; }
@media (max-width: 640px) {
  .tutorial-header h2 { font-size: 25px; }
  .tutorial-summary-copy { display: grid; gap: 5px; }
  .tutorial-phase-header { grid-template-columns: 38px 1fr; }
  .tutorial-phase-header > strong { grid-column: 2; }
  .tutorial-phase-steps { padding: 0 14px; }
  .tutorial-step.is-current { margin: 0 -14px; padding: 20px 14px; }
}