.tutorial-video-embed{corner-shape:squircle;border:0;border-radius:44px;width:min(100% - 48px,1000px);margin:0 auto 72px;font-family:Inter Variable,Inter,sans-serif;overflow:hidden}.tutorial-video-stage{aspect-ratio:16/9;border-radius:inherit;corner-shape:inherit;background:#000;flex:1;justify-content:center;align-items:center;min-height:0;margin:0;display:flex;position:relative;overflow:hidden}.tutorial-video-stage video{object-fit:contain;outline:none;width:100%;max-height:100%;display:block}.tutorial-video-stage video:focus-visible{outline-offset:-4px;outline:2px solid #fff}.tutorial-video-scrim{background:0 0;border:0;padding:0;position:absolute;inset:0}.tutorial-video-embed .tutorial-video-play{color:#fff;white-space:nowrap;background:#141414d9;border:1px solid #ffffff1f;border-radius:999px;outline:none;align-items:center;gap:12px;height:64px;padding:8px 24px 8px 8px;transition:background-color .14s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 25px 50px -12px #00000040}.tutorial-video-play:focus-visible{outline-offset:2px;outline:2px solid #fff}.tutorial-video-disc{flex-shrink:0;width:48px;height:48px;transition:transform .14s}.tutorial-video-divider{background:#ffffff26;flex-shrink:0;width:1px;height:60%}.tutorial-video-play img{object-fit:cover;border-radius:50%;flex-shrink:0;width:44px;height:44px}.tutorial-video-byline{text-align:left;flex-direction:column;align-items:flex-start;line-height:1.25;display:flex}.tutorial-video-byline>:first-child{font-size:16px;font-weight:500}.tutorial-video-byline>:last-child{color:#fff9;font-variant-numeric:tabular-nums;font-size:14px}@media (hover:hover) and (pointer:fine){.tutorial-video-play:hover{background:#262626e6}.tutorial-video-play:hover .tutorial-video-disc{transform:scale(1.05)}}@media (width<=599px){.tutorial-video-embed{border-radius:28px;width:calc(100% - 32px);margin-bottom:48px}.tutorial-video-embed .tutorial-video-play{white-space:normal;gap:8px;width:max-content;max-width:calc(100% - 24px);height:auto;min-height:48px;padding:6px 12px 6px 6px}.tutorial-video-disc{width:40px;height:40px}.tutorial-video-play img{width:36px;height:36px}.tutorial-video-byline{min-width:0}.tutorial-video-byline>:first-child{font-size:14px}.tutorial-video-byline>:last-child{font-size:12px}}.tutorial-video-embed-backdrop{--feature-glow:var(--color-ink);isolation:isolate;position:relative;overflow:visible}.tutorial-video-embed-backdrop .feature-demo-backdrop{--workspace-dots-opacity:.06;--workspace-grain-opacity:.11;inset:-100px -120px}.tutorial-video-embed-backdrop .feature-demo-backdrop:before{opacity:.5}.tutorial-video-poster{pointer-events:none;position:absolute;inset:0;overflow:hidden}.tutorial-video-poster-window{aspect-ratio:1700/918;border-radius:1.5%;width:110%;transition:opacity .26s ease-out;position:absolute;top:19.6%;left:-13%;overflow:hidden;box-shadow:0 8px 24px #0004}.tutorial-video-poster-window[data-pending=true]{opacity:0;transition:none}@media (prefers-reduced-motion:reduce){.tutorial-video-poster-window{transition:none}}.tutorial-video-poster-window img{width:112.941%;max-width:none;height:auto;position:absolute;top:-14.3791%;left:-6.4706%}.tutorial-wallpaper{width:100%;height:100%;display:block}.tutorial-video-poster-window img.tutorial-video-preview-light{object-fit:cover;width:100%;height:100%;top:0;left:0}html[data-theme-light=true] .tutorial-video-embed .tutorial-video-play{color:var(--color-ink,#222);background:#ffffffeb;border-color:#0000001a;box-shadow:0 8px 32px -8px #372d1e40}html[data-theme-light=true] .tutorial-video-byline>:last-child{color:var(--color-ink-muted,#555)}html[data-theme-light=true] .tutorial-video-divider{background:#00000024}html[data-theme-light=true] .tutorial-video-play:focus-visible{outline-color:var(--color-ink,#222)}@media (hover:hover) and (pointer:fine){html[data-theme-light=true] .tutorial-video-embed .tutorial-video-play:hover{background:#fff}}@media (width<=399px){.tutorial-video-play img,.tutorial-video-divider{display:none}}.benefit-video-poster{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.tutorial-video-embed .tutorial-video-stage-benefit .tutorial-video-play{top:90%}@media (width<=599px){.tutorial-video-stage-diagram{aspect-ratio:auto;padding-bottom:80px}.tutorial-video-stage-diagram video{aspect-ratio:16/9}.tutorial-video-stage-benefit .benefit-video-poster{height:calc(100% - 80px)}.tutorial-video-embed .tutorial-video-stage-benefit .tutorial-video-play{top:auto;bottom:12px;transform:translate(-50%)}}.tutorial-video-embed-diagram{border-radius:0}.tutorial-video-stage-diagram{background:0 0}
