/* Tutorial overview and guided spotlight */
.tutorial-view{max-width:1120px;margin-inline:auto}
.tutorial-page-intro{align-items:flex-end}
.tutorial-duration{display:inline-flex;align-items:center;gap:7px;flex:none;padding:9px 12px;border:1px solid #dce9dc;border-radius:999px;background:#f4f8f2;color:#38644a;font-size:12px;font-weight:750}
.tutorial-duration span{font-size:17px;line-height:1}
.tutorial-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin:22px 0 16px;padding:24px;border:1px solid #e1e9df;border-radius:18px;background:linear-gradient(120deg,#f6faf3,#fff 66%);box-shadow:0 10px 30px rgba(37,77,48,.05)}
.tutorial-hero-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:19px;background:#e8f2e6;color:#2d6544}
.tutorial-hero-mark svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tutorial-hero-copy{min-width:0}
.tutorial-hero-copy .side-overline{color:#6e8a72}
.tutorial-hero-copy h2{margin:6px 0 5px;color:#23392b;font-size:22px;letter-spacing:-.5px}
.tutorial-hero-copy p{max-width:620px;margin:0;color:#718078;font-size:13px;line-height:1.6}
.tutorial-start-button{min-height:44px;white-space:nowrap}
.tutorial-start-button span{margin-left:7px}
.tutorial-safety-note{display:flex;align-items:flex-start;gap:11px;margin:0 0 22px;padding:14px 16px;border:1px solid #e3e9d8;border-radius:13px;background:#f8f9f2;color:#596b5d}
.tutorial-safety-note p{margin:0;font-size:12px;line-height:1.65}
.tutorial-safety-note strong{color:#344d39}
.tutorial-safety-icon{display:grid;place-items:center;flex:none;width:21px;height:21px;border-radius:50%;background:#e9f0dc;color:#496b3b;font-size:13px;font-weight:800}
.tutorial-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.tutorial-step-card{display:flex;align-items:flex-start;gap:13px;min-height:91px;padding:16px;border:1px solid #e6ebe4;border-radius:14px;background:#fff}
.tutorial-step-card>span{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:#edf5eb;color:#3a694b;font-size:12px;font-weight:800}
.tutorial-step-card h3{margin:1px 0 4px;color:#2e4234;font-size:14px}
.tutorial-step-card p{margin:0;color:#738077;font-size:12px;line-height:1.55}
.tutorial-page-status{margin:18px 0 0;color:#758177;font-size:12px;line-height:1.6}

.tutorial-tour{position:fixed;inset:0;z-index:9990;pointer-events:none}
.tutorial-tour[hidden]{display:none!important}
.tutorial-tour-shade{position:fixed;z-index:0;background:rgba(19,31,24,.68);pointer-events:auto}
.tutorial-tour-spotlight{position:fixed;z-index:1;border:2px solid rgba(223,245,205,.98);border-radius:12px;box-shadow:0 0 0 1px rgba(29,80,49,.2),0 0 25px rgba(229,255,209,.22);pointer-events:none;transition:top .18s ease,left .18s ease,width .18s ease,height .18s ease}
.tutorial-tour-card{position:fixed;z-index:2;width:min(390px,calc(100vw - 28px));max-height:calc(100vh - 24px);overflow:auto;padding:18px;border:1px solid #dce7da;border-radius:17px;background:#fff;color:#293b2e;box-shadow:0 20px 60px rgba(7,20,11,.3);pointer-events:auto}
.tutorial-tour-card:focus{outline:3px solid rgba(90,153,102,.28);outline-offset:3px}
.tutorial-tour-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.tutorial-tour-step-count{color:#6c8a70;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.tutorial-tour-close{display:grid;place-items:center;width:30px;height:30px;margin-left:auto;border:1px solid #e4eae2;border-radius:9px;background:#f7f9f6;color:#526255;font-size:20px;line-height:1}
.tutorial-tour-close:hover{background:#eef4ed;color:#245d3c}
.tutorial-tour-card h2{margin:0 0 7px;color:#20382a;font-size:19px;letter-spacing:-.3px;line-height:1.28}
.tutorial-tour-card p{margin:0;color:#627167;font-size:13px;line-height:1.6}
.tutorial-tour-hint{margin-top:11px!important;padding:10px 11px;border-left:3px solid #8bb58a;border-radius:0 8px 8px 0;background:#f4f8f1;color:#4e6553!important;font-size:12px!important}
.tutorial-tour-hint.warning{border-left-color:#d39b4d;background:#fcf7ed;color:#735c37!important}
.tutorial-tour-controls{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:13px;border-top:1px solid #edf0eb}
.tutorial-tour-controls .button{min-height:36px;padding:8px 11px;font-size:12px}
.tutorial-tour-controls .tutorial-tour-next{margin-left:auto}
.tutorial-tour-controls .tutorial-tour-skip{border:0;background:transparent;color:#6b786d}
.tutorial-tour-controls .tutorial-tour-skip:hover{background:#f4f7f2;color:#32543d}
.tutorial-tour.is-suspended .tutorial-tour-shade,.tutorial-tour.is-suspended .tutorial-tour-spotlight,.tutorial-tour.is-suspended .tutorial-tour-card{display:none!important}
@media(max-width:760px){
  .tutorial-page-intro{align-items:flex-start;gap:12px}
  .tutorial-hero{grid-template-columns:auto minmax(0,1fr);gap:13px;padding:18px}
  .tutorial-hero-mark{width:52px;height:52px;border-radius:15px}
  .tutorial-hero-mark svg{width:29px;height:29px}
  .tutorial-hero-copy h2{font-size:19px}
  .tutorial-start-button{grid-column:1/-1;width:100%;justify-content:center}
  .tutorial-steps{grid-template-columns:1fr;gap:8px}
  .tutorial-step-card{min-height:76px;padding:13px}
  .tutorial-tour-card{width:calc(100vw - 24px);padding:16px;border-radius:15px}
  .tutorial-tour-card h2{font-size:18px}
  .tutorial-tour-controls{gap:6px}
  .tutorial-tour-controls .button{padding:8px 9px}
}
@media(prefers-reduced-motion:reduce){.tutorial-tour-spotlight{transition:none!important}}