.tutorial-page{color:#15223b;background:#f6f8fc;min-height:calc(100vh - 64px)}.tutorial-hero{background:radial-gradient(circle at 18% 12%,#4b7eff33,#0000 34%),linear-gradient(135deg,#edf3ff 0%,#fff 52%,#eef7ff 100%);border-bottom:1px solid #e3e9f3;padding:72px 24px 64px}.tutorial-hero-inner,.tutorial-center-shell,.tutorial-detail-shell{width:min(1180px,100% - 48px);margin:0 auto}.tutorial-hero-inner>span,.tutorial-detail-header>span,.tutorial-center-intro span,.tutorial-related-section>div>span{color:#3568d4;letter-spacing:.08em;font-size:13px;font-weight:700;display:inline-block}.tutorial-hero h1{margin:14px 0 16px;font-size:clamp(36px,5vw,54px);line-height:1.12}.tutorial-hero p{color:#5b6b86;max-width:780px;margin:0;font-size:17px;line-height:1.85}.tutorial-center-shell{padding:48px 0 72px}.tutorial-center-intro{grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);align-items:end;gap:42px;margin-bottom:30px;display:grid}.tutorial-center-intro h2,.tutorial-related-section h2{margin:8px 0 0;font-size:28px;line-height:1.35}.tutorial-center-intro p{color:#64748b;margin:0;line-height:1.8}.tutorial-official-site{background:#f8fbff;border:1px solid #d8e5f7;border-radius:16px;justify-content:space-between;align-items:center;gap:28px;margin:0 0 30px;padding:20px 24px;display:flex}.tutorial-detail-card>.tutorial-official-site{margin:28px 54px 0}.tutorial-official-site span{color:#3568d4;margin-bottom:6px;font-size:13px;font-weight:800;display:block}.tutorial-official-site p{color:#64748b;margin:0;font-size:14px;line-height:1.75}.tutorial-official-site a{color:#3568d4;overflow-wrap:anywhere;flex:none;font-size:14px;font-weight:800;text-decoration:none}.tutorial-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.tutorial-card{min-height:238px;color:inherit;background:#fff;border:1px solid #e1e7f0;border-radius:20px;padding:26px;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s;box-shadow:0 12px 28px #1f32510f}.tutorial-card:hover{border-color:#bfd0f3;transform:translateY(-3px);box-shadow:0 18px 36px #1f32511a}.tutorial-card>span{color:#7b8ba7;font-size:12px;font-weight:700}.tutorial-card h2{margin:12px 0 10px;font-size:21px;line-height:1.4}.tutorial-card p{color:#64748b;min-height:78px;margin:0 0 16px;line-height:1.7}.tutorial-card strong,.tutorial-card em{font-style:normal;display:block}.tutorial-card strong{color:#8795aa;margin-bottom:8px;font-size:12px}.tutorial-card em{color:#3568d4;font-weight:700}.tutorial-scenario-card{background:linear-gradient(145deg,#f5f8ff 0%,#eef6ff 100%)}.tutorial-detail-page{padding:32px 0 72px}.tutorial-breadcrumb{color:#78869b;align-items:center;gap:8px;margin-bottom:16px;font-size:14px;display:flex}.tutorial-breadcrumb a,.tutorial-detail-actions a{color:#3568d4;text-decoration:none}.tutorial-detail-card{background:#fff;border:1px solid #e2e8f0;border-radius:24px;overflow:hidden;box-shadow:0 16px 42px #1f325112}.tutorial-detail-header{background:linear-gradient(140deg,#f4f7ff 0%,#fff 70%);border-bottom:1px solid #edf1f6;padding:48px 54px 40px}.tutorial-detail-header h1{margin:10px 0 14px;font-size:clamp(32px,4.4vw,48px);line-height:1.2}.tutorial-detail-header p{color:#63728a;max-width:820px;margin:0;font-size:17px;line-height:1.8}.tutorial-detail-items{padding:6px 54px 8px}.tutorial-detail-item{border-bottom:1px solid #edf1f6;grid-template-columns:54px minmax(0,1fr);gap:20px;padding:34px 0;display:grid}.tutorial-detail-item:last-child{border-bottom:0}.tutorial-item-number{color:#3568d4;background:#edf3ff;border-radius:14px;justify-content:center;align-items:center;width:44px;height:44px;font-size:13px;font-weight:800;display:flex}.tutorial-detail-item h2{margin:3px 0 14px;font-size:23px}.tutorial-detail-item p{color:#53647e;margin:0 0 10px;line-height:1.9}.tutorial-step-box{background:#f7f9fc;border-radius:14px;margin-top:18px;padding:18px 20px}.tutorial-step-box strong{color:#253653;margin-bottom:10px;display:block}.tutorial-step-box ol{color:#53647e;margin:0;padding-left:22px}.tutorial-step-box li{padding:3px 0;line-height:1.7}.tutorial-related-section{border-top:1px solid #edf1f6;margin:16px 54px 0;padding:30px 0 10px}.tutorial-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px;display:grid}.tutorial-related-grid a{min-height:134px;color:inherit;background:#fbfcfe;border:1px solid #e4eaf3;border-radius:16px;flex-direction:column;padding:20px;text-decoration:none;display:flex}.tutorial-related-grid small{color:#3568d4;font-weight:700}.tutorial-related-grid strong{margin:8px 0 auto;line-height:1.55}.tutorial-related-grid span{color:#3568d4;margin-top:12px;font-size:13px;font-weight:700}.tutorial-detail-actions{border-top:1px solid #edf1f6;padding:28px 54px 38px}.tutorial-detail-actions a{font-weight:700}.tutorial-video-section{background:radial-gradient(circle at 90% 5%,#4d86ff1f,#0000 34%),linear-gradient(145deg,#f7faff 0%,#fff 62%);border:1px solid #d8e5f7;border-radius:24px;margin:8px 0 34px;padding:30px;box-shadow:0 14px 34px #1f3d6612}.tutorial-video-heading{grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);align-items:end;gap:30px;margin-bottom:24px;display:grid}.tutorial-video-heading span{color:#3568d4;letter-spacing:.08em;font-size:13px;font-weight:800}.tutorial-video-heading h2{margin:8px 0 0;font-size:28px;line-height:1.35}.tutorial-video-heading p{color:#66758c;margin:0;line-height:1.75}.tutorial-video-seo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.tutorial-video-seo-card{background:#fff;border:1px solid #dfe7f2;border-radius:14px;flex-direction:column;min-height:92px;padding:14px;display:flex}.tutorial-video-seo-card span,.tutorial-video-seo-card small{color:#7890b1;font-size:12px}.tutorial-video-seo-card strong{margin:6px 0 auto;font-size:15px;line-height:1.45}.tutorial-video-layout{grid-template-columns:290px minmax(0,1fr);align-items:start;gap:22px;display:grid}.tutorial-video-tabs{gap:10px;display:grid}.tutorial-video-tabs button{color:#27364e;text-align:left;cursor:pointer;background:#fff;border:1px solid #dfe7f2;border-radius:14px;grid-template-columns:34px minmax(0,1fr);gap:2px 10px;width:100%;padding:14px 15px;transition:border-color .18s,background .18s,box-shadow .18s;display:grid}.tutorial-video-tabs button:hover{background:#f9fbff;border-color:#b8cef2}.tutorial-video-tabs button.is-active{background:#edf5ff;border-color:#8eb7f4;box-shadow:0 8px 22px #2d67bc1a}.tutorial-video-tabs button>span{color:#3568d4;grid-row:1/span 2;align-self:start;font-size:12px;font-weight:800}.tutorial-video-tabs strong{min-width:0;font-size:15px;line-height:1.45}.tutorial-video-tabs small{color:#8390a4;font-size:12px}.tutorial-video-player-card{background:#0f1726;border:1px solid #dbe4ef;border-radius:18px;overflow:hidden}.tutorial-video-player-copy{color:#fff;background:#172235;align-items:baseline;gap:12px;padding:14px 16px;display:flex}.tutorial-video-player-copy span{color:#9fbbe6;font-size:12px}.tutorial-video-player-copy strong{font-size:16px}.tutorial-video-player{aspect-ratio:16/9;background:#0b111c;width:100%;display:block}.tutorial-video-unavailable{color:#b9c5d8;text-align:center;justify-content:center;align-items:center;min-height:360px;padding:28px;display:flex}@media (width<=900px){.tutorial-video-heading,.tutorial-video-layout{grid-template-columns:1fr}.tutorial-video-seo-grid,.tutorial-video-tabs,.tutorial-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tutorial-center-intro{grid-template-columns:1fr;gap:16px}.tutorial-official-site{flex-direction:column;align-items:flex-start;gap:12px}}@media (width<=640px){.tutorial-video-section{border-radius:18px;padding:22px 18px}.tutorial-video-heading{gap:14px}.tutorial-video-heading h2{font-size:24px}.tutorial-video-tabs,.tutorial-video-seo-grid{grid-template-columns:1fr}.tutorial-video-unavailable{min-height:220px}.tutorial-hero{padding:48px 0 42px}.tutorial-hero-inner,.tutorial-center-shell,.tutorial-detail-shell{width:min(100% - 28px,1180px)}.tutorial-center-shell{padding:34px 0 54px}.tutorial-card-grid,.tutorial-related-grid{grid-template-columns:1fr}.tutorial-card,.tutorial-card p{min-height:0}.tutorial-detail-header,.tutorial-detail-items,.tutorial-detail-actions{padding-left:22px;padding-right:22px}.tutorial-detail-item{grid-template-columns:1fr;gap:10px}.tutorial-related-section,.tutorial-detail-card>.tutorial-official-site{margin-left:22px;margin-right:22px}}
