.sample-tile{view-transition-class:sample}::view-transition-group(.sample){animation-duration:.46s;animation-timing-function:var(--ease-morph)}.magpie-toast{color:#111;letter-spacing:.1px;-webkit-font-smoothing:antialiased;opacity:0;background:#f4f4f2;border:1px solid #1111111f;align-items:flex-start;gap:9px;max-width:320px;padding:9px 14px 9px 12px;font:500 13px/1.4 -apple-system,BlinkMacSystemFont,SF Pro Text,Inter,Helvetica Neue,sans-serif;transition:opacity .18s ease-out,transform .18s ease-out;display:flex;transform:translateY(6px)}.magpie-toast.in{opacity:1;transform:none}.magpie-toast .dot{background:#ff5b03;flex:none;width:8px;height:8px;margin-top:5px}@media (prefers-color-scheme:dark){.magpie-toast{color:#f5f5f5;background:#0e0e0d;border-color:#f5f5f524}}@media (prefers-reduced-motion:reduce){.magpie-toast{transition:opacity .12s linear;transform:none}}.backdrop{filter:saturate(.85)contrast(.92)}@media (prefers-color-scheme:dark){.backdrop{filter:brightness(.62)saturate(.85)}}.morph-name{view-transition-class:morph}.mac-edge{border-color:#c4c4bf}.ext{--x-bg:#fff;--x-super:#111;--x-primary:#111111e6;--x-secondary:#11111180;--x-tertiary:#1111114d;--x-tint:#1111110a;--x-tint-strong:#11111114;--x-ok:#1a7f37;background:var(--x-bg);color:var(--x-primary);border:1px solid #1111111f}.ext-dark{--x-bg:#161616;--x-super:#f5f5f5;--x-primary:#f5f5f5e6;--x-secondary:#f5f5f580;--x-tertiary:#f5f5f54d;--x-tint:#f5f5f50d;--x-ok:#3fb950;border-color:#f5f5f524}@media (prefers-color-scheme:dark){.mac-edge{border-color:#3a3a37}.ext{--x-bg:#161616;--x-super:#f5f5f5;--x-primary:#f5f5f5e6;--x-secondary:#f5f5f580;--x-tertiary:#f5f5f54d;--x-tint:#f5f5f50d;--x-tint-strong:#f5f5f51a;--x-ok:#3fb950;border-color:#f5f5f524}}.ext-bar{animation:1.2s ease-in-out infinite ext-slide}@keyframes ext-slide{0%{transform:translate(-100%)}to{transform:translate(340%)}}@media (prefers-reduced-motion:reduce){.ext-bar{animation:none;transform:translate(80%)}}.site{--cr-frame:#dee3ea;--cr-bar:#fff;--cr-omni:#e9eef6;--cr-text:#1f1f1f;--cr-icon:#474747;--cr-line:#0000000f;--ig-bg:#fff;--ig-text:#000;--ig-muted:#737373;--ig-line:#dbdbdb;--xx-bg:#fff;--xx-text:#0f1419;--xx-muted:#536471;--xx-line:#eff3f4;--mm-bg:#f6f6f6db;--mm-text:#000000db;--mm-dim:#0006;--mm-line:#0000001a;--mm-hold:#ffffff73}@media (prefers-color-scheme:dark){.site{--cr-frame:#1f1f1f;--cr-bar:#3c3c3c;--cr-omni:#282828;--cr-text:#e3e3e3;--cr-icon:#c7c7c7;--cr-line:#ffffff0f;--ig-bg:#000;--ig-text:#f5f5f5;--ig-muted:#a8a8a8;--ig-line:#262626;--xx-bg:#000;--xx-text:#e7e9ea;--xx-muted:#71767b;--xx-line:#2f3336;--mm-bg:#2a2a2adb;--mm-text:#ffffffe0;--mm-dim:#fff6;--mm-line:#ffffff1f;--mm-hold:#ffffff2e}}.landing{--panel:#eeede9;--button-2:#e4e3de;--t-60:#0009}@media (prefers-color-scheme:dark){.landing{--panel:#171716;--button-2:#252523;--t-60:#fff9}}.stage-window{box-shadow:0 16px 40px #00000012,0 2px 8px #0000000d}@media (prefers-color-scheme:dark){.stage-window{box-shadow:0 16px 40px #0000004d,0 2px 8px #00000038}}.mac-window{border-radius:0}.stage-shape{filter:drop-shadow(0 12px 20px #00000012)drop-shadow(0 2px 4px #0000000d)}@media (prefers-color-scheme:dark){.stage-shape{filter:drop-shadow(0 12px 20px #0000004d)drop-shadow(0 2px 4px #00000038)}}.demo-in{animation:.46s cubic-bezier(.2,.7,.2,1) both demo-rise}.demo-fade{animation:.36s ease-out both demo-fade}.demo-open{animation:.38s cubic-bezier(.2,.7,.2,1) both demo-open}@keyframes demo-rise{0%{opacity:0;transform:translateY(10px)}}@keyframes demo-fade{0%{opacity:0}}@keyframes demo-open{0%{opacity:0;transform:scale(.985)}}.demo-hint{transition:background-color .22s ease-out,color .22s ease-out,box-shadow .22s ease-out}[data-index-row].demo-hint,[role=radio].demo-hint,.demo-field.demo-hint{background-color:var(--tint-strong);color:var(--t-super)}.sample-tile.demo-hint,[data-swatch].demo-hint,[aria-label^="Saves in "].demo-hint{box-shadow:0 0 0 2px var(--window), 0 0 0 4px var(--t-super)}.demo-caret{vertical-align:-.15em;background:var(--t-super);width:1px;height:1.05em;margin-left:1px;animation:1s step-end infinite demo-blink;display:inline-block}@keyframes demo-blink{50%{opacity:0}}.demo-scroll{transition:transform .82s cubic-bezier(.25,.1,.15,1)}@media (prefers-reduced-motion:reduce){.demo-in,.demo-fade,.demo-open,.demo-caret{animation:none}.demo-scroll{transition:none}}.funnel-icon-dark{display:none}@media (prefers-color-scheme:dark){.funnel-icon-light{display:none}.funnel-icon-dark{display:block}}.arc-mark{--arc-name:arc-mark;--arc-ease:cubic-bezier(.22, .61, .36, 1)}.arc-line{--arc-name:arc-line;--arc-ease:cubic-bezier(.22, .61, .36, 1)}.arc-spark{--arc-name:arc-spark;--arc-ease:cubic-bezier(.5, 0, .75, 1);opacity:0;background:linear-gradient(var(--t-super) 0 14px, transparent 14px)}.arc-icon{--arc-name:arc-icon;--arc-ease:ease-in-out}@media (max-width:639px) and (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()) and (animation-range:cover 0% cover 100%){.arc:not([data-scrub]){view-timeline:--arc block}.arc:not([data-scrub]) :is(.arc-mark,.arc-line,.arc-spark,.arc-icon){animation-name:var(--arc-name);animation-timing-function:var(--arc-ease);animation-fill-mode:both;animation-duration:auto;animation-timeline:--arc;animation-range:cover calc(15vh + (50% - 15vh) * var(--s0)) cover calc(15vh + (50% - 15vh) * (var(--s0) + var(--sl)))}}.arc[data-scrub] :is(.arc-mark,.arc-line,.arc-spark,.arc-icon){animation-name:var(--arc-name);animation-timing-function:var(--arc-ease);animation-duration:1s;animation-play-state:paused;animation-fill-mode:both;animation-delay:calc(clamp(0, (var(--p,1) - var(--s0)) / var(--sl), 1) * -1s)}}@keyframes arc-mark{0%{opacity:.15;transform:translate(calc(cos(var(--a)) * 20px), calc(sin(var(--a)) * -20px)) scale(.88)}}@keyframes arc-line{0%{scale:1 0}}@keyframes arc-spark{0%{opacity:0;translate:0 -14px}15%,70%{opacity:1}to{opacity:0;translate:0 100%}}@keyframes arc-icon{0%{scale:.9}70%{scale:.92}90%{scale:1.045}to{scale:1}}.film-chip{background:var(--window);white-space:nowrap;align-items:center;gap:8px;height:28px;padding:0 10px;font-size:13px;line-height:1;display:inline-flex}.sample-video{width:min(100%, calc(300px * var(--ratio)))}@media (min-width:768px){.sample-video-box{container-type:size}.sample-video{width:min(100%, calc((100cqh - 56px) * var(--ratio)))}}@media (max-width:639px){.sample-tile .text-tile{gap:6px;padding:8px}.sample-tile .text-tile>:first-child{-webkit-line-clamp:4;font-size:12px;line-height:1.3}.sample-tile .text-tile>:last-child{font-size:11px}}.landing [id]{scroll-margin-top:64px}