.tutorial-post starlight-image-zoom-zoomable{--sl-color-bg-nav:var(--color-white);--sl-color-gray-2:var(--color-navy)}.tutorial-post starlight-image-zoom-zoomable .starlight-image-zoom-control{width:2.75rem;min-width:44px;height:2.75rem;min-height:44px}.tutorial-post+starlight-image-zoom,starlight-image-zoom{--sl-color-bg-nav:var(--color-white);--sl-color-gray-2:var(--color-navy);--sl-color-hairline:color-mix(in srgb, var(--color-navy), transparent 75%);--sl-color-black:#000c;--sl-nav-pad-x:1rem;--sl-nav-pad-y:.75rem}.tutorial-video:where(.astro-5yefzjdr){margin:1.5rem 0 2rem}.tutorial-video-trigger:where(.astro-5yefzjdr){aspect-ratio:16/9;background:var(--color-navy);cursor:pointer;border:0;border-radius:.75rem;width:100%;padding:0;font-family:inherit;display:block;position:relative;overflow:hidden}.tutorial-video-trigger:where(.astro-5yefzjdr)[hidden]{display:none}.tutorial-video-titlecard:where(.astro-5yefzjdr){background:linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-outline) 55%, var(--color-teal-dark) 140%);flex-direction:column;justify-content:space-between;padding:1rem 1.25rem;display:flex;position:absolute;inset:0}.tutorial-video-kicker:where(.astro-5yefzjdr){color:var(--color-teal);letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;font-weight:700}.tutorial-video-stage:where(.astro-5yefzjdr){flex:1;align-items:stretch;gap:1rem;min-height:0;padding:.75rem 0;display:flex}.tutorial-video-benefit:where(.astro-5yefzjdr){color:#fff;-webkit-line-clamp:4;-webkit-box-orient:vertical;flex:0 0 45%;align-self:center;font-size:clamp(.9375rem,2.4vw,1.375rem);font-weight:700;line-height:1.3;display:-webkit-box;overflow:hidden}.tutorial-video-still-frame:where(.astro-5yefzjdr){background:#ffffff0f;border-radius:.5rem;flex:0 0 50%;overflow:hidden;box-shadow:0 .5rem 1rem #0a0d1a59}.tutorial-video-still:where(.astro-5yefzjdr){object-fit:cover;width:100%;height:100%;display:block}.tutorial-video-play:where(.astro-5yefzjdr){color:#fff;background:#ffffff2e;border-radius:50%;justify-content:center;align-items:center;width:2rem;height:2rem;font-size:.8125rem;transition:background .2s,color .2s;display:inline-flex}.tutorial-video-trigger:where(.astro-5yefzjdr):hover .tutorial-video-play:where(.astro-5yefzjdr),.tutorial-video-trigger:where(.astro-5yefzjdr):focus-visible .tutorial-video-play:where(.astro-5yefzjdr){background:var(--color-teal);color:var(--color-navy)}.tutorial-video-trigger:where(.astro-5yefzjdr):focus-visible{outline:3px solid var(--color-teal);outline-offset:2px}@media (width<=640px){.tutorial-video-trigger:where(.astro-5yefzjdr){aspect-ratio:auto}.tutorial-video-titlecard:where(.astro-5yefzjdr){min-height:14rem;position:static}.tutorial-video-stage:where(.astro-5yefzjdr){flex-direction:column-reverse;gap:.5rem}.tutorial-video-benefit:where(.astro-5yefzjdr),.tutorial-video-still-frame:where(.astro-5yefzjdr){flex-basis:auto}.tutorial-video-still-frame:where(.astro-5yefzjdr){aspect-ratio:16/9;flex:none}}.tutorial-video-element:where(.astro-5yefzjdr){aspect-ratio:16/9;background:#000;border-radius:.75rem;width:100%;display:block}.tutorial-video-element:where(.astro-5yefzjdr)[hidden]{display:none}.tutorial-video-chapters:where(.astro-5yefzjdr){margin-top:.75rem}.tutorial-video-chapters:where(.astro-5yefzjdr) ul:where(.astro-5yefzjdr){flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.tutorial-video-chapter:where(.astro-5yefzjdr){border:1px solid var(--color-hairline);color:var(--color-navy);cursor:pointer;background:#fff;border-radius:999px;padding:.35rem .75rem;font-family:inherit;font-size:.8125rem;font-weight:600}.tutorial-video-chapter:where(.astro-5yefzjdr):hover,.tutorial-video-chapter:where(.astro-5yefzjdr):focus-visible{border-color:var(--color-teal-dark);background:color-mix(in srgb, var(--color-teal) 12%, #fff)}.tutorial-video-transcript:where(.astro-5yefzjdr){margin-top:1rem}.tutorial-video-transcript:where(.astro-5yefzjdr) summary:where(.astro-5yefzjdr){cursor:pointer;color:var(--color-navy);font-weight:600}.tutorial-video-transcript:where(.astro-5yefzjdr) p:where(.astro-5yefzjdr){color:var(--color-text-muted);white-space:pre-line;margin-top:.5rem;line-height:1.6}