.tutorial-page .tutorial-hero.content-hero{min-height:min(34rem,70svh)}.tutorial-page .tutorial-hero.content-hero h1{max-width:22ch;font-size:clamp(2.25rem,4.6vw,4.25rem)}.tutorial-content{width:min(100%,64rem);padding:var(--space-section) var(--space-page);margin-inline:auto}.tutorial-content section{padding:var(--space-10) 0;border-top:1px solid var(--color-border);scroll-margin-top:6rem}.tutorial-content h2{max-width:28ch;margin:0 0 var(--space-6);font-size:var(--font-size-2xl);font-weight:var(--font-weight-medium);letter-spacing:-.035em;text-wrap:balance;line-height:1.1}.tutorial-content p,.tutorial-content li{max-width:var(--content-width-reading);color:var(--color-text-muted);font-size:var(--font-size-md);overflow-wrap:break-word;line-height:1.75}.tutorial-content a{color:inherit;text-underline-offset:.25em}.tutorial-content ul{padding-left:var(--space-5)}.tutorial-content li+li{margin-top:var(--space-2)}.tutorial-lead{padding-bottom:var(--space-6)}.tutorial-lead p{color:var(--color-text);font-size:var(--font-size-lg)}.tutorial-figure{margin:var(--space-8) 0}.tutorial-figure__frame{border:1px solid var(--color-border);background:var(--color-surface-muted);display:block}.tutorial-figure__frame:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.tutorial-figure img{width:100%;height:auto;display:block}.tutorial-figure--mobile .tutorial-figure__frame{width:min(100%,22rem)}.tutorial-figure--crop .tutorial-figure__frame{width:fit-content;max-width:100%}.tutorial-figure--crop img{width:auto;max-width:100%}.tutorial-figure-pair__items{gap:var(--space-6);grid-template-columns:repeat(2,minmax(0,20rem));align-items:start;display:grid}.tutorial-content .tutorial-ref{text-decoration:none}.tutorial-content .tutorial-ref:hover,.tutorial-content .tutorial-ref:focus-visible{text-decoration:underline}.tutorial-content ol{padding-left:var(--space-6)}.tutorial-checklist li{color:var(--color-text)}.tutorial-source-list p{font-size:var(--font-size-sm)}.tutorial-figure figcaption{max-width:var(--content-width-reading);margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--font-size-sm);line-height:1.6}.tutorial-figure__id{color:var(--color-text);font-family:var(--font-family-mono);font-size:var(--font-size-2xs);letter-spacing:.08em}.tutorial-table{max-width:100%;margin:var(--space-6) 0;border:1px solid var(--color-border);overflow-x:auto}.tutorial-table table{border-collapse:collapse;width:100%;min-width:34rem;font-size:var(--font-size-sm);line-height:1.5}.tutorial-table th,.tutorial-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top}.tutorial-table thead th{background:var(--color-surface-muted);color:var(--color-text);font-weight:var(--font-weight-medium)}.tutorial-table tbody th{color:var(--color-text);font-weight:var(--font-weight-medium)}.tutorial-table td{color:var(--color-text-muted)}.tutorial-table tbody tr:last-child>*{border-bottom:0}.tutorial-summary{border-bottom:1px solid var(--color-border)}.tutorial-summary p:first-of-type{color:var(--color-text);font-size:var(--font-size-lg)}.tutorial-content .tutorial-sources{margin-top:var(--space-8);font-size:var(--font-size-sm)}@media (width>=1200px){.tutorial-figure:not(.tutorial-figure--mobile,.tutorial-figure--crop,.tutorial-figure-pair) .tutorial-figure__frame{width:calc(100% + 12rem);margin-inline:-6rem}}@media (width<=640px){.tutorial-figure-pair__items{grid-template-columns:minmax(0,22rem)}.tutorial-table{border:0;overflow:visible}.tutorial-table table,.tutorial-table tbody,.tutorial-table tr,.tutorial-table th,.tutorial-table td{min-width:0;display:block}.tutorial-table thead{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tutorial-table tbody tr{margin-bottom:var(--space-4);border:1px solid var(--color-border)}.tutorial-table tbody th{background:var(--color-surface-muted)}.tutorial-table td{gap:var(--space-3);grid-template-columns:minmax(0,9rem) minmax(0,1fr);display:grid}.tutorial-table td:before{content:attr(data-label);color:var(--color-text);font-weight:var(--font-weight-medium)}.tutorial-table tbody tr:last-child>*{border-bottom:1px solid var(--color-border)}.tutorial-table tbody tr>:last-child{border-bottom:0}}@media (width<=800px){.tutorial-page .tutorial-hero.content-hero{min-height:auto}.tutorial-content p,.tutorial-content li,.tutorial-lead p,.tutorial-summary p:first-of-type{font-size:var(--font-size-md)}}
