:root{--tutorial-ink:#17243d;--tutorial-blue:#2459c9;--tutorial-cyan:#16a8b7;--tutorial-gold:#f5bd2b;--tutorial-line:#dce6ec}
body.tutorial-page{background:#fff;color:var(--tutorial-ink)}
.tutorial-layout{display:grid;grid-template-columns:310px minmax(0,1fr);min-height:calc(100vh - 76px)}
.tutorial-sidebar{position:sticky;top:76px;align-self:start;height:calc(100vh - 76px);overflow:auto;background:#f8fbfd;border-right:1px solid var(--tutorial-line);padding:28px 18px 26px;scrollbar-width:thin}
.sidebar-intro{padding:0 10px 25px;border-bottom:1px solid var(--tutorial-line)}.sidebar-kicker{font:800 10px/1.4 ui-monospace,SFMono-Regular,monospace;letter-spacing:.08em;color:var(--tutorial-blue)}.sidebar-intro h1{font-size:28px;letter-spacing:-.055em;line-height:1.2;margin:14px 0 7px}.sidebar-intro p{font-size:13px;color:#5c7085;margin:0}
.search-label{display:block;padding:23px 10px 7px;font-size:11px;font-weight:850;color:#52677c}.tutorial-sidebar input{width:100%;height:39px;padding:0 12px;border-radius:8px;border:1px solid #c9d8e4;background:#fff;color:var(--tutorial-ink);font:inherit;font-size:12px;outline:none}.tutorial-sidebar input:focus{border-color:var(--tutorial-blue);box-shadow:0 0 0 3px #2459c922}.sidebar-count{padding:14px 10px;color:#708096;font-size:11px;font-weight:700}.tutorial-tree{display:grid;gap:7px}.module-group{border:1px solid transparent;border-radius:12px}.module-group[open]{background:#fff;border-color:var(--tutorial-line);box-shadow:0 6px 15px #17243d08}.module-group summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 9px;border-radius:10px}.module-group summary::-webkit-details-marker{display:none}.module-symbol{display:grid;place-items:center;flex:none;width:35px;height:35px;border-radius:9px;background:#2459c91b;color:var(--tutorial-blue);font:900 11px/1 ui-monospace,SFMono-Regular,monospace}.module-group[data-status=planned] .module-symbol{background:#17243d12;color:#65768b}.module-copy{min-width:0;flex:1}.module-copy strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.module-copy small{display:block;margin-top:3px;color:#718096;font-size:10px}.module-chevron{font-size:17px;color:#60758b;transition:transform .15s}.module-group[open] .module-chevron{transform:rotate(90deg)}.module-articles{display:grid;padding:0 8px 9px 54px;gap:2px}.article-link{display:block;padding:8px 10px;border-radius:7px;color:#40566e;font-size:12px;line-height:1.4}.article-link:hover{background:#2459c912;color:var(--tutorial-blue)}.article-link[aria-current=page]{background:#2459c91e;color:var(--tutorial-blue);font-weight:850;box-shadow:inset 3px 0 var(--tutorial-blue)}.no-results{padding:14px;color:#64778b;font-size:12px;line-height:1.7}.sidebar-map{display:flex;justify-content:space-between;align-items:center;margin:20px 8px 0;padding:12px 13px;border:1px solid #2459c950;border-radius:8px;color:var(--tutorial-blue);font-size:12px;font-weight:850}.sidebar-map:hover{background:#2459c910}
.tutorial-main{min-width:0;display:flex;flex-direction:column}.tutorial-topline{height:52px;padding:0 clamp(25px,5vw,80px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--tutorial-line);color:#738299;font-size:11px;font-weight:750;letter-spacing:.03em}.tutorial-topline a{color:var(--tutorial-blue)}.tutorial-content{width:min(900px,100%);margin:0 auto;padding:54px 50px 90px;flex:1;outline:none}.article-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:#60748a;font-weight:750;margin-bottom:28px}.article-breadcrumb b{color:var(--tutorial-blue)}.article-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 22px}.article-tag{padding:6px 10px;background:#2459c914;border-radius:100px;color:var(--tutorial-blue);font-size:11px;font-weight:850}.article-tag.planned{background:#f5bd2b3b;color:#785711}.article-path{font:800 11px/1 ui-monospace,SFMono-Regular,monospace;color:#7a899a}.article-summary{font-size:17px;line-height:1.8;color:#52677e;margin:10px 0 30px}.markdown-body{font-size:16px;line-height:1.84;color:#263950;overflow-wrap:anywhere}.markdown-body h1{font-size:clamp(32px,3.2vw,48px);line-height:1.2;letter-spacing:-.055em;color:var(--tutorial-ink);margin:0 0 13px}.markdown-body h2{font-size:24px;line-height:1.3;letter-spacing:-.035em;margin:43px 0 14px;padding-top:16px;border-top:1px solid var(--tutorial-line)}.markdown-body h3{font-size:19px;margin:30px 0 10px}.markdown-body p,.markdown-body li{margin:0 0 15px}.markdown-body ul,.markdown-body ol{padding-left:24px}.markdown-body li{padding-left:3px}.markdown-body blockquote{margin:18px 0 26px;padding:13px 20px;border-left:4px solid var(--tutorial-gold);background:#f5bd2b1a;color:#3e5269;border-radius:0 8px 8px 0}.markdown-body blockquote p{margin:0}.markdown-body code{background:#2459c916;color:#164cae;border-radius:4px;padding:2px 5px;font:700 .9em/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}.markdown-body pre{background:#17243d;color:#ecf4ff;border-radius:12px;padding:19px 23px;overflow:auto;font-size:14px;line-height:1.7;margin:18px 0 26px}.markdown-body pre code{background:none;color:inherit;padding:0;font-weight:500}.markdown-body a{color:var(--tutorial-blue);font-weight:800;text-decoration:underline;text-decoration-color:#2459c95c;text-underline-offset:3px}.markdown-body table{border-collapse:collapse;width:100%;display:block;overflow-x:auto}.markdown-body td,.markdown-body th{border:1px solid var(--tutorial-line);padding:8px 12px}.markdown-body img{max-width:100%;height:auto;border-radius:8px}.lesson-cta{display:inline-flex;align-items:center;gap:12px;padding:13px 18px;background:var(--tutorial-gold);border-radius:9px;color:var(--tutorial-ink);font-size:13px;font-weight:900;box-shadow:0 4px 0 var(--tutorial-ink);margin:15px 0 0}.lesson-cta:hover{transform:translateY(-2px)}.article-pagination{border-top:1px solid var(--tutorial-line);display:flex;justify-content:space-between;gap:14px;margin-top:54px;padding-top:24px}.article-pagination a{display:grid;gap:6px;min-width:0;max-width:48%;color:var(--tutorial-blue);font-size:13px;font-weight:850}.article-pagination a:last-child{text-align:right;margin-left:auto}.article-pagination small{color:#728296;font-size:11px}.tutorial-loading{padding:30px;color:#68798d}.tutorial-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--tutorial-line);padding:22px clamp(25px,5vw,80px);font-size:11px;color:#7a8999}.tutorial-footer a{color:var(--tutorial-blue);font-weight:800}.tutorial-mobilebar{display:none}
@media(max-width:900px){.tutorial-layout{grid-template-columns:260px minmax(0,1fr)}.tutorial-sidebar{padding:22px 10px}.tutorial-content{padding:45px 35px 75px}}
@media(max-width:700px){.tutorial-layout{display:block}.tutorial-sidebar{display:none;position:fixed;z-index:28;top:110px;bottom:auto;left:0;width:min(85vw,330px);height:calc(100dvh - 110px);max-height:calc(100vh - 110px);align-self:auto;box-shadow:15px 20px 35px #17243d35}.tutorial-sidebar.is-open{display:block}.tutorial-mobilebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;border-bottom:1px solid var(--tutorial-line);background:#fff}.tutorial-mobilebar button{border:1px solid var(--tutorial-line);background:#fff;color:var(--tutorial-blue);border-radius:8px;padding:8px 10px;font-size:12px;font-weight:800}.tutorial-mobilebar span{font-size:12px;color:#60758a}.tutorial-topline{height:40px;padding:0 20px}.tutorial-content{padding:35px 23px 65px}.article-summary{font-size:15px}.markdown-body{font-size:15px}.markdown-body h2{font-size:21px}.markdown-body pre{font-size:12px;padding:16px}.tutorial-footer{padding:20px}}