.tutorial-shell{width:min(880px,calc(100% - 48px));margin-inline:auto;}
.tutorial-nav{height:86px;}
.tutorial-back{font-size:13px;color:var(--muted);padding:14px 0;}
.tutorial-back:hover{color:var(--orange-dark);}
.tutorial-hero{display:grid;grid-template-columns:1fr 190px;gap:35px;align-items:center;padding:65px 0 28px;}
.tutorial-title{font-size:43px;white-space:normal;line-height:1.5;letter-spacing:-1.8px;}
.tutorial-deck{font-size:15px;line-height:1.95;color:var(--muted);margin-top:20px;max-width:550px;}
.tutorial-date{font-size:11px;color:var(--muted);margin-top:20px;}
.tutorial-mascot{height:auto;transform:rotate(5deg);}
.tutorial-route{display:flex;align-items:center;justify-content:space-between;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--paper);gap:15px;margin:8px 0 26px;}
.tutorial-route span{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;}
.tutorial-route b{font-size:12px;color:var(--orange-dark);}
.tutorial-route i{font-style:normal;color:var(--purple);}
.tutorial-intro{font-size:15px;line-height:2.1;color:var(--muted);}
.tutorial-toc{display:block;position:static;background:#eee5f8;border:1px solid #e1d5ec;border-radius:17px;margin:30px 0 10px;padding:26px;box-shadow:none;}
.tutorial-toc>p{font-size:15px;font-weight:700;margin-bottom:17px;}
.tutorial-toc>div{display:grid;grid-template-columns:1fr 1fr;gap:15px 28px;}
.tutorial-toc a{font-size:13px;line-height:1.6;color:#6c527e;}
.tutorial-toc a:hover{text-decoration:underline;}
.tutorial-section{padding:39px 0;border-bottom:1px solid var(--line);scroll-margin-top:105px;}
.tutorial-section .section-kicker{margin-bottom:13px;}
.tutorial-section h2{font-size:28px;letter-spacing:-1px;line-height:1.6;margin-bottom:21px;}
.tutorial-section p,.tutorial-section li,.tutorial-section dd{font-size:15px;line-height:2.15;color:#675e55;overflow-wrap:anywhere;}
.tutorial-section p+p{margin-top:17px;}
.tutorial-section li+li{margin-top:13px;}
.tutorial-section ol,.tutorial-section ul{padding-left:24px;}
.tutorial-section a,.tutorial-source a{color:#7950af;text-decoration:underline;text-underline-offset:3px;}
.tutorial-tip{border-left:3px solid var(--orange);background:#fffaf2;padding:19px 22px;margin-top:25px;border-radius:0 12px 12px 0;}
.tutorial-tip strong{font-size:14px;line-height:1.8;}
.tutorial-tip p{margin-top:8px;font-size:14px;}
.tutorial-faq{margin:0;}
.tutorial-faq>div{margin:22px 0;}
.tutorial-faq dt{font-size:16px;font-weight:700;line-height:1.8;}
.tutorial-faq dd{margin:7px 0 0;}
.tutorial-security{background:#eee5f8;border:1px solid #e0d1ef;padding:24px;border-radius:15px;margin-top:28px;}
.tutorial-security h3{font-size:18px;line-height:1.7;margin:0 0 12px;}
.tutorial-security p{font-size:14px;}
/* Intrinsic dimensions reserve space while screenshots load; never crop interface instructions. */
.tutorial-figure{width:100%;max-width:880px;margin:24px auto 30px;}
.tutorial-figure-compact{max-width:560px;}
.tutorial-figure>a{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;cursor:zoom-in;}
.tutorial-figure>a:focus-visible{outline:3px solid var(--purple);outline-offset:4px;}
.tutorial-figure img{display:block;width:100%;height:auto;}
.tutorial-figure figcaption{font-size:12px;line-height:1.9;color:var(--muted);margin-top:10px;text-align:center;overflow-wrap:anywhere;}
.tutorial-checklist li::marker{color:var(--orange-dark);}
.tutorial-contact{margin:38px 0;padding:32px;background:#eee5f8;border-radius:20px;border:1px solid #e1d5ec;scroll-margin-top:105px;}
.tutorial-contact h2{font-size:28px;letter-spacing:-1px;}
.tutorial-contact>p:not(.section-kicker):not(.copy-status){font-size:14px;line-height:1.9;color:var(--muted);margin-top:12px;}
.tutorial-contact .button{margin-top:0;}
.tutorial-source{font-size:11px;line-height:2;color:var(--muted);margin-bottom:40px;overflow-wrap:anywhere;}
.tutorial-library{min-height:calc(100vh - 245px);padding-bottom:50px;}
.tutorial-catalog{display:grid;gap:22px;margin-top:20px;}
.tutorial-card{display:grid;grid-template-columns:105px 1fr;align-items:center;gap:28px;padding:30px;background:var(--paper);border:1px solid var(--line);border-radius:19px;transition:transform .2s,box-shadow .2s;}
.tutorial-card:hover{transform:translateY(-4px);box-shadow:0 10px 25px #8d6a3e0b;}
.tutorial-card-icon{display:grid;place-items:center;width:105px;height:125px;border-radius:15px;background:#eee5f8;color:var(--purple);font-size:60px;}
.tutorial-card-content{min-width:0;}
.tutorial-card-tag{font-size:10px;color:#7950af;letter-spacing:.6px;}
.tutorial-card h2{font-size:24px;line-height:1.65;letter-spacing:-.7px;margin-top:10px;}
.tutorial-card-summary{font-size:13px;line-height:1.9;color:var(--muted);margin-top:10px;}
.tutorial-card-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;align-items:center;margin-top:22px;font-size:10px;color:var(--muted);}
.tutorial-card-cta{font-size:12px;color:var(--orange-dark);}
.tutorial-library-contact{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-top:30px;padding:23px 0;font-size:12px;color:var(--muted);line-height:1.9;}
.tutorial-library-contact a{color:var(--orange-dark);}
@media(max-width:600px){
  .tutorial-shell{width:calc(100% - 40px);}
  .tutorial-nav{height:74px;}
  .tutorial-back{font-size:11px;}
  .tutorial-hero{grid-template-columns:1fr;gap:0;padding-top:36px;position:relative;}
  .tutorial-title{font-size:31px;line-height:1.6;}
  .tutorial-deck{font-size:13px;margin-top:17px;}
  .tutorial-mascot{width:70px;position:absolute;right:0;top:21px;opacity:.3;z-index:-1;}
  .tutorial-route{padding:17px 13px;gap:7px;}
  .tutorial-route span{gap:7px;font-size:11px;flex-direction:column;}
  .tutorial-intro{font-size:14px;}
  .tutorial-toc{padding:23px 19px;}
  .tutorial-toc>div{grid-template-columns:1fr;gap:15px;}
  .tutorial-toc a{font-size:13px;}
  .tutorial-section{padding:31px 0;}
  .tutorial-section h2{font-size:23px;}
  .tutorial-section p,.tutorial-section li,.tutorial-section dd{font-size:14px;}
  .tutorial-tip{padding:16px;}
  .tutorial-security{padding:20px;}
  .tutorial-contact{padding:26px 22px;}
  .tutorial-contact h2{font-size:24px;}
  .tutorial-library{padding-bottom:30px;}
  .tutorial-card{grid-template-columns:1fr;gap:17px;padding:23px;}
  .tutorial-card-icon{width:57px;height:57px;font-size:35px;}
  .tutorial-card h2{font-size:21px;}
  .tutorial-card-summary{font-size:12px;}
}