:root{--container-page: var(--container)}.page-tutorial{--tut-accent: var(--blue);--tut-accent-soft: rgba(45, 91, 255, .09)}.tut-shell{max-width:1280px}.tut-mobile-back{display:none}.tut-hero{position:relative;padding:var(--space-6-5) 0 38px}.tut-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(620px 280px at 80% -10%,#2d5bff14,#f7f8fa00 72%),radial-gradient(420px 220px at 96% 40%,#00b8d90f,#f7f8fa00 76%)}.tut-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:var(--space-9)}.tut-kicker{--lf-kicker-size: var(--text-xs);--lf-kicker-tracking: .12em;display:inline-flex;align-items:center;gap:var(--space-2-5);margin:0 0 var(--space-4-5);padding:var(--space-1) var(--space-3);border:1px solid rgba(45,91,255,.24);border-radius:var(--radius-pill);background:#2d5bff0f}.tut-hero h1{--lf-h1-size: 40px;--lf-h1-line: 1.14;--lf-h1-tracking: -.04em;max-width:18ch}.tut-lead{--lf-lead-margin: var(--space-4) 0 0;--lf-lead-size: 17.5px;--lf-lead-line: var(--lh-readable);--lf-lead-max: 56ch}.tut-meta{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin:var(--space-7) 0 0;padding:var(--space-4-5) 0 0;border-top:1px solid var(--line)}.tut-meta-item{min-width:104px;padding:0 var(--space-5-5);border-left:1px solid var(--line)}.tut-meta-item:first-child{padding-left:0;border-left:0}.tut-meta dt{margin:0;color:var(--muted);font-family:var(--font-mono);font-size:var(--text-caption);line-height:var(--lh-tight);letter-spacing:.08em}.tut-meta dd{margin:5px 0 0;color:var(--ink);font-size:15px;line-height:1.45;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}.tut-meta dd .is-level{color:var(--blue)}.tut-cover{position:relative;margin:0;padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-3xl);background:linear-gradient(155deg,var(--surface),#f2f7ff);box-shadow:0 26px 54px -40px #14161a52}.tut-cover-frame{position:relative;display:grid;place-items:center;aspect-ratio:16 / 10;overflow:hidden;border-radius:var(--radius-2xl);background:radial-gradient(130% 130% at 18% 0%,#2d5bff24,#f7faff00 62%),linear-gradient(145deg,#f9fbff,#eaf2ff)}.tut-cover-frame:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(20,22,26,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(20,22,26,.035) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:linear-gradient(135deg,#000,transparent 74%);mask-image:linear-gradient(135deg,#000,transparent 74%)}.tut-cover img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 22px 28px rgba(45,91,255,.14))}.tut-cover-badge{position:absolute;right:22px;bottom:20px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:var(--space-1-5) 11px;border:1px solid rgba(45,91,255,.18);border-radius:var(--radius-pill);background:#ffffffe0;color:var(--blue);font-family:var(--font-mono);font-size:var(--text-caption);line-height:var(--lh-tight);font-weight:700;letter-spacing:.04em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.tut-layout{display:grid;grid-template-columns:306px minmax(0,1fr);grid-template-areas:"aside hero" "aside article";column-gap:58px;row-gap:0;align-items:start;padding-top:var(--space-4);padding-bottom:var(--space-22)}.tut-hero{grid-area:hero}.tut-article{grid-area:article}.tut-aside{--lf-scrollbar-width: 5px;grid-area:aside;position:sticky;top:84px;align-self:start;max-height:calc(100vh - 100px);overflow-y:auto}.tut-aside-card{padding:var(--space-4-5);border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);box-shadow:0 20px 48px -42px #14161a4d}.tut-aside-util{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3-5);padding-bottom:var(--space-3);border-bottom:1px solid var(--line)}.tut-aside-util .tut-backlink{min-height:28px;gap:var(--space-1-5);font-size:12.5px}.tut-aside-kicker{color:var(--muted);font-family:var(--font-mono);font-size:10.5px;line-height:var(--lh-tight);font-weight:600;letter-spacing:.08em;white-space:nowrap}.tut-aside-tut-title{margin:var(--space-3-5) 0 0;color:var(--ink);font-size:var(--text-card-title);line-height:1.35;font-weight:700;letter-spacing:-.02em;text-wrap:balance}.tut-aside-sub{margin:5px 0 0;color:var(--muted);font-family:var(--font-mono);font-size:11.5px;line-height:var(--lh-meta);letter-spacing:.02em}.tut-progress-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);color:var(--muted);font-family:var(--font-mono);font-size:11.5px;line-height:var(--lh-tight);letter-spacing:.06em}.tut-progress-head b{color:var(--blue);font-size:var(--text-note);font-weight:700;font-variant-numeric:tabular-nums}.tut-progress-track{--lf-progress-height: 5px}.tut-progress-fill{--lf-progress-speed: .14s}.tut-aside-title{margin:var(--space-4-5) 0 var(--space-2);color:var(--muted);font-family:var(--font-mono);font-size:11.5px;line-height:var(--lh-tight);font-weight:600;letter-spacing:.1em}.tut-chapters{display:grid;gap:3px;margin:0;padding:0;list-style:none}.tut-chapter{margin:0}.tut-chapter-link{display:grid;grid-template-columns:62px minmax(0,1fr);gap:var(--space-2-5);align-items:center;padding:7px;border:1px solid transparent;border-radius:var(--radius-lg);text-decoration:none;transition:background-color .16s var(--ease),border-color .16s var(--ease)}.tut-chapter-thumb{display:grid;place-items:center;width:62px;height:40px;padding:var(--space-0-5);overflow:hidden;border:1px solid var(--line-soft);border-radius:7px;background:linear-gradient(150deg,#f8fbff,#eef4ff)}.tut-chapter-thumb img{display:block;width:100%;height:100%;object-fit:contain}.tut-chapter-body{min-width:0}.tut-chapter-top{display:flex;align-items:baseline;gap:var(--space-1-5);min-width:0}.tut-chapter-num{flex:none;color:var(--blue);font-family:var(--font-mono);font-size:10.5px;line-height:var(--lh-tight);font-weight:700;letter-spacing:.03em}.tut-chapter-name{display:block;overflow:hidden;color:var(--body);font-size:14.5px;line-height:var(--lh-tight);font-weight:600;white-space:nowrap;text-overflow:ellipsis}.tut-chapter-meta{display:block;margin-top:var(--space-0-5);overflow:hidden;color:#6f7a90;font-family:var(--font-mono);font-size:var(--text-caption);line-height:var(--lh-tight);letter-spacing:.01em;white-space:nowrap;text-overflow:ellipsis}@media(hover:hover){.tut-chapter-link:hover{background:#f6f8fc;border-color:var(--line)}}.tut-chapter-link.is-active{border-color:#2d5bff2e;background:#2d5bff11}.tut-chapter-link.is-active .tut-chapter-name{color:var(--ink)}.tut-chapter-link.is-active .tut-chapter-thumb{border-color:#2d5bff33;background:var(--surface)}.tut-aside-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2-5);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px dashed var(--line);color:var(--muted);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--lh-meta)}.tut-aside-foot a{color:var(--blue);font-weight:600;text-decoration:none}.tut-aside-foot a:hover{text-decoration:underline;text-underline-offset:3px}.tut-article{--lf-prose-gap: var(--space-5);--lf-prose-color: #3f4656;--lf-prose-size: 17.5px;--lf-prose-line: var(--lh-reading);--lf-link: var(--blue);--lf-link-line: rgba(45, 91, 255, .3);min-width:0;max-width:780px}.tut-article>section{scroll-margin-top:8px}.tut-article ul,.tut-article ol{margin:0 0 var(--space-5-5);padding-left:var(--space-6);color:#3f4656;font-size:17.5px;line-height:1.8}.tut-article li{margin:var(--space-1-5) 0;padding-left:var(--space-0-5)}.tut-article li::marker{color:var(--blue)}.tut-article h2{--lf-h2-margin: 0 0 var(--space-4);--lf-h2-size: 33px;--lf-h2-line: 1.3;--lf-h2-weight: 800;--lf-h2-tracking: -.03em}.tut-article h3{--lf-h3-margin: var(--space-8) 0 var(--space-3);--lf-h3-size: var(--text-title-sm);--lf-h3-tracking: -.02em;--lf-h3-wrap: wrap}.tut-article code{padding:var(--space-0-5) 5px;border-radius:5px;background:var(--surface-accent);color:#23408f;font-family:var(--font-mono);font-size:.86em;overflow-wrap:anywhere}.tut-step{padding-top:var(--space-11);margin-top:var(--space-11);border-top:1px solid var(--line);scroll-margin-top:8px}.tut-step-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2-5);margin-bottom:var(--space-3-5)}.tut-step-num{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2-5);border-radius:var(--radius-pill);background:var(--tut-accent-soft);color:var(--blue);font-family:var(--font-mono);font-size:var(--text-caption);line-height:var(--lh-meta);font-weight:700;letter-spacing:.08em}.tut-step-time{color:var(--muted);font-family:var(--font-mono);font-size:var(--text-caption);line-height:var(--lh-meta);letter-spacing:.02em}.tut-step-lead{margin-bottom:var(--space-5-5)!important;color:#434b5d!important;font-size:18.5px!important;line-height:var(--lh-readable)!important}.tut-figure{margin:var(--space-6) 0 var(--space-6-5)}.tut-figure-media{position:relative;display:grid;place-items:center;aspect-ratio:16 / 9;padding:var(--space-3);overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-card);background:radial-gradient(120% 130% at 16% 0%,#2d5bff1f,#f8fbff00 60%),linear-gradient(150deg,#fbfdff,#edf4ff)}.tut-figure-media:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(20,22,26,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(20,22,26,.03) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(140deg,#000,transparent 76%);mask-image:linear-gradient(140deg,#000,transparent 76%)}.tut-figure-media img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(45,91,255,.12))}.tut-figure figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-top:9px;color:var(--muted);font-family:var(--font-mono);font-size:11.5px;line-height:var(--lh-snug);letter-spacing:.02em}.tut-figure figcaption span:last-child{flex:none;color:var(--text-subtle)}.tut-code{margin:var(--space-5-5) 0 var(--space-6);overflow:hidden;border:1px solid #1d2740;border-radius:var(--radius-xl);background:#0f1524;box-shadow:0 22px 44px -34px #0f1524b3}.tut-code-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:9px var(--space-3) 9px var(--space-3-5);border-bottom:1px solid #1f2a43;background:#131b2d}.tut-code-file{display:flex;align-items:center;gap:var(--space-2);min-width:0;overflow:hidden;color:#9fb0cc;font-family:var(--font-mono);font-size:11.5px;line-height:var(--lh-tight);letter-spacing:.02em;text-overflow:ellipsis;white-space:nowrap}.tut-code-file:before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px #4ade801f}.tut-copy{flex:none;padding:3px var(--space-2);border:1px solid #2c3a58;border-radius:5px;background:transparent;color:#a8b7d1;font-family:var(--font-mono);font-size:var(--text-caption);line-height:var(--lh-meta);cursor:pointer;transition:background-color .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}@media(hover:hover){.tut-copy:hover{border-color:#405174;background:#1a2439;color:var(--text-inverse)}}.tut-copy.is-copied{border-color:#4ade8066;color:#8ce99a}.tut-code pre{margin:0;padding:var(--space-4) var(--space-4-5) var(--space-4-5);overflow-x:auto;scrollbar-width:thin;scrollbar-color:#34415e transparent}.tut-code pre code{display:block;min-width:max-content;padding:0;border:0;background:none;color:#dbe6f7;font-family:var(--font-mono);font-size:13.5px;line-height:var(--lh-readable);tab-size:2}.tok-com{color:#6b7f9e}.tok-str{color:#8ce99a}.tok-key{color:#74a7ff}.tok-attr{color:#ffc078}.tok-tag{color:#ff9db1}.tut-callout{--lf-callout-margin: var(--space-5-5) 0;--lf-callout-padding: 15px 17px;--lf-callout-border: 1px;--lf-callout-accent: rgba(45, 91, 255, .16);--lf-callout-radius: var(--radius-xl);--lf-callout-bg: #f5f8ff;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);border:1px solid rgba(45,91,255,.16)}.tut-callout-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#2d5bff1f;color:var(--blue);font-family:var(--font-mono);font-size:var(--text-xs);line-height:1;font-weight:700}.tut-callout-body{min-width:0;font-size:15.5px;line-height:var(--lh-readable)}.tut-callout-body p{margin:0!important;color:#3f4b66!important;font-size:15.5px!important;line-height:var(--lh-readable)!important}.tut-callout-body p+p{margin-top:var(--space-2)!important}.tut-callout-title{display:block;margin-bottom:var(--space-1);color:var(--ink);font-size:14.5px;line-height:var(--lh-meta);font-weight:700}.tut-callout--warn{border-color:#ff6b1a38;background:#fff8f2}.tut-callout--warn .tut-callout-icon{background:#ff6b1a1f;color:var(--orange-ink)}.tut-callout--warn .tut-callout-body p{color:#584a3f!important}.tut-table-wrap{--lf-table-margin: var(--space-5-5) 0;--lf-table-radius: var(--radius-xl)}.tut-table{--lf-table-size: 15px;--lf-table-head-y: var(--space-2-5);--lf-table-cell-y: 11px;--lf-table-text: #3f4656;min-width:560px}.tut-table th{border-bottom:1px solid var(--line);background:#f7f9fc;color:var(--muted);font-family:var(--font-mono);font-size:var(--text-caption);line-height:var(--lh-meta);font-weight:600;letter-spacing:.03em;white-space:nowrap}.tut-table td{border-top:1px solid var(--line-soft)}.tut-table tr:first-child td{border-top:0}.tut-table td:first-child{white-space:nowrap}.tut-check{display:grid;gap:var(--space-2);margin:var(--space-5) 0 var(--space-6);padding:0;list-style:none}.tut-check li{display:flex;align-items:flex-start;gap:var(--space-2-5);margin:0;padding:var(--space-2-5) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-subtle);color:#3f4656;font-size:15.5px;line-height:1.65}.tut-check li:before{content:"✓";display:grid;place-items:center;flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:#15803d1a;color:var(--green-ink);font-size:var(--text-2xs);font-weight:700}.tut-tree{margin:var(--space-5) 0 var(--space-6);padding:var(--space-4-5) var(--space-5);overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface-subtle);color:#4b5568;font-family:var(--font-mono);font-size:13.5px;line-height:var(--lh-reading);white-space:pre}.tut-inline-note{margin:-6px 0 var(--space-5-5)!important;color:var(--muted)!important;font-size:var(--text-sm)!important;line-height:1.65!important}.tut-done{margin-top:var(--space-11);padding:var(--space-5-5) var(--space-6);border:1px solid rgba(21,128,61,.18);border-radius:var(--radius-card);background:radial-gradient(120% 140% at 0% 0%,#4ade801a,#f8fdfa00 62%),#f8fdfa;scroll-margin-top:8px}.tut-done h2{margin-bottom:var(--space-2);font-size:var(--text-lg)}.tut-done p{margin-bottom:0;font-size:15.5px;line-height:1.8}.tut-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3-5);margin-top:var(--space-8-5);padding-top:var(--space-7);border-top:1px solid var(--line)}.tut-pager-link{display:block;padding:15px 17px;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);text-decoration:none;transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}.tut-pager-link:hover{border-color:#2d5bff59;box-shadow:0 14px 30px -28px #14161a66}.tut-pager-label{display:block;color:var(--muted);font-family:var(--font-mono);font-size:10.5px;line-height:var(--lh-meta);letter-spacing:.08em}.tut-pager-title{display:block;margin-top:5px;color:var(--ink);font-size:16.5px;line-height:1.45;font-weight:600}.tut-pager-link--next{text-align:right}.tut-pager-link--next .tut-pager-title{color:var(--body)}.tut-pager-link.is-pending{cursor:pointer}.tut-pager-link.is-pending .tut-pager-title{color:var(--muted)}.tut-pager-flag{display:inline-flex;margin-left:var(--space-1-5);padding:1px var(--space-1-5);border:1px dashed rgba(255,107,26,.5);border-radius:var(--radius-pill);color:var(--orange-ink);font-family:var(--font-mono);font-size:9px;line-height:var(--lh-meta);font-weight:500;vertical-align:1px}@media(max-width:1180px){.tut-hero-grid{grid-template-columns:minmax(0,1fr) 240px;gap:var(--space-6-5)}.tut-hero h1{font-size:38px}.tut-layout{grid-template-columns:274px minmax(0,1fr);column-gap:38px;row-gap:0}}@media(max-width:960px){.tut-mobile-back{display:inline-flex;margin:0 0 var(--space-4-5)}.tut-hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-7)}.tut-hero-copy{max-width:100%}.tut-cover{width:100%;max-width:620px;justify-self:center}.tut-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "aside" "article";row-gap:var(--space-6-5);padding-top:var(--space-6)}.tut-aside{position:static;max-height:none;overflow:visible}.tut-aside-util{justify-content:flex-start;margin-bottom:var(--space-2-5);padding-bottom:0;border-bottom:0}.tut-aside-kicker,.tut-aside-tut-title,.tut-aside-sub{display:none}.tut-aside-card{padding:var(--space-3-5)}.tut-chapters{display:flex;gap:var(--space-2);margin:0 -2px;padding:var(--space-0-5) var(--space-0-5) var(--space-1-5);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}.tut-chapters::-webkit-scrollbar{display:none}.tut-chapter{flex:none;width:224px;scroll-snap-align:start}.tut-chapter-link{grid-template-columns:58px minmax(0,1fr);height:100%;border-color:var(--line);background:var(--surface-subtle)}.tut-aside-foot{margin-top:var(--space-1);padding-top:var(--space-2);border-top:0}}@media(max-width:768px){.tut-hero{padding:var(--space-5) 0 var(--space-7-5)}.tut-hero h1{font-size:34px}.tut-lead{font-size:var(--text-body-lg)}.tut-meta{margin-top:var(--space-5-5);padding-top:var(--space-3-5)}.tut-meta-item{min-width:0;padding:0 var(--space-4)}.tut-meta dd{font-size:var(--text-sm)}.tut-layout{padding-bottom:var(--space-16)}.tut-step{padding-top:var(--space-8-5);margin-top:var(--space-8-5)}.tut-article p,.tut-article ul,.tut-article ol{font-size:16.5px}.tut-article h2{font-size:var(--text-xl)}.tut-figure-media{padding:var(--space-2);border-radius:var(--radius-2xl)}.tut-figure figcaption{flex-direction:column;gap:3px}}@media(max-width:560px){.tut-hero h1{font-size:var(--text-xl);letter-spacing:-.035em}.tut-kicker{font-size:var(--text-2xs)}.tut-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3-5) 0}.tut-meta-item{padding:0 var(--space-3-5)}.tut-meta-item:nth-child(odd){padding-left:0;border-left:0}.tut-chapter{width:204px}.tut-step-head{gap:var(--space-2)}.tut-step-lead{font-size:17.5px!important}.tut-code pre{padding:var(--space-3-5)}.tut-code pre code{font-size:12.5px}.tut-pager{grid-template-columns:minmax(0,1fr);gap:var(--space-2-5)}.tut-pager-link--next{text-align:left}.tut-callout{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}}@media(max-width:390px){.tut-hero h1{font-size:28px}.tut-aside-card{padding:var(--space-3)}}