@layer mkt-page{.mkt-examples-hero{isolation:isolate;border-bottom:1px solid rgb(var(--glow) / .14);background:radial-gradient(42rem 24rem at 74% 24%, rgb(var(--glow) / .13), transparent 66%), linear-gradient(180deg, var(--accent-soft), var(--paper) 92%);position:relative;overflow:hidden}.mkt-examples-hero:before{content:"";z-index:-1;opacity:.42;background-image:radial-gradient(circle at 1px 1px,#1836781a 1px,#0000 0);background-size:28px 28px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#0000,#000 42% 92%);mask-image:linear-gradient(90deg,#0000,#000 42% 92%)}.mkt-examples-hero-inner{align-items:center;gap:3rem;min-height:36rem;padding-block:3.5rem 4rem;display:grid}.mkt-examples-hero-copy{max-width:35rem}.mkt-examples-hero-stage{background:radial-gradient(circle at 78% 14%, #5c94ff7a, transparent 34%), radial-gradient(circle at 1px 1px, #ffffff21 1px, transparent 0) 0 0 / 25px 25px, linear-gradient(145deg, var(--night-2), var(--night) 74%);border:1px solid #ffffff85;border-radius:1.6rem;min-width:0;height:27rem;position:relative;box-shadow:inset 0 1px #fff3,0 38px 78px -44px #020e2acc}.mkt-examples-hero-browser{background:var(--paper);transition:transform .52s var(--ease), box-shadow .52s var(--ease);border:.34rem solid #fffffff0;border-radius:1.15rem;position:absolute;inset:2rem 4.5rem 1.5rem 1.5rem;overflow:hidden;transform:rotate(-1.1deg);box-shadow:0 32px 72px -28px #000412d1}.mkt-examples-hero-stage:hover .mkt-examples-hero-browser{transform:rotate(-.25deg)translateY(-4px);box-shadow:0 38px 78px -28px #000412e6}.mkt-examples-hero-phone{border:.42rem solid var(--ink);background:var(--paper);width:11.5rem;height:23rem;transition:transform .52s var(--ease);border-radius:1.7rem;position:absolute;bottom:-1.4rem;right:1rem;overflow:hidden;transform:rotate(2.3deg);box-shadow:0 32px 70px -24px #000412e6}.mkt-examples-hero-stage:hover .mkt-examples-hero-phone{transform:rotate(.7deg)translateY(-7px)}@media (min-width:900px){.mkt-examples-hero-inner{grid-template-columns:minmax(0,.92fr) minmax(29rem,1.08fr)}}@media (max-width:899px){.mkt-examples-hero-inner{padding-block:3.25rem}.mkt-examples-hero-stage{height:23rem}}@media (max-width:639px){.mkt-examples-hero-inner{gap:2.25rem;min-height:0;padding-block:2.5rem 3rem}.mkt-examples-hero-stage{border-radius:1.25rem;height:18.5rem}.mkt-examples-hero-browser{border-width:.26rem;border-radius:.9rem;inset:1rem 2.7rem 1rem .65rem}.mkt-examples-hero-phone{border-width:.3rem;border-radius:1.15rem;width:7rem;height:14.2rem;bottom:-.8rem;right:.2rem}}.mkt-filter-rail{border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);scrollbar-width:none;background:#ffffffc2;border-radius:999px;gap:.5rem;padding:.5rem;display:flex;overflow-x:auto;box-shadow:0 18px 38px -34px #11131899}.mkt-filter-rail::-webkit-scrollbar{display:none}@media (min-width:768px){.mkt-filter-rail{border-radius:var(--r-lg);flex-wrap:wrap;justify-content:flex-start;width:100%;max-width:none;overflow:visible}}.mkt-examples-toolbar{border-bottom:1px solid var(--line);align-items:end;gap:1rem;padding-bottom:1.25rem;display:grid}.mkt-examples-toolbar-copy{min-width:11rem}@media (min-width:1024px){.mkt-examples-toolbar{grid-template-columns:13rem minmax(0,1fr);gap:2rem}}@media (max-width:767px){.mkt-filter-rail{border-radius:var(--r-md);margin-inline:-.25rem;scroll-padding-inline:.5rem}.mkt-filter-rail:after{content:"";flex:0 0 .1rem}}.mkt-example-grid{grid-auto-flow:dense}.mkt-example-grid-item{animation:mkt-grid-in .52s var(--ease) calc(var(--mkt-grid-i,0) * 55ms) both}}