.tutorial-intro{max-width:860px}.tutorial-back{display:inline-block;margin-bottom:22px;font-size:14px;font-weight:600}.tutorial-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;align-items:start}.tutorial-toc{position:sticky;top:105px;font-size:14px;line-height:1.5}.tutorial-toc nav{display:grid;gap:4px;border-left:2px solid var(--line);padding:0 0 10px 16px;margin-bottom:18px}.tutorial-toc strong{margin-bottom:9px;color:var(--ink)}.tutorial-toc nav a{color:var(--muted);padding:6px 0}.tutorial-toc nav a:hover{color:var(--ink)}.tutorial-body{max-width:820px;min-width:0}.tutorial-body section{scroll-margin-top:120px;padding-top:28px;margin-top:32px;border-top:1px solid var(--line)}.tutorial-body section h2{margin-top:0}.tutorial-body p{max-width:75ch}.tutorial-body li+li{margin-top:12px}.tutorial-body .document-code{margin:20px 0}.tutorial-body .document-code pre{padding-bottom:48px;max-width:100%;overflow-x:auto}.tutorial-note,.tutorial-result{padding:20px 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface,#fff);margin:20px 0}.tutorial-result{border-left:3px solid var(--green);margin:0}.tutorial-note p,.tutorial-result p{margin:6px 0 0}.tutorial-note>p:first-child{margin-top:0}.tutorial-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:12px 0 36px}.tutorial-card{display:flex;gap:20px;align-items:flex-start;padding:28px;border:1px solid var(--line);border-radius:16px;background:#fff;text-decoration:none!important;color:var(--ink)}.tutorial-card:hover{border-color:var(--green);box-shadow:0 6px 24px #19332608}.tutorial-card h2{font-size:21px;margin:0 0 10px;line-height:1.3}.tutorial-card p{color:var(--muted);font-size:15px;line-height:1.65;margin:0 0 18px}.tutorial-number{font-size:13px;font-weight:700;color:var(--green);padding-top:4px}.tutorial-card-link{font-size:14px;font-weight:650}.tutorial-next{border-top:1px solid var(--line);padding-top:28px;margin-top:40px;display:grid;gap:8px}.tutorial-next span{font-size:13px;color:var(--muted)}.tutorial-next a{font-size:19px;font-weight:650}.tutorial-filter{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.6fr);gap:12px;margin:24px 0 12px}.tutorial-filter label{display:grid;gap:8px;font-size:13px;font-weight:600}.tutorial-filter input,.tutorial-filter select{font:inherit;font-weight:400;font-size:15px;width:100%;min-width:0;height:46px;background:white;color:var(--ink);padding:10px 12px;border:1px solid #bfcac3;border-radius:8px}.tutorial-filter [data-chain-count]{grid-column:1/-1;margin:0;font-size:13px;color:var(--muted)}.tutorial-chain{border:1px solid var(--line);border-radius:10px;background:#fff;margin:10px 0}.tutorial-chain summary{cursor:pointer;padding:17px 18px;display:flex;align-items:center;gap:16px;list-style:none;position:relative}.tutorial-chain summary::-webkit-details-marker{display:none}.tutorial-chain summary:after{content:'+';font-size:20px;flex:0 0 16px;text-align:center;color:var(--muted)}.tutorial-chain[open] summary:after{content:'−'}.tutorial-chain-name{display:flex;gap:12px;align-items:baseline;flex:1;min-width:0}.tutorial-chain-name strong{font-size:16px}.tutorial-chain-name>span{color:var(--muted);font-size:13px}.tutorial-chain-kind{font-size:12px;color:var(--muted);text-align:right}.tutorial-chain-body{padding:0 18px 20px;font-size:15px}.tutorial-chain-body p{margin:10px 0 14px}.tutorial-chain-body a{font-size:14px}.tutorial-references{font-size:13px;color:var(--muted)}.tutorial-layout [hidden]{display:none!important}.tutorial-body code{overflow-wrap:anywhere}.tutorial-body pre code{overflow-wrap:normal}.tutorial-body summary:focus-visible,.tutorial-filter :is(input,select):focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media(max-width:1000px){.tutorial-layout{grid-template-columns:190px minmax(0,1fr);gap:26px}.tutorial-toc{top:145px}.tutorial-card{padding:22px;gap:14px}.tutorial-card h2{font-size:19px}}
@media(max-width:700px){.tutorial-layout{grid-template-columns:1fr;gap:20px}.tutorial-toc{position:static}.tutorial-toc nav{grid-template-columns:1fr;gap:0;margin:0}.tutorial-toc> a{display:none}.tutorial-toc nav a{padding:7px 0}.tutorial-cards{grid-template-columns:1fr;gap:14px}.tutorial-card{padding:22px 18px}.tutorial-card h2{font-size:20px}.tutorial-note,.tutorial-result{padding:18px}.tutorial-body section{scroll-margin-top:90px;margin-top:26px;padding-top:24px}.tutorial-filter{grid-template-columns:1fr}.tutorial-chain summary{padding:15px 12px;gap:8px}.tutorial-chain-name{display:block}.tutorial-chain-name>span{display:block;margin-top:3px}.tutorial-chain-kind{max-width:115px}.tutorial-chain-body{padding:0 14px 17px}}
/* The homepage FAQ rotates its plus span. Chain labels are not that icon. */
.tutorial-chain[open]>summary>span,.tutorial-chain>summary>span{transform:none;transition:none}.tutorial-chain-name strong{color:var(--ink)}.tutorial-chain>summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.tutorial-chain-body p{font-size:15px;line-height:1.75;padding:0}.tutorial-body .guide-details p{padding:0}