.tutorial-hero{padding-top:12px;padding-bottom:0}.tutorial-back{color:var(--muted);margin-bottom:18px;font-size:12px}.tutorial-masthead{border-top:1px solid var(--line);justify-content:space-between;gap:20px;padding-block:16px;display:flex}.tutorial-masthead>p{color:var(--accent-ink)}.tutorial-masthead>span{font:10px var(--mono-font);color:var(--muted)}.tutorial-intro{grid-template-columns:1.1fr 1fr;align-items:end;gap:64px;padding-block:30px;display:grid}.tutorial-intro h1{letter-spacing:-.045em;white-space:pre-line;text-wrap:balance;margin:0;font:650 clamp(30px,3.1vw,44px)/1.35 Manrope Variable,Microsoft YaHei,sans-serif}.tutorial-intro>p{max-width:48ch;color:var(--muted);margin:0;padding-bottom:4px;font-size:15px;line-height:1.9}.brand-suffix{border-left:1px solid var(--line);font:10px var(--mono-font);letter-spacing:.09em;color:var(--muted);margin-left:12px;padding-left:12px}.tutorial-stages{grid-template-columns:repeat(var(--chapter-count), minmax(0, 1fr));border-block:1px solid var(--line);margin:0;padding:0;list-style:none;display:grid}.tutorial-stages li+li button{border-left:1px solid var(--line)}.tutorial-stages button{text-align:left;flex-direction:column;align-items:flex-start;gap:8px;width:100%;height:100%;padding:20px 18px;display:flex}.tutorial-stages button:hover{background:var(--ink);color:var(--bg)}.tutorial-stages button:hover :is(.index-number,.stage-label,.stage-blurb){color:inherit}.tutorial-stages li.is-active button{box-shadow:inset 0 -2px 0 var(--accent-ink)}.stage-label{font:10px var(--mono-font);letter-spacing:.05em;color:var(--accent-ink)}.tutorial-stages strong{letter-spacing:-.02em;font-size:16px;font-weight:700}.stage-blurb{color:var(--muted);font-size:12px;line-height:1.75}.tutorial-stages svg{margin-top:auto}.tutorial-layout{grid-template-columns:218px minmax(0,1fr);gap:48px;padding-top:38px;display:grid}.rail-mobile{display:none}.tutorial-rail{overscroll-behavior:contain;scrollbar-width:thin;border-top:1px solid var(--line);align-self:start;max-height:calc(100dvh - 130px);padding-top:22px;position:sticky;top:104px;overflow-y:auto}.tutorial-rail>.micro-label{margin-bottom:14px;display:block}.rail-chapters button{text-align:left;border-left:2px solid #0000;align-items:baseline;gap:10px;width:100%;padding:9px 10px;font-size:13px;font-weight:650;display:flex}.rail-chapters button>span{font:10px var(--mono-font);color:var(--muted)}.rail-chapters button:hover{background:var(--grid)}.rail-chapters button.is-active{color:var(--accent-ink);border-left-color:var(--accent-ink);background:rgb(var(--accent-ink-rgb) / .045)}.rail-sections{border-top:1px solid var(--line);margin-top:30px;padding-top:22px}.rail-sections .micro-label{margin-bottom:14px;display:block}.rail-sections a{color:var(--muted);border-left:2px solid #0000;gap:10px;padding:7px 10px;font-size:12px;line-height:1.65;display:flex}.rail-sections a>span{font:10px var(--mono-font);flex-shrink:0;padding-top:3px}.rail-sections a:hover{color:var(--ink);background:var(--grid)}.rail-sections a[aria-current=location]{color:var(--accent-ink);border-left-color:var(--accent-ink);background:rgb(var(--accent-ink-rgb) / .045)}.rail-note{font:10px/1.8 var(--mono-font);letter-spacing:.09em;color:var(--muted);margin-top:34px;display:block}.tutorial-body{min-width:0;max-width:800px}.chapter-head{border-bottom:1px solid var(--line);padding-bottom:32px}.chapter-head .micro-label{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.chapter-head .micro-label a{color:var(--accent-ink);align-items:center;gap:3px;display:inline-flex}.chapter-title{display:none}.chapter-head h2{margin-top:22px;font-size:44px}.locale-zh .chapter-head h2{font-size:33px}.chapter-blurb{max-width:680px;color:var(--muted);margin-top:18px;font-size:15.5px;line-height:1.9}.chapter-intro{border-top:1px solid var(--line);max-width:74ch;margin-top:26px;padding-top:24px}.chapter-intro .prose:first-child{margin-top:0}.chapter-intro .prose-heading{margin-top:26px;font-size:18px}.chapter-stats{border-top:1px solid var(--line);flex-wrap:wrap;gap:34px;margin:26px 0 0;padding-top:20px;display:flex}.chapter-stats dt{font:10px var(--mono-font);letter-spacing:.06em;color:var(--muted)}.chapter-stats dd{font:600 22px var(--display-font);margin:6px 0 0}.tutorial-section{border-bottom:1px solid var(--line);padding-block:38px;scroll-margin-top:24px}.tutorial-section.kind-next{background:rgb(var(--accent-ink-rgb) / .03);padding-inline:24px}.lesson-head{align-items:baseline;gap:18px;display:flex}.lesson-number{font:600 32px/1.25 var(--display-font);letter-spacing:-.04em;color:var(--accent-ink)}.lesson-kind{border:1px solid var(--line);font:10px/1.5 var(--mono-font);letter-spacing:.07em;color:var(--muted);padding:5px 9px;display:inline-block}.lesson-title{flex:1;min-width:0}.lesson-title>.micro-label{display:none}.lesson-title h2{text-wrap:balance;margin:0;font-size:30px;line-height:1.35}.locale-zh .lesson-title h2{font-size:26px;line-height:1.4}.lesson-title h2:focus,.chapter-head h2:focus,.tutorial-page #main:focus{outline:none}.lesson-anchor{font:11px var(--mono-font);color:var(--muted);align-items:center;gap:7px;margin-top:12px;display:inline-flex}.lesson-anchor:hover{color:var(--accent-ink)}.lesson-body{min-width:0;margin-left:0}.prose,.prose-list,.prose-heading,.prose-subheading,.prose-quote{max-width:68ch}.prose{overflow-wrap:break-word;margin-top:20px;font-size:16px;line-height:1.9}.prose+.prose{margin-top:15px}.prose code,.prose-list code,.prose-table code,.prose-quote code,.lesson-body>.prose-heading code{border:1px solid var(--line);background:rgb(var(--accent-ink-rgb) / .06);font:12.5px/1.5 var(--mono-font);overflow-wrap:anywhere;padding:2px 6px}.prose-heading{letter-spacing:-.02em;margin-top:38px;font-size:20px;font-weight:700}.prose-heading code,.prose-subheading code{font-size:.85em}.prose-subheading{color:var(--muted);margin-top:26px;font-size:16px;font-weight:650}.prose-list{margin:18px 0 0;padding-left:22px;font-size:15.5px;line-height:1.95}.prose-list.ordered{list-style:decimal}.prose-list li+li{margin-top:9px}.prose-quote{border-left:2px solid var(--accent-ink);background:rgb(var(--accent-ink-rgb) / .04);color:var(--muted);margin:24px 0 0;padding:16px 22px;font-size:14.5px;line-height:1.9}.prose-quote p+p{margin-top:12px}.prose-rule{border:0;border-top:1px solid var(--line);margin:38px 0 0}.tutorial-link{color:var(--accent-ink);text-underline-offset:4px;align-items:center;gap:3px;text-decoration:underline;text-decoration-thickness:1px;display:inline-flex}.tutorial-link:hover{text-decoration-thickness:2px}.tutorial-code{border:1px solid var(--line);background:var(--editor-bg);color:var(--editor-ink);border-radius:3px;margin-top:24px;overflow:hidden}.code-head{border-bottom:1px solid var(--editor-line);font:12px var(--mono-font);background:#1d2225;justify-content:space-between;align-items:center;gap:12px;padding:13px 18px;display:flex}.code-head>span{align-items:center;gap:10px;display:flex}.code-copy{font:11px var(--mono-font);white-space:nowrap;align-items:center;gap:8px;padding:6px 0;display:inline-flex}.code-copy:hover{color:#a4b5ff}.source-scroll{scrollbar-width:thin;scrollbar-color:#fff4 transparent;max-height:540px;font:13px/24px var(--mono-font);display:flex;overflow:auto}.source-gutter{z-index:1;background:var(--editor-bg);color:#757d85;text-align:right;-webkit-user-select:none;user-select:none;border-right:1px solid #ffffff0d;flex-shrink:0;width:42px;padding:22px 0;position:sticky;left:0}.source-gutter>span{height:24px;padding-right:12px;display:block}.source-gutter>span:before{content:attr(data-line);font-size:10px}.tutorial-code pre{min-width:max-content;font:inherit;margin:0;padding:22px 18px}.source-plain{scrollbar-width:thin;max-height:520px;overflow:auto}.source-plain pre{font:12px/1.9 var(--mono-font);padding:22px 18px}:root[data-theme=dark] .code-head{background:var(--surface-bright);color:var(--ink);border-bottom-color:var(--editor-line)}:root[data-theme=dark] .source-file-dot{background:var(--accent-ink)}.table-scroll{border:1px solid var(--line);background:var(--surface-bright);scrollbar-width:thin;margin-top:26px;overflow-x:auto}.prose-table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.7}.prose-table th,.prose-table td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:13px 16px}.prose-table th{font:11px var(--mono-font);letter-spacing:.04em;color:var(--muted);border-bottom-color:var(--ink);white-space:nowrap}.prose-table tr:last-child td{border-bottom:0}.prose-table tbody tr:hover{background:var(--grid)}.tutorial-figure{border:1px solid var(--line);background-color:var(--surface-bright);background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);background-size:32px 32px;margin:34px 0 0}.figure-inline{margin-top:30px}.chapter-head .tutorial-figure{background:var(--bg);background-image:none;margin-top:30px}.figure-head{border-bottom:1px solid var(--line);background:var(--bg);font:10px var(--mono-font);letter-spacing:.06em;color:var(--muted);justify-content:space-between;gap:16px;padding:13px 18px;display:flex}.figure-head>span:first-child{color:var(--accent-ink)}.figure-note{border-top:1px solid var(--line);background:var(--bg);color:var(--muted);padding:15px 18px;font-size:13px;line-height:1.85}.pipe-track{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:0;padding:30px 22px;list-style:none;display:grid}.pipe-track li{--local:clamp(0, calc((var(--motion-progress,0) - var(--i) * .125) * 8), 1);border:1px solid var(--line);background:var(--bg);text-align:center;transform:translateY(calc(var(--local) * -3px));transition:background-color .6s var(--ease), color .6s, border-color .6s;flex-direction:column;align-items:center;gap:10px;padding:16px 12px;display:flex;position:relative}.pipe-track li+li:before{content:"";background:var(--line);width:6px;height:1px;position:absolute;top:50%;left:-10px}.pipe-track li>span{font:11px var(--mono-font);color:var(--muted)}.pipe-track li strong{font-size:14px;font-weight:650}.pipe-track li code{font:11px var(--mono-font);color:var(--muted)}.pipe-track li.lit{background:var(--accent);border-color:var(--accent);color:#fff}.pipe-track li.lit :is(span,code){color:#ffffffe0}.pipe-track li.past{border-color:var(--accent-ink)}.result-stack{flex-direction:column;gap:10px;padding:26px 22px;display:flex}.result-frame{border:1px solid var(--line);background:var(--bg);font:12px var(--mono-font);justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;display:flex}.result-frame code{color:var(--accent-ink)}.result-lane{font:11px var(--mono-font);color:var(--muted);opacity:.38;grid-template-columns:176px minmax(0,1fr) 168px;align-items:center;gap:14px;padding:6px 18px;transition:opacity .5s,color .5s;display:grid}.result-lane.lit{color:var(--accent-ink);opacity:1}.result-lane i{background:var(--line);height:1px;position:relative}.result-lane i>b{top:-1.5px;left:calc(var(--motion-progress,0) * 88%);background:var(--accent-ink);opacity:0;width:20px;height:4px;position:absolute}.result-lane.lit i>b{opacity:1}.containers{padding:28px 22px}.capacity{font:11px var(--mono-font);letter-spacing:.05em;color:var(--muted);justify-content:space-between;display:flex}.capacity code{color:var(--accent-ink)}.cells{grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;margin-top:14px;display:grid}.cells>span{aspect-ratio:1;border:1px solid var(--line);background:var(--bg);font:11px var(--mono-font);color:var(--muted);place-items:center;transition:background-color .45s,border-color .45s,color .45s;display:grid}.cells>span.filled{background:var(--accent);border-color:var(--accent);color:#fff}.cells>span.spare{background-image:repeating-linear-gradient(45deg, transparent, transparent 4px, var(--grid) 4px, var(--grid) 7px)}.capacity-foot{font:10px var(--mono-font);color:var(--muted);justify-content:space-between;gap:16px;margin-top:14px;display:flex}.ownership{grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:28px 22px;display:grid}.owner{border:1px solid var(--line);background:var(--bg);flex-direction:column;align-items:center;gap:8px;padding:18px;transition:border-color .5s;display:flex}.owner>span{font:600 28px var(--display-font)}.owner>code{font:11px var(--mono-font);color:var(--muted)}.owner>small{font:10px var(--mono-font);color:var(--accent-ink)}.owner>small.off{color:var(--muted);text-decoration:line-through}.owner.active{border-color:var(--accent-ink)}.owner-link{font:10px var(--mono-font);color:var(--muted);align-items:center;gap:9px;display:flex}.owner-link i{background:var(--line);width:24px;height:1px}.owner-link.lit{color:var(--accent-ink)}.owner-link.lit i{background:var(--accent-ink)}.borrow,.drop{border:1px dashed var(--line);font:11px var(--mono-font);color:var(--muted);grid-column:1/-1;align-items:center;gap:13px;padding:13px 16px;transition:border-color .5s,color .5s;display:flex}.borrow i,.drop i{background:var(--line);width:30px;height:1px}.borrow.lit,.drop.lit{border-color:var(--accent-ink);color:var(--accent-ink)}.loop{padding:28px 22px}.loop-cells{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.loop-cells li{border:1px solid var(--line);background:var(--bg);flex-direction:column;align-items:center;gap:8px;padding:15px 6px;transition:background-color .45s,border-color .45s,color .45s,opacity .45s;display:flex}.loop-cells li>span{font:12px var(--mono-font);color:var(--muted)}.loop-cells li>code{font:10px var(--mono-font);color:var(--muted)}.loop-cells li.lit{border-color:var(--accent-ink)}.loop-cells li.lit>span{color:var(--accent-ink)}.loop-cells li.add.lit{background:rgb(var(--accent-ink-rgb) / .08)}.loop-cells li.skipped{opacity:.45;border-style:dashed}.loop-cells li.stop.lit{background:var(--accent);border-color:var(--accent)}.loop-cells li.stop.lit :is(span,code){color:#fff}.loop-readout{border-top:1px solid var(--line);font:11px var(--mono-font);letter-spacing:.05em;color:var(--muted);align-items:baseline;gap:16px;margin-top:20px;padding-top:18px;display:flex}.loop-readout code{font:600 32px var(--display-font);color:var(--accent-ink)}.languages{padding:24px 22px}.lang-head,.languages li{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.lang-head span{font:10px var(--mono-font);letter-spacing:.06em;color:var(--muted)}.languages ul{gap:8px;margin:12px 0 0;padding:0;list-style:none;display:grid}.languages li{border:1px solid var(--line);background:var(--bg);padding:12px 15px;transition:border-color .5s,background-color .5s}.languages li code{font:11.5px var(--mono-font)}.languages li code:nth-child(3){color:var(--accent-ink)}.languages li.lit{border-color:var(--accent-ink);background:rgb(var(--accent-ink-rgb) / .06)}.chapter-pager{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;gap:16px;margin-top:12px;padding-top:28px;display:grid}.chapter-pager button{border:1px solid var(--line);align-items:center;gap:14px;padding:18px 20px;font-size:15px;font-weight:650;display:flex}.chapter-pager button.next{text-align:right;justify-content:flex-end}.chapter-pager button:hover{background:var(--ink);color:var(--bg)}.chapter-pager small{font:10px var(--mono-font);color:var(--muted);margin-bottom:7px;font-weight:400;display:block}.chapter-pager button:hover small{color:inherit}.tutorial-footer{border-top:1px solid var(--line)}.tutorial-footer>span{font:11px var(--mono-font);color:var(--muted)}@media (width<=1050px){.brand-suffix{display:none}.tutorial-layout{padding-top:34px;display:block}.tutorial-rail{z-index:5;border-block:1px solid var(--line);background:var(--bg);max-height:none;margin-bottom:26px;padding:12px 0;position:sticky;top:66px;overflow:visible}.rail-mobile{grid-template-columns:1fr 2fr;gap:16px;display:grid}.rail-mobile label{gap:5px;min-width:0;display:grid}.rail-mobile label>span{font:9px var(--mono-font);letter-spacing:.08em;color:var(--muted)}.rail-mobile select{border:1px solid var(--line);background:var(--bg);width:100%;min-width:0;color:var(--ink);text-overflow:ellipsis;border-radius:2px;padding:7px 24px 7px 8px;font-family:inherit;font-size:12px;line-height:1.5}.tutorial-rail .rail-chapters,.tutorial-rail .rail-sections,.rail-note{display:none}.tutorial-section{scroll-margin-top:108px}.tutorial-rail>.micro-label,.rail-sections .micro-label,.rail-note{display:none}.rail-chapters,.rail-sections{border:0;align-items:center;gap:4px;margin:0;padding:0;display:flex}.rail-chapters button,.rail-sections a{white-space:nowrap;border-bottom:2px solid #0000;border-left:0;flex-shrink:0;width:auto;padding:9px 13px}.rail-chapters button.is-active,.rail-sections a[aria-current=location]{border-left:0;border-bottom-color:var(--accent-ink);background:0 0}.rail-chapters button>span,.rail-sections a>span{display:none}.tutorial-stages{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=760px){.tutorial-hero{padding-bottom:0}.tutorial-intro{grid-template-columns:1fr;gap:16px;padding-block:24px}.tutorial-intro h1{margin:0;font-size:30px}.tutorial-intro>p{font-size:15px}.tutorial-stages{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}.stage-blurb{display:none}.tutorial-stages button{gap:7px;padding:16px 12px}.tutorial-stages svg{display:none}.tutorial-stages li:nth-child(3) button,.tutorial-stages li:nth-child(5) button{border-left:0}.tutorial-stages li:nth-child(n+3) button{border-top:1px solid var(--line)}.lesson-head{gap:12px}.lesson-number{font-size:28px}.lesson-body{margin-left:0}.tutorial-section{padding-block:30px}.chapter-head h2{font-size:34px}.locale-zh .chapter-head h2{font-size:28px}.chapter-stats{gap:24px}.pipe-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:22px 16px}.pipe-track li+li:before{display:none}.result-lane{grid-template-columns:1fr;gap:6px}.result-lane i,.result-lane small{display:none}.cells{grid-template-columns:repeat(4,minmax(0,1fr))}.ownership{grid-template-columns:1fr}.owner-link{justify-content:center}.borrow,.drop{grid-column:auto}.loop-cells{grid-template-columns:repeat(3,minmax(0,1fr))}.lang-head,.languages li{grid-template-columns:1fr 1fr}.languages li code:first-child{display:none}.chapter-pager{grid-template-columns:1fr}.chapter-pager button.next{grid-column:auto}.source-scroll{max-height:420px}}@media (width<=420px){.tutorial-intro h1{font-size:27px}.tutorial-stages strong{font-size:14px}.tutorial-stages svg{display:none}.lesson-title h2{font-size:24px}.locale-zh .lesson-title h2{font-size:22px}.prose{font-size:15px}.pipe-track{grid-template-columns:1fr}.loop-cells{grid-template-columns:repeat(2,minmax(0,1fr))}.source-gutter{width:34px}.tutorial-code pre,.source-plain pre,.code-head{padding-inline:14px}}.tutorial-stages button{position:relative;overflow:hidden}.tutorial-stages button:after{content:"";background:var(--accent-ink);transform-origin:0;width:28%;height:2px;position:absolute;bottom:0;left:0;transform:scaleX(0)}[data-motion=running] .tutorial-stages li.is-active button:after{animation:tutorial-stage-progress 3.6s var(--ease) infinite}@keyframes tutorial-stage-progress{0%,15%{opacity:.15;transform:scaleX(0)}68%{opacity:1;transform:scaleX(1)}to{opacity:.15;transform:scaleX(1)}}.code-head,.figure-head{position:relative;overflow:hidden}.code-head:after,.figure-head:after{content:"";background:var(--accent-ink);width:22%;height:1px;box-shadow:0 0 12px rgb(var(--accent-ink-rgb) / .7);opacity:0;position:absolute;bottom:0;left:-22%}[data-motion=running] .code-head:after,[data-motion=running] .figure-head:after{animation:tutorial-header-scan 5.4s var(--ease) infinite}@keyframes tutorial-header-scan{0%,12%{opacity:0;left:-22%}24%{opacity:.85}80%{opacity:.85}94%,to{opacity:0;left:100%}}@media (prefers-reduced-motion:reduce){.tutorial-stages button:after,.code-head:after,.figure-head:after{animation:none!important}}
