.tutorial-article{min-width:0}.tutorial-current-path{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:30px;margin-bottom:24px;padding-bottom:28px;display:flex}.tutorial-current-path>div{min-width:0;max-width:65ch}.tutorial-current-path h3{text-wrap:pretty;font-size:17px}.tutorial-current-path h3 a{align-items:center;gap:12px;display:inline-flex}.tutorial-current-path svg{flex-shrink:0}.tutorial-current-path p{text-wrap:pretty;font-size:13px}.tutorial-current-path>.button{flex-shrink:0}@media (width<=1200px){.tutorial-current-path{flex-direction:column;align-items:flex-start;gap:18px}}.tutorial-edition{max-width:76ch;color:var(--muted);margin:0 0 2rem;font-size:.82rem;line-height:1.65}.tutorial-series{border-block:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:2rem;padding-block:1rem;display:grid}.tutorial-series a{color:var(--muted);flex-direction:column;gap:.3rem;font-size:.84rem;line-height:1.5;display:flex}.tutorial-series a span:first-child{letter-spacing:.05em;text-transform:uppercase;font-size:.72rem}.tutorial-series a[aria-current=page]{color:var(--blue)}.tutorial-lead:empty{display:none}.tutorial-prose>p,.tutorial-prose>ul,.tutorial-prose>ol,.tutorial-lead>p{max-width:76ch}.tutorial-prose p,.tutorial-lead p{line-height:1.85}.tutorial-prose ul,.tutorial-prose ol{color:var(--muted);margin-block:1.3rem;padding-left:1.25rem;line-height:1.85}.tutorial-prose li+li{margin-top:.65rem}.tutorial-prose strong{color:var(--ink);font-weight:600}.tutorial-prose h3{text-wrap:balance;margin:2.3rem 0 1rem;scroll-margin-top:7rem;font-size:1.2rem;line-height:1.35}.tutorial-prose a,.tutorial-lead a,.tutorial-source a{overflow-wrap:anywhere}.tutorial-figure{max-width:100%;margin:1.8rem 0 .65rem}.tutorial-figure a{display:block}.tutorial-figure img{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:660px;margin-inline:auto;display:block}.tutorial-caption,.tutorial-figure figcaption{color:var(--muted);max-width:90ch;margin:.65rem 0 2rem;font-size:.8rem;line-height:1.7}.tutorial-video{width:auto;max-width:100%;height:auto;max-height:550px;margin:1.8rem auto .65rem;display:block}.tutorial-prose blockquote,.tutorial-note{border-left:2px solid var(--line);max-width:76ch;margin:1.6rem 0;padding:.15rem 0 .15rem 1.3rem}.tutorial-video-reference{align-items:center;gap:.6rem;padding:.8rem 0;display:inline-flex}.tutorial-code{border:1px solid var(--line);border-radius:3px;min-width:0;margin:1.8rem 0}.tutorial-code figcaption{background:var(--panel);color:var(--muted);justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1rem;font-size:.8rem;display:flex}.tutorial-code button{color:var(--blue);cursor:pointer;font:inherit;background:0 0;border:none;flex-shrink:0;align-items:center;gap:.4rem;padding:.35rem .5rem;display:inline-flex}.tutorial-code pre{white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4;margin:0;padding:1.2rem;font-size:.8rem;line-height:1.75}.tutorial-prose code{overflow-wrap:anywhere;font-size:.84em}.tutorial-code code{font-size:inherit}.tutorial-table{width:100%;margin:1.8rem 0}.tutorial-table table{table-layout:fixed;border-collapse:collapse;width:100%;font-size:.82rem}.tutorial-table th,.tutorial-table td{border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere;padding:.9rem}.tutorial-table th:first-child{width:30%}.tutorial-table th{background:var(--panel);font-weight:600}.tutorial-source{color:var(--muted);margin-top:2rem;font-size:.8rem}@media (width<=620px){.tutorial-series{gap:.6rem}.tutorial-series a{font-size:.76rem}.tutorial-prose p,.tutorial-lead p,.tutorial-prose li{line-height:1.8}.tutorial-figure{margin-top:1.3rem}.tutorial-prose blockquote,.tutorial-note{padding-left:.85rem}.tutorial-code pre{padding:.85rem;font-size:.73rem}.tutorial-table td,.tutorial-table th{padding:.65rem .5rem}}.tutorial-image-open{cursor:zoom-in;background:0 0;border:0;width:100%;padding:0 0 28px;display:block;position:relative}.tutorial-image-cue{color:var(--blue);align-items:center;gap:6px;font-size:11px;line-height:1.5;display:inline-flex;position:absolute;bottom:0;right:0}.tutorial-image-dialog{border:1px solid var(--line);background:#fff;border-radius:4px;width:min(1500px,100vw - 32px);max-width:none;max-height:calc(100dvh - 32px);padding:0;overflow:auto}.tutorial-image-dialog::backdrop{background:#122331a6}.tutorial-image-dialog>header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding:8px 12px 8px 20px;display:flex}.tutorial-image-dialog h2{margin:0;font-size:15px;font-weight:550;line-height:1.5}.tutorial-image-dialog header button{background:#fff;border:0;place-items:center;width:40px;height:40px;padding:0;display:grid}.tutorial-image-close{cursor:zoom-out;background:#fff;border:0;width:100%;padding:0;display:block}.tutorial-image-close img{object-fit:contain;width:100%;max-height:calc(100dvh - 146px);display:block}.tutorial-image-dialog footer{border-top:1px solid var(--line);padding:12px 20px}.tutorial-image-dialog footer a{color:var(--blue);align-items:center;gap:8px;font-size:12px;display:inline-flex}.tutorial-image-open:focus-visible,.tutorial-image-dialog :is(button,a):focus-visible{outline:2px solid var(--blue);outline-offset:-3px}.tutorial-code button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.tutorial-lead:not(:empty){margin-bottom:24px}
