:root{--help-bg: var(--paper);--help-surface: var(--paper-3);--help-ink: var(--ink);--help-muted: var(--ink-2);--help-rule: var(--rule);--help-accent: var(--brass)}.howto-index,.howto-lesson,.walkthrough{padding-block:clamp(3rem,6vw,4.5rem)}.howto-index>.lede,.howto-lesson>.lede,.walkthrough>.lede{max-width:48rem}.howto-lesson>h1,.walkthrough>h1{max-width:55rem}.intro-note,.guide-meta,.recording-note,.walkthrough .meta{font-size:.9375rem;color:var(--ink-2)}.guide-search-panel{border:1px solid var(--rule);border-radius:var(--radius);padding:1.25rem;margin:2rem 0 1rem;background:var(--paper-3)}.guide-search-fields{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;border:0;padding:0;margin:0;min-width:0}.guide-search-fields label{display:flex;flex-direction:column;gap:.45rem;font-size:.9375rem;font-weight:600;flex:1 1 10rem;min-width:0}.guide-search-fields .guide-search-field{flex:2 1 19rem}.guide-search-fields input,.guide-search-fields select{font:inherit;min-height:3rem;padding:.6rem .8rem;border:1px solid var(--rule);border-radius:var(--radius);color:var(--ink);background:var(--paper-3);width:100%;max-width:100%}.guide-search-panel>p{margin:.85rem 0 0}.results-count{margin:1rem 0}.howto-grid,.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.5rem}.howto-card,.guide-card{display:block;border:1px solid var(--rule);border-radius:var(--radius);padding:1.25rem;background:var(--paper-3);min-width:0;color:var(--ink);text-decoration:none}.guide-card:hover,.howto-card:focus-within{border-color:var(--brass)}.lesson-link{display:block;text-decoration:none}.lesson-link img,.guide-card img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;object-position:top;background:var(--ink);border-radius:var(--radius);margin-bottom:1rem}.lesson-link h2,.guide-card h3{font-size:1.3rem;line-height:1.3}.howto-card>p,.guide-card>p{font-size:1rem;line-height:1.6}.guide-meta{margin-bottom:.6rem}.reference-tile{aspect-ratio:16 / 9;display:grid;place-items:center;background:var(--ink);color:var(--paper-3);border-radius:var(--radius);margin-bottom:1rem;font-family:var(--serif);font-size:1.6rem}.no-results{padding:1.25rem;border:1px solid var(--rule);border-radius:var(--radius)}.no-results button{font:inherit;border:0;background:none;padding:0;color:inherit;text-decoration:underline;cursor:pointer}.help-footer{border-top:1px solid var(--rule);margin-top:3rem;padding-top:2rem}.prerequisite{padding:1rem 1.25rem;border:1px solid var(--rule);border-radius:var(--radius);font-size:1rem;max-width:55rem}.howto-lesson video,.walkthrough video{display:block;width:100%;height:auto;background:#080a0e;border-radius:var(--radius);margin:1.75rem 0 .8rem;max-height:80vh}.recording-note{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}.steps{margin-block:2.75rem}.steps>ol{padding-left:1.6rem}.steps>ol>li{padding-left:.6rem;margin-bottom:2.25rem}.steps h3{font:600 1.25rem/1.4 var(--sans);margin-bottom:.5rem}.steps>ol>li>p{max-width:49rem}.tip,.walkthrough .note{padding:1.25rem;border-left:3px solid var(--brass);background:var(--paper-3)}.tip p{margin:.5rem 0 0}.transcript,.credits{margin-top:1.5rem;border-bottom:1px solid var(--rule);padding-bottom:1.25rem}.howto-lesson summary{cursor:pointer;font-weight:600;min-height:2.75rem}.transcript ol{list-style:none;padding-left:0}.transcript li{margin:.75rem 0}.transcript button{font:inherit;font-variant-numeric:tabular-nums;margin-right:.65rem;padding:.4rem .6rem;min-width:3.8rem;min-height:2.75rem;border:1px solid var(--rule);border-radius:var(--radius);cursor:pointer;background:var(--paper-3);color:var(--ink)}.transcript .mono{display:inline-block;color:var(--brass);min-width:3.6rem}.credits{font-size:.9375rem}.credits p{margin-top:1rem}.lesson-nav{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}.lesson-nav a{white-space:normal;max-width:100%}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}.walkthrough .guide-step{margin:2.5rem 0;padding:1.5rem;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper-3);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:1.5rem;align-items:start}.walkthrough .guide-step.desktop{display:block}.walkthrough .guide-step.desktop figure{margin-top:1.5rem}.walkthrough .guide-step h2{font-size:1.5rem;line-height:1.3}.walkthrough figure{margin:0;text-align:center}.walkthrough figcaption{text-align:left;font-size:.9375rem;color:var(--ink-2);margin-top:.75rem}.walkthrough .number{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--ink);color:var(--paper-3);font:500 1rem var(--sans);margin-right:.6rem}.walkthrough .screenshot{position:relative;width:100%;max-width:405px;margin-inline:auto}.walkthrough .desktop .screenshot{max-width:1400px}.walkthrough .screenshot img{display:block;width:100%;height:auto;border:0}.walkthrough .screenshot svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.walkthrough .result{border-top:1px solid var(--rule);padding-top:1.25rem}@media(max-width:42rem){.walkthrough .guide-step{display:block;padding:1.1rem}.walkthrough figure{margin-top:1.25rem}}@media print{.walkthrough video,.walkthrough .downloads,.walkthrough .lesson-nav{display:none}.walkthrough .guide-step{break-inside:avoid}}
