/* Motion catalog demo styles (text, transitions, enter, exit). */
.mstage .mtag{position:absolute;left:0;right:0;top:80px;text-align:center;font:600 30px 'JetBrains Mono',monospace;color:var(--mute);z-index:30}
.land.mstage .mtag{top:40px;font-size:26px}
.mtx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 70px;z-index:10}
.mln{line-height:1.12;letter-spacing:-.025em;font-weight:500}
.mw{display:inline-block}
.mtx .em,.mtx b{font-weight:800}
.mtx .ac{color:var(--ac)}
.m-wd{display:inline-block;white-space:nowrap}
.m-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em}
.m-stroke{-webkit-text-stroke:3px var(--ink)}
.m-hz{position:relative;display:inline-block;font-weight:800}
.m-hz-t,.m-hz-b{position:absolute;left:0;top:0;white-space:nowrap}
.m-hz-t{clip-path:inset(0 0 50% 0)}.m-hz-b{clip-path:inset(50% 0 0 0)}
.m-swapw{display:inline-flex;flex-direction:column;height:1.15em;overflow:hidden;vertical-align:bottom}
.m-swapw span{display:block;height:1.15em;line-height:1.15em;color:var(--ac);font-weight:800}
.m-roll{display:flex;justify-content:center;font-weight:800;font-variant-numeric:tabular-nums}
.m-rc{display:inline-block;height:1.05em;line-height:1.05em;overflow:hidden}
.m-rcol{display:flex;flex-direction:column}
.m-rcol span{display:block;height:1.05em}
.m-st{position:relative}
.m-st::after{content:'';position:absolute;left:-.05em;right:-.05em;top:54%;height:.1em;background:#E5484D;transform:scaleX(0);transform-origin:0 50%;animation:m-grow .4s ease-out both;animation-delay:calc(var(--d) + .5s)}
.m-ul{position:relative}
.m-ul::after{content:'';position:absolute;left:0;right:0;bottom:-.04em;height:.1em;border-radius:.05em;background:var(--ac);transform:scaleX(0);transform-origin:0 50%;animation:m-grow .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d) + .45s)}
.m-mk{background:linear-gradient(var(--ac2),var(--ac2)) no-repeat 0 88%/0% 42%;padding:0 .05em}
.m-cb{padding:0 .14em;border-radius:.16em}
.m-ico{display:inline-flex;width:1.15em;height:1.15em;border-radius:.28em;background:var(--ac);color:#fff;align-items:center;justify-content:center;vertical-align:-.18em}
.m-ico svg{width:.7em;height:.7em}
.m-blk{position:relative;display:inline-block}
.m-blk::after{content:'';position:absolute;inset:-.02em -.08em;background:var(--ac);animation:m-box 1s cubic-bezier(.7,0,.2,1) both;animation-delay:var(--d)}
/* transitions */
.xwrap{position:absolute;inset:0;overflow:hidden;z-index:10}
.xl{position:absolute;inset:0}
.xs{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:60px}
.xs-a{background:#F2F2EF;color:#111113}
.xs-b{background:var(--ac);color:#fff}
.xo{position:absolute;inset:0;z-index:5}
.xo-mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(10,1fr)}
.land .xo-mosaic{grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(6,1fr)}
.xo-mosaic i{display:block}
.m-click{position:absolute;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;border:8px solid #111113;animation:rip .6s ease-out both}
/* objects */
.mobj{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10}
.mo-card{width:800px;background:#fff;color:#111113;border-radius:32px;padding:40px;box-shadow:var(--sh)}
.mo-h{display:flex;align-items:center;gap:22px}
.mo-h b{display:block;font-size:46px;letter-spacing:-.02em}
.mo-h small{display:block;font-size:32px;color:#8B8B86}
.mo-sq{width:100px;height:100px;border-radius:24px;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.mo-sq svg{width:44px;height:44px}
.mo-bar{display:block;height:24px;border-radius:10px;background:#ECECE8;margin-top:26px}
.mo-btn{display:inline-block;margin-top:38px;background:#111113;color:#fff;font-weight:700;font-size:34px;padding:20px 30px;border-radius:18px}
.mo-kpi{display:flex;flex-direction:column;gap:8px;width:560px}
.mo-kpi small{font-size:28px;color:#8B8B86}
.mo-kpi b{font-size:100px;letter-spacing:-.05em;line-height:1}
.mo-up{align-self:flex-start;background:#DDF3EA;color:#0B7A58;font-weight:700;font-size:26px;padding:6px 18px;border-radius:999px}
.mo-pip svg{width:300px;height:300px;filter:drop-shadow(0 30px 30px rgba(17,17,19,.22))}
.mo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.mo-tile{width:180px;height:180px;border-radius:48px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--sh2)}
.mo-tile svg{width:84px;height:84px}
.mo-draw{width:780px;overflow:visible}
.mo-draw path{fill:none;stroke:var(--ac);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.mo-draw path.fillable{fill:var(--ac2);fill-opacity:0}
.mo-target{position:absolute;right:13%;top:17%;width:150px;height:150px;border-radius:40px;background:#111113;color:#fff;display:flex;align-items:center;justify-content:center;z-index:12}
.mo-target svg{width:72px;height:72px}