.vs-live-preview{--vs-preview-scale:.55;position:relative;isolation:isolate;width:100%;height:440px;overflow:hidden;border:1px solid var(--vs-line);border-radius:16px;background:var(--vs-white)}.vs-live-preview[data-example=still]{--vs-preview-scale:.65}.vs-live-preview:after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(transparent,var(--vs-white));pointer-events:none}.vs-live-canvas{width:calc(100% / var(--vs-preview-scale));transform:scale(var(--vs-preview-scale));transform-origin:top left;pointer-events:none;user-select:none}.vs-live-canvas>.vs-demo-preview{min-height:0;background:var(--vs-white);color:var(--vs-ink)}.vs-preview-open{position:relative}.vs-preview-more:before{content:"";position:absolute;inset:0 0 56px;z-index:2;border-radius:16px}.vs-preview-more:focus-visible:before{outline:3px solid var(--vs-blue);outline-offset:4px}.vs-preview-more:hover .cn-arrow{transform:translateX(3px)}.vs-site[data-motion=full] .vs-preview-panel{animation:vs-panel-arrival .28s cubic-bezier(.16,1,.3,1)}.vs-example-visual{display:block;min-height:0;padding:0;border:0;background:transparent}.vs-example-visual>.vs-live-preview{--vs-preview-scale:.48;height:360px}.vs-example-visual>.vs-live-preview[data-example=offscript]{--vs-preview-scale:.42}.vs-example-visual>.vs-live-preview[data-example=still]{--vs-preview-scale:.65}@media(max-width:1023px){.vs-live-preview{height:420px}}@media(max-width:599px){.vs-live-preview{--vs-preview-scale:.45;height:420px;border-radius:12px}.vs-live-preview[data-example=still]{--vs-preview-scale:.55}.vs-example-visual>.vs-live-preview{--vs-preview-scale:.4;height:330px}.vs-example-visual>.vs-live-preview[data-example=offscript]{--vs-preview-scale:.4}.vs-example-visual>.vs-live-preview[data-example=still]{--vs-preview-scale:.45}}.vs-gallery>.vs-section-heading{display:grid;grid-template-columns:1fr .64fr;align-items:end;gap:64px;max-width:none;margin-bottom:64px}.vs-gallery .vs-section-heading h2{max-width:16ch}.vs-gallery .vs-section-heading p{max-width:35ch;margin:0;font-size:18px}.vs-gallery .vs-example-list{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;row-gap:72px;align-items:start}.vs-gallery .vs-example-list>.vs-example{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "preview" "details";gap:24px;align-items:start;align-self:start;min-width:0;margin:0;padding:0;border:0}.vs-gallery .vs-example-copy{grid-area:copy;min-width:0}.vs-gallery .vs-example-visual{grid-area:preview;min-width:0;width:100%}.vs-gallery .vs-example-details{grid-area:details;min-width:0}.vs-gallery .vs-example-copy h3{font-size:36px;line-height:1.12;letter-spacing:-.03em}.vs-gallery .vs-example-copy>p{font-size:18px;line-height:1.65;margin-top:16px;max-width:48ch}.vs-gallery .vs-example-task{font-size:17px;line-height:1.6;max-width:43ch}.vs-gallery .vs-example-note{color:var(--vs-muted);font-size:15px;line-height:1.65;max-width:48ch;margin-top:12px}.vs-gallery .vs-example-links{margin-top:20px}.vs-gallery .vs-example-list>.vs-example-form{grid-column:1/-1;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);grid-template-rows:auto 1fr;grid-template-areas:"copy preview" "details preview";column-gap:64px;row-gap:24px;padding-bottom:64px;border-bottom:1px solid var(--vs-line)}.vs-gallery .vs-example-form .vs-example-copy h3{max-width:11ch;font-size:clamp(38px,3.8vw,54px)}.vs-gallery .vs-example-form .vs-example-details{align-self:end}.vs-gallery .vs-example-list>.vs-example-still{margin-top:96px}.vs-gallery .vs-example-still .vs-example-visual{max-width:640px}.vs-gallery .vs-example-offscript .vs-example-visual{max-width:560px}@media (max-width:1199px){.vs-gallery .vs-example-list,.vs-gallery .vs-example-list>.vs-example-form{column-gap:40px}.vs-gallery .vs-example-copy h3{font-size:32px}.vs-gallery .vs-example-list>.vs-example-still{margin-top:64px}}@media (max-width:1023px){.vs-gallery>.vs-section-heading{gap:40px;margin-bottom:48px}.vs-gallery .vs-example-list{grid-template-columns:minmax(0,1fr);row-gap:56px}.vs-gallery .vs-example-list>.vs-example-form{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"copy" "preview" "details";padding-bottom:0;border:0}.vs-gallery .vs-example-form .vs-example-copy h3{max-width:none;font-size:36px}.vs-gallery .vs-example-list>.vs-example-still{margin-top:0}.vs-gallery .vs-example-list>.vs-example:not(:first-child){padding-top:32px;border-top:1px solid var(--vs-line)}}@media (max-width:599px){.vs-gallery>.vs-section-heading{display:block;margin-bottom:36px}.vs-gallery .vs-section-heading h2{max-width:none}.vs-gallery .vs-section-heading p{margin-top:16px;font-size:18px}.vs-gallery .vs-example-list{row-gap:40px}.vs-gallery .vs-example-list>.vs-example{gap:20px}.vs-gallery .vs-example-copy h3,.vs-gallery .vs-example-form .vs-example-copy h3{font-size:28px;line-height:1.2}.vs-gallery .vs-example-copy>p{margin-top:12px}.vs-gallery .vs-example-links{margin-top:18px}.vs-gallery .vs-example-list>.vs-example:not(:first-child){padding-top:28px}}