.guide-reading{--reading-line:#e9e6ef;--reading-muted:#716d80;background:#fff}.guide-reading>.guide-header{background:#fff;gap:18px;min-height:76px;padding-inline:32px}.guide-reading .guide-brand img{width:196px}.guide-reading .guide-top-nav{gap:24px}.guide-reading :is(.guide-layout,.learning-layout){grid-template-columns:288px minmax(0,1fr) 224px;gap:0;width:100%;max-width:1800px;min-height:calc(100dvh - 76px);margin-inline:auto}.guide-reading :is(.guide-sidebar,.learning-sidebar){border:0;border-inline-end:1px solid var(--reading-line);scrollbar-width:thin;background:#faf9fd;height:calc(100dvh - 76px);padding:32px 18px;top:76px}.guide-reading :is(.guide-sidebar-title,.learning-sidebar-title){color:var(--purple);margin:0 14px 24px;font-size:15px;line-height:1.4}.guide-reading :is(.guide-chapter-nav,.learning-chapter-nav){gap:8px;display:grid}.guide-reading .guide-nav-group{margin-top:18px}.guide-reading .guide-nav-group>p{color:#6b6580;letter-spacing:.12em;margin:0 14px 10px;font-size:11px;font-weight:750;line-height:1.5}.guide-reading :is(.guide-chapter-nav,.learning-chapter-nav) a{color:#514b65;border:0;border-radius:10px;justify-content:flex-start;align-items:center;gap:16px;min-height:44px;padding:10px 14px;font-size:14px;line-height:1.45;display:flex}.guide-reading :is(.guide-chapter-nav,.learning-chapter-nav) a>span{flex:1;min-width:0}.guide-reading :is(.guide-chapter-nav,.learning-chapter-nav) a>svg{width:21px;height:21px;color:inherit;opacity:1;flex-shrink:0;transform:none}.guide-reading :is(.guide-chapter-nav,.learning-chapter-nav) a:hover{color:var(--purple);background:#f1ebff}.guide-reading :is(.guide-chapter-nav,.learning-chapter-nav) a.active{color:var(--purple);background:#f0eaff;font-weight:700}.guide-reading :is(.guide-article,.learning-article){width:100%;min-width:0;padding:40px 44px 80px}.guide-reading :is(.guide-breadcrumbs,.learning-breadcrumbs){color:var(--reading-muted);flex-wrap:wrap;gap:10px;margin:0 0 20px;font-size:13px;display:flex}.guide-reading :is(.guide-title-block,.learning-title-block){margin:0 0 20px}.guide-reading :is(.guide-kicker,.learning-kicker){color:var(--purple);letter-spacing:.12em;margin:0 0 12px;font-size:11px;font-weight:750;line-height:1.5}.guide-reading :is(.guide-title-block,.learning-title-block) h1{letter-spacing:-.05em;color:#15121d;overflow-wrap:anywhere;margin:0 0 14px;font-family:Madefor Display,Madefor,sans-serif;font-size:clamp(36px,3.75vw,56px);font-weight:750;line-height:1.08}.guide-reading :is(.guide-title-block,.learning-title-block)>p:not(.guide-kicker,.learning-kicker){max-width:65ch;color:var(--reading-muted);margin:0 0 12px;font-size:22px;line-height:1.4}.guide-reading :is(.guide-reading-time,.learning-reading-time){color:var(--reading-muted);margin-top:0;font-size:14px}.guide-reading :is(.guide-hero-image,.learning-hero-image){aspect-ratio:auto;border:1px solid var(--reading-line);height:auto;box-shadow:none;background:#f8f9fc;border-radius:10px;margin:0 0 28px;padding:0;overflow:hidden}.guide-reading :is(.guide-hero-image,.learning-hero-image) img{border-radius:0;width:100%;height:auto;display:block}.guide-reading :is(.guide-sections,.learning-sections){gap:40px;display:grid}.guide-reading :is(.guide-sections,.learning-sections)>section{padding:0;scroll-margin-top:104px}.guide-reading :is(.guide-sections,.learning-sections) h2{color:#15121d;letter-spacing:-.035em;margin:0 0 14px;font-size:30px;line-height:1.2}.guide-reading :is(.guide-sections,.learning-sections) :is(p,li){color:#514b60;overflow-wrap:anywhere;max-width:65ch;font-size:17px;line-height:1.7}.guide-reading :is(.guide-steps,.guide-bullets,.learning-bullets){gap:12px}.guide-reading :is(.guide-steps,.guide-bullets,.learning-bullets) li{border:0;border-bottom:1px solid var(--reading-line);background:0 0;border-radius:0;padding:14px 0}.guide-reading .guide-section-image{margin-top:24px}.guide-reading :is(.guide-tip,.learning-question,.learning-deepen){color:var(--purple);background:#f7f3ff;border:1px solid #e5dcf8;border-radius:10px;margin:22px 0 0;padding:20px}.guide-reading :is(.guide-tip,.learning-question,.learning-deepen) p{color:#5e5373;margin:4px 0 0;font-size:15px;line-height:1.6}.guide-reading .learning-deepen{border:0;border-inline-start:2px solid var(--purple);background:#faf9fd;border-radius:0}.guide-reading .learning-apply{color:#15121d;background:#f4efff;border:1px solid #e5dcf8;border-radius:12px;margin-top:42px;padding:26px}.guide-reading .learning-apply :is(h2,p){color:inherit}.guide-reading .learning-apply a{color:var(--purple)}.guide-reading :is(.guide-pagination,.learning-pagination){border-top:1px solid var(--reading-line);gap:16px;margin-top:48px;padding-top:24px}.guide-reading :is(.guide-pagination,.learning-pagination) a{border-color:var(--reading-line);background:#fff;border-radius:10px;min-width:0}.guide-reading .guide-footer{border-top:1px solid var(--reading-line);background:#faf9fd;width:100%;margin:0;padding:28px 36px}.article-toc{border-inline-start:1px solid var(--reading-line);align-self:start;margin:40px 22px 32px 0;padding-inline-start:18px;position:sticky;top:108px}.article-toc>p{color:#15121d;margin:0 0 16px;font-size:14px;font-weight:750}.article-toc nav{display:grid}.article-toc a{color:var(--reading-muted);overflow-wrap:anywhere;border-inline-start:1px solid #e3dfeb;padding:8px 0 8px 18px;font-size:13px;line-height:1.5;display:block;position:relative}.article-toc a[aria-current]{color:var(--purple);border-inline-start:2px solid var(--purple);font-weight:650}.article-toc a:hover{color:var(--purple)}.guide-reading :is(a,button,summary):focus-visible{outline-offset:4px;outline:3px solid #9a74ed}.guide-reading .guide-mobile-chapters{display:none}@media (max-width:1360px){.guide-reading>.guide-header{grid-template-columns:180px minmax(0,1fr) auto auto;gap:12px;padding-inline:24px}.guide-reading .guide-brand img{width:175px}.guide-reading .guide-top-nav{gap:16px}.guide-reading .guide-github{display:none}.guide-reading :is(.guide-layout,.learning-layout){grid-template-columns:248px minmax(0,1fr) 190px}.guide-reading :is(.guide-article,.learning-article){padding-inline:30px}.guide-reading :is(.guide-sidebar,.learning-sidebar){padding-inline:12px}}@media (max-width:1100px){.guide-reading :is(.guide-layout,.learning-layout){grid-template-columns:224px minmax(0,1fr)}.guide-reading .article-toc,.guide-reading :is(.guide-profile,.guide-github){display:none}.guide-reading .guide-top-nav{gap:12px}.guide-reading .guide-top-nav a{font-size:12px}.guide-reading>.guide-header{grid-template-columns:150px minmax(0,1fr) auto auto;padding-inline:16px}.guide-reading .guide-brand img{width:145px}}@media (max-width:860px){.guide-reading>.guide-header{grid-template-columns:minmax(0,1fr) auto auto}}@media (max-width:760px){.guide-reading>.guide-header{gap:8px;min-height:68px;padding-inline:20px}.guide-reading .guide-brand img{width:155px}.guide-reading :is(.guide-layout,.learning-layout){display:block}.guide-reading :is(.guide-sidebar,.learning-sidebar){display:none}.guide-reading :is(.guide-article,.learning-article){padding:24px 20px 48px}.guide-reading :is(.guide-breadcrumbs,.learning-breadcrumbs){margin-bottom:20px;font-size:12px}.guide-reading .guide-mobile-chapters{border:1px solid var(--reading-line);background:#faf9fd;border-radius:10px;margin:0 0 26px;display:block}.guide-reading .guide-mobile-chapters summary{min-height:48px;color:var(--purple);cursor:pointer;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;font-size:14px;font-weight:650;list-style:none;display:flex}.guide-reading .guide-mobile-chapters summary::-webkit-details-marker{display:none}.guide-reading .guide-mobile-chapters summary>span{align-items:center;gap:10px;display:inline-flex}.guide-reading .guide-mobile-chapters nav{padding:8px}.guide-reading :is(.guide-title-block,.learning-title-block) h1{font-size:clamp(32px,7.8vw,42px)}.guide-reading :is(.guide-title-block,.learning-title-block)>p:not(.guide-kicker,.learning-kicker){font-size:17px}.guide-reading :is(.guide-sections,.learning-sections) h2{font-size:26px}.guide-reading :is(.guide-sections,.learning-sections) :is(p,li){font-size:16px}.guide-reading :is(.guide-pagination,.learning-pagination){grid-template-columns:1fr}.guide-reading :is(.guide-pagination,.learning-pagination)>span:empty{display:none}.guide-reading .guide-footer{padding-inline:20px}}@media (max-width:380px){.guide-reading>.guide-header{padding-inline:14px}.guide-reading .guide-brand img{width:125px}}[dir=rtl] .article-toc a{padding-inline:18px 0}