/* GENERATED by scripts/site/build.mjs from scripts/site/mcp.mjs - the /mcp landing, on top of /legal/legal.css and /site/site.css. */
@font-face { font-family: 'Google Sans fallback'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); size-adjust: 101.5%; ascent-override: 95.2%; descent-override: 28.2%; line-gap-override: 0%; }
body { font-family: var(--ui-face, Inter), 'Google Sans fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; }
:root { --cv: #f5f5f5; --win: #ffffff; --win-line: rgba(0, 0, 0, 0.08); --glow: rgba(219, 77, 40, 0.14); --shadow: 0 0 0.5px rgba(0, 0, 0, 0.15), 0 5px 12px rgba(0, 0, 0, 0.13), 0 1px 3px rgba(0, 0, 0, 0.1), 0 24px 64px -16px rgba(0, 0, 0, 0.18); }
:root[data-theme='dark'] { --cv: #1e1e1e; --win: #2c2c2c; --win-line: rgba(255, 255, 255, 0.08); --glow: rgba(219, 77, 40, 0.22); --shadow: 0 0 0 1px #444444, 0 24px 64px -16px rgba(0, 0, 0, 0.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --cv: #1e1e1e; --win: #2c2c2c; --win-line: rgba(255, 255, 255, 0.08); --glow: rgba(219, 77, 40, 0.22); --shadow: 0 0 0 1px #444444, 0 24px 64px -16px rgba(0, 0, 0, 0.6); } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mcp { max-width: 1152px; padding: 0 16px 64px; }
.mcp h2 { margin: 0 0 8px; padding: 0; border: 0; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.3px; }
.mcp h3 { margin: 0 0 4px; font-size: 13px; line-height: 22px; font-weight: 550; }
.mcp .head { max-width: 640px; margin: 0 0 24px; }
.mcp .head p { margin: 0; color: var(--ink-3); }
.mcp .band { margin: 0; padding: 80px 0 0; scroll-margin-top: 16px; }
.mcp .ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.mcp code { font: 450 11px/16px ui-monospace, 'SF Mono', Menlo, monospace; background: var(--paper-2); border-radius: 2px; padding: 1px 4px; overflow-wrap: anywhere; }
.mcp .more { display: inline-flex; margin-top: 12px; font-size: 11px; line-height: 16px; font-weight: 550; text-decoration: none; }
.mcp .more:hover { text-decoration: underline; }

/* hero */
.mcp-hero { position: relative; padding: 72px 0 0; text-align: center; }
.mcp-hero::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 0; width: min(960px, 100%); height: 420px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; }
.eyebrow { display: inline-flex; align-items: center; height: 24px; margin: 0 0 16px; padding: 0 10px; border-radius: 13px; background: var(--brand-tint); color: var(--brand-ink); font-size: 11px; line-height: 16px; font-weight: 550; }
.mcp-hero h1 { max-width: 760px; margin: 0 auto 16px; font-size: 56px; line-height: 64px; font-weight: 650; letter-spacing: -1.6px; text-wrap: balance; }
.mcp-hero .lede { max-width: 560px; margin: 0 auto 24px; color: var(--ink-3); font-size: 15px; line-height: 24px; text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.url-box { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 24px auto 0; max-width: 420px; }
.url-box label { color: var(--ink-3); font-size: 11px; line-height: 16px; }
.url-row { display: flex; width: 100%; height: 32px; padding: 2px; border-radius: 5px; background: var(--paper-2); }
.url-in { flex: 1; min-width: 0; height: 28px; padding: 0 8px; border: 0; background: transparent; color: var(--ink); font: 450 13px/22px ui-monospace, 'SF Mono', Menlo, monospace; }
.url-in:focus { outline: none; }
.url-row:focus-within { box-shadow: inset 0 0 0 1px var(--brand); }
.btn.copy { gap: 4px; height: 28px; border: 0; cursor: pointer; font-family: inherit; }
.btn.copy .ic { width: 14px; height: 14px; }
.btn:focus-visible, .chip:focus-visible, .tab:focus-visible, summary:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 2px; }

/* the loop: a chat beside an editor */
.demo { position: relative; display: grid; grid-template-columns: 34fr 66fr; gap: 12px; margin: 56px auto 0; padding: 12px; aspect-ratio: 16 / 9; max-width: 1120px; border-radius: 13px; background: var(--cv); box-shadow: var(--shadow); container-type: inline-size; overflow: hidden; }
.demo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.demo.has-video > :not(video) { visibility: hidden; }
.chat, .editor { position: relative; display: flex; flex-direction: column; min-height: 0; border-radius: 5px; background: var(--win); box-shadow: 0 0 0 1px var(--win-line); overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 0.6cqw; flex: none; height: 3.6cqw; padding: 0 1.2cqw; border-bottom: 1px solid var(--win-line); font-size: 1.1cqw; line-height: 1.6cqw; }
.win-bar b { font-weight: 550; white-space: nowrap; }
.win-bar .grow { flex: 1; }
.dot { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #d97757; }
.pal { width: 1.8cqw; height: 1.8cqw; }
.av { display: grid; place-items: center; width: 2cqw; height: 2cqw; border-radius: 50%; background: #d97757; color: #ffffff; font-size: 1cqw; font-weight: 600; }
.exp { padding: 0.3cqw 0.8cqw; border-radius: 0.45cqw; background: var(--brand); color: #ffffff; font-weight: 550; }
.chat-in { flex: 1; display: flex; flex-direction: column; gap: 0.9cqw; padding: 1.4cqw 1.2cqw; overflow: hidden; }
.msg { margin: 0; max-width: 88%; padding: 0.8cqw 1.1cqw; border-radius: 1.1cqw; font-size: 1.2cqw; line-height: 1.8cqw; }
.msg.you { align-self: flex-end; background: var(--paper-2); border-bottom-right-radius: 0.3cqw; }
.msg.ai { align-self: flex-start; padding-left: 0; padding-right: 0; color: var(--ink); }
.tool { display: inline-flex; margin: 0 0.6cqw 0 0; padding: 0 0.6cqw; border-radius: 0.4cqw; background: var(--brand-tint); color: var(--brand-ink); font: 500 1cqw/1.8cqw ui-monospace, 'SF Mono', Menlo, monospace; }
.field { flex: none; margin: 0 1.2cqw 1.2cqw; padding: 0.8cqw 1.1cqw; border-radius: 1.1cqw; box-shadow: 0 0 0 1px var(--line); color: var(--ink-3); font-size: 1.1cqw; line-height: 1.6cqw; }
.ed-body { flex: 1; display: grid; grid-template-columns: 22% 1fr; min-height: 0; }
.side { padding: 1.2cqw 1cqw; border-right: 1px solid var(--win-line); font-size: 1.05cqw; line-height: 1.6cqw; }
.side b { display: block; margin: 0 0 0.6cqw; font-weight: 550; }
.layers { margin: 0; padding: 0; list-style: none; }
.layers li { padding: 0.35cqw 0.5cqw; border-radius: 0.4cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layers li:last-child { margin-top: 0.4cqw; }
.canvas { position: relative; display: grid; place-items: center; min-width: 0; background: var(--cv); background-image: radial-gradient(var(--win-line) 1px, transparent 1px); background-size: 1.6cqw 1.6cqw; }
.stage { position: relative; width: 100%; max-height: 100%; aspect-ratio: 4 / 3; }
.stage-in { position: absolute; inset: 0; }
.board { position: absolute; top: 10%; }
.board .label { position: absolute; left: 0; bottom: 100%; margin-bottom: 0.5cqw; color: var(--ink-3); font-size: 0.95cqw; line-height: 1.4cqw; white-space: nowrap; }
.paper { position: relative; overflow: hidden; border-radius: 0.2cqw; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.post { left: 5%; width: 46%; }
.post .paper { aspect-ratio: 4 / 5; background: #f0e8dc; }
.story { left: 57%; width: 32.5%; }
.story .paper { aspect-ratio: 9 / 16; }
.paper img { position: absolute; inset: 0; width: 100%; height: 100%; }
.post .l-photo { clip-path: inset(43% 0 0 60%); }
.post .l-head { clip-path: inset(17% 6% 53% 4%); }
.post .l-btn { clip-path: inset(66% 52% 9% 4%); }
.post .l-meta { clip-path: polygon(0 0, 100% 0, 100% 17%, 0 17%, 0 0, 0 91%, 60% 91%, 60% 100%, 0 100%); }
.story .paper img { position: static; display: block; }
.cursor { position: absolute; inset: 0; pointer-events: none; transform: translate(84%, 88%); }
.cursor svg { position: absolute; left: -0.2cqw; top: -0.2cqw; width: 1.9cqw; height: 1.9cqw; fill: #d97757; stroke: #ffffff; stroke-width: 1.2; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.cursor .tag { position: absolute; left: 1.4cqw; top: 1.4cqw; padding: 0.15cqw 0.6cqw; border-radius: 0.4cqw; background: #d97757; color: #ffffff; font-size: 1cqw; line-height: 1.5cqw; font-weight: 550; white-space: nowrap; }
.says { position: absolute; left: 1.4cqw; top: 3.3cqw; }
.says span { position: absolute; left: 0; top: 0; padding: 0.4cqw 0.8cqw; border-radius: 0.3cqw 1cqw 1cqw 1cqw; background: #1e1e1e; color: #ffffff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 2px 5px rgba(0, 0, 0, 0.15); font-size: 1cqw; line-height: 1.4cqw; white-space: nowrap; opacity: 0; transform-origin: 0 0; }
.ring { position: absolute; left: -1.6cqw; top: -1.6cqw; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; border: 2px solid #d97757; opacity: 0; }

/* how it works */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.how li { position: relative; padding: 20px; border-radius: 13px; background: var(--paper-2); }
.how p { margin: 0; color: var(--ink-3); }
.how-ic { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 0 16px; border-radius: 5px; background: var(--paper); color: var(--brand-ink); box-shadow: 0 0 0 1px var(--line); }
.how .ic.big { width: 24px; height: 24px; }
.how .num { position: absolute; right: 20px; top: 20px; color: var(--ink-3); font-size: 11px; line-height: 16px; font-weight: 550; }

/* what you can ask */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; border: 0; border-radius: 16px; background: var(--paper-2); color: var(--ink); font: 450 13px/20px inherit; font-family: inherit; text-align: left; cursor: copy; transition: background-color 0.15s, color 0.15s; }
.chip:hover { background: var(--brand-tint); color: var(--brand-ink); }
.chip.done { background: var(--brand); color: #ffffff; }

/* what you get */
.get { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.get li { min-width: 0; }
.get p { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 20px; }
.get .pic { position: relative; display: block; margin: 0 0 12px; aspect-ratio: 300 / 190; border-radius: 5px; overflow: hidden; background: var(--paper-2); box-shadow: 0 0 0 1px var(--line); }
.get .pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.get .pic img.top { object-position: center 18%; }
.get .pair { display: flex; justify-content: center; align-items: center; gap: 8px; height: 100%; padding: 12px; background: #e9e1d5; }
.get .pair img { width: auto; height: 100%; object-fit: contain; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.get .fmts { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; height: 100%; padding: 16px; }
.get .fmts span { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 5px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); font-size: 11px; line-height: 16px; font-weight: 550; }
.get .fmts span:first-child { background: var(--brand); color: #ffffff; box-shadow: none; }

/* connect */
.connect { padding: 24px; border-radius: 13px; box-shadow: 0 0 0 1px var(--line); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; }
.tab { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 5px; color: var(--ink-3); font-size: 13px; line-height: 22px; font-weight: 550; text-decoration: none; }
.tab:hover { background: var(--paper-2); color: var(--ink); }
.tab[aria-selected='true'] { background: var(--brand-tint); color: var(--brand-ink); }
.panel { margin: 0 0 24px; }
.js .panel[hidden] { display: none; }
.js .panel h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 44px 16px 16px; border-radius: 5px; background: var(--paper-2); font-size: 13px; line-height: 20px; counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #ffffff; font-size: 11px; line-height: 16px; font-weight: 600; }
.steps b { font-size: 13px; line-height: 22px; font-weight: 550; }
.steps span { color: var(--ink-3); overflow-wrap: anywhere; }
.steps span b { color: var(--ink); font-weight: 550; }
.connect .url-box { align-items: flex-start; margin: 0; }
.connect .note { margin: 12px 0 0; color: var(--ink-3); font-size: 11px; line-height: 16px; }

/* trust */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-radius: 13px; background: var(--paper-2); }
.trust li { display: grid; grid-template-columns: 16px 1fr; gap: 4px 8px; padding: 20px; font-size: 13px; line-height: 20px; }
.trust li + li { box-shadow: -1px 0 0 var(--line); }
.trust .ic { color: var(--brand-ink); margin-top: 3px; }
.trust b { grid-column: 2; }
.trust b { font-size: 13px; line-height: 22px; font-weight: 550; }
.trust span { grid-column: 2; color: var(--ink-3); }

/* questions */
.faq { max-width: 760px; }
.faq h2 { margin-bottom: 16px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { padding: 12px 0; font-weight: 550; cursor: pointer; }
.faq details p { margin: 0 0 16px; color: var(--ink-3); }

/* the end */
.mcp-bottom { margin: 80px 0 0; padding: 56px 24px; border-radius: 13px; background: var(--paper-2); text-align: center; }
.mcp-bottom h2 { margin: 0 0 8px; text-wrap: balance; }
.mcp-bottom p { margin: 0 auto 24px; color: var(--ink-3); }
.mcp ~ .site-foot { max-width: 1120px; }

@media (max-width: 1080px) {
  .get { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust li:nth-child(3) { box-shadow: 0 -1px 0 var(--line); }
  .trust li:nth-child(4) { box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }
}
@media (max-width: 760px) {
  .mcp-hero { padding-top: 40px; }
  .mcp-hero h1 { font-size: 36px; line-height: 44px; letter-spacing: -1px; }
  .mcp-hero .lede { font-size: 13px; line-height: 22px; }
  .mcp .band { padding-top: 56px; }
  .mcp h2 { font-size: 20px; line-height: 28px; }
  .demo { grid-template-columns: minmax(0, 1fr); grid-template-rows: 34fr 66fr; aspect-ratio: 3 / 4; margin-top: 32px; padding: 8px; gap: 8px; border-radius: 5px; }
  .demo .win-bar { height: 8cqw; font-size: 3cqw; line-height: 4cqw; gap: 1.5cqw; padding: 0 3cqw; }
  .demo .dot { width: 2.4cqw; height: 2.4cqw; }
  .demo .pal { width: 4.4cqw; height: 4.4cqw; }
  .demo .av { width: 4.8cqw; height: 4.8cqw; font-size: 2.4cqw; }
  .demo .exp { padding: 0.6cqw 1.8cqw; border-radius: 1cqw; }
  .chat-in { gap: 2cqw; padding: 2.4cqw 3cqw; }
  .msg { padding: 1.6cqw 2.6cqw; border-radius: 2.6cqw; font-size: 3cqw; line-height: 4.4cqw; }
  .msg.you { border-bottom-right-radius: 0.8cqw; }
  .tool { font-size: 2.4cqw; line-height: 4.4cqw; padding: 0 1.4cqw; border-radius: 1cqw; margin-right: 1.4cqw; }
  .msg.a2, .msg.a1, .field { display: none; }
  .ed-body { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .canvas { background-size: 4cqw 4cqw; }
  .board .label { font-size: 2.4cqw; line-height: 3.4cqw; margin-bottom: 1.2cqw; }
  .cursor svg { width: 4.6cqw; height: 4.6cqw; }
  .cursor .tag { left: 3.4cqw; top: 3.4cqw; padding: 0.3cqw 1.4cqw; border-radius: 1cqw; font-size: 2.4cqw; line-height: 3.6cqw; }
  .says { left: 3.4cqw; top: 8cqw; }
  .says span { padding: 1cqw 2cqw; border-radius: 0.8cqw 2.4cqw 2.4cqw 2.4cqw; font-size: 2.4cqw; line-height: 3.4cqw; }
  .ring { left: -4cqw; top: -4cqw; width: 8cqw; height: 8cqw; }
  .how { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .get { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 12px; }
  .connect { padding: 16px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .trust { grid-template-columns: minmax(0, 1fr); }
  .trust li + li, .trust li:nth-child(3), .trust li:nth-child(4) { box-shadow: 0 -1px 0 var(--line); }
  .mcp-bottom { margin-top: 56px; padding: 32px 16px; }
}

/* the animated icons of «How it works» */
@keyframes mcp-plug { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.5px); } }
@keyframes mcp-dot { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
@keyframes mcp-move { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-2px, -2px); } }
.mcp-on .how .i0 path { animation: mcp-plug 2.4s ease-in-out infinite; }
.mcp-on .how .i1 circle { animation: mcp-dot 1.4s ease-in-out infinite; }
.mcp-on .how .i1 .t2 { animation-delay: 0.2s; }
.mcp-on .how .i1 .t3 { animation-delay: 0.4s; }
.mcp-on .how .i2 .mv { animation: mcp-move 2s ease-in-out infinite; }
.how .i1 circle { fill: currentColor; stroke: none; }

/* the hero's loop: 16 s; mcp.js sets .mcp-on on <html> once the page has loaded */
@media (prefers-reduced-motion: no-preference) {
@keyframes mcp-fade { 0% { opacity: 0; } 2% { opacity: 1; } 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes mcp-p1 { 0%, 1.88% { opacity: 0; transform: translateY(4px); } 3.75%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-a1 { 0%, 16.25% { opacity: 0; transform: translateY(4px); } 18.13%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-a2 { 0%, 51.88% { opacity: 0; transform: translateY(4px); } 53.75%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-p2 { 0%, 57.5% { opacity: 0; transform: translateY(4px); } 59.38%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-a3 { 0%, 71.88% { opacity: 0; transform: translateY(4px); } 73.75%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-bg { 0%, 20% { opacity: 0; transform: scale(0.96); } 22.5%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-photo { 0%, 26.88% { opacity: 0; transform: translateY(6%); } 29.06%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-head { 0%, 32.5% { opacity: 0; transform: scale(1.04); } 34.69%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-btn { 0%, 38.13% { opacity: 0; transform: translateY(4%); } 40.31%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-meta { 0%, 40% { opacity: 0; transform: none; } 42.19%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-story { 0%, 46.88% { opacity: 0; transform: scale(0.94); } 49.69%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-riso { 0%, 67.5% { opacity: 0; transform: none; } 71.25%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-l0 { 0%, 20% { opacity: 0; transform: translateX(-4px); } 21.56%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-l1 { 0%, 26.88% { opacity: 0; transform: translateX(-4px); } 28.44%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-l2 { 0%, 32.5% { opacity: 0; transform: translateX(-4px); } 34.06%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-l3 { 0%, 38.13% { opacity: 0; transform: translateX(-4px); } 39.69%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-l4 { 0%, 40% { opacity: 0; transform: translateX(-4px); } 41.56%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-l5 { 0%, 46.88% { opacity: 0; transform: translateX(-4px); } 48.44%, 95% { opacity: 1; transform: none; } 96.88%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-s0 { 0%, 21.25% { opacity: 0; transform: scale(0.9); } 22.5%, 28.75% { opacity: 1; transform: none; } 30.62%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-s1 { 0%, 29.38% { opacity: 0; transform: scale(0.9); } 30.63%, 34.38% { opacity: 1; transform: none; } 36.25%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-s2 { 0%, 35% { opacity: 0; transform: scale(0.9); } 36.25%, 40.63% { opacity: 1; transform: none; } 42.5%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-s3 { 0%, 41.88% { opacity: 0; transform: scale(0.9); } 43.13%, 49.38% { opacity: 1; transform: none; } 51.25%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-s4 { 0%, 62.5% { opacity: 0; transform: scale(0.9); } 63.75%, 72.5% { opacity: 1; transform: none; } 74.38%, 100% { opacity: 0; transform: none; } }
@keyframes mcp-cursor { 0% { transform: translate(84%, 88%); } 20.63% { transform: translate(84%, 88%); } 25.62% { transform: translate(42%, 64%); } 28.75% { transform: translate(42%, 64%); } 31.25% { transform: translate(24%, 33%); } 34.38% { transform: translate(24%, 33%); } 36.88% { transform: translate(17%, 75%); } 40.63% { transform: translate(17%, 75%); } 45% { transform: translate(73%, 48%); } 49.38% { transform: translate(73%, 48%); } 53.75% { transform: translate(84%, 88%); } 62.5% { transform: translate(84%, 88%); } 66.25% { transform: translate(28%, 48%); } 72.5% { transform: translate(28%, 48%); } 77.5% { transform: translate(84%, 88%); } 100% { transform: translate(84%, 88%); } }
@keyframes mcp-ring { 26.56% { opacity: 0; transform: scale(0.3); } 26.88% { opacity: 0.9; transform: scale(0.3); } 29.69% { opacity: 0; transform: scale(1.4); } 32.19% { opacity: 0; transform: scale(0.3); } 32.5% { opacity: 0.9; transform: scale(0.3); } 35.31% { opacity: 0; transform: scale(1.4); } 37.81% { opacity: 0; transform: scale(0.3); } 38.13% { opacity: 0.9; transform: scale(0.3); } 40.94% { opacity: 0; transform: scale(1.4); } 46.56% { opacity: 0; transform: scale(0.3); } 46.88% { opacity: 0.9; transform: scale(0.3); } 49.69% { opacity: 0; transform: scale(1.4); } 67.19% { opacity: 0; transform: scale(0.3); } 67.5% { opacity: 0.9; transform: scale(0.3); } 70.31% { opacity: 0; transform: scale(1.4); } 0%, 100% { opacity: 0; } }
@keyframes mcp-p1w0 { 0%, 3.75% { opacity: 0; } 4.06%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p1 .typed span:nth-child(1) { animation-name: mcp-p1w0; }
@keyframes mcp-p1w1 { 0%, 4.38% { opacity: 0; } 4.69%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p1 .typed span:nth-child(2) { animation-name: mcp-p1w1; }
@keyframes mcp-p1w2 { 0%, 5% { opacity: 0; } 5.31%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p1 .typed span:nth-child(3) { animation-name: mcp-p1w2; }
@keyframes mcp-p1w3 { 0%, 5.63% { opacity: 0; } 5.94%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p1 .typed span:nth-child(4) { animation-name: mcp-p1w3; }
@keyframes mcp-p1w4 { 0%, 6.25% { opacity: 0; } 6.56%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p1 .typed span:nth-child(5) { animation-name: mcp-p1w4; }
@keyframes mcp-p1w5 { 0%, 6.88% { opacity: 0; } 7.19%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p1 .typed span:nth-child(6) { animation-name: mcp-p1w5; }
@keyframes mcp-p1w6 { 0%, 7.5% { opacity: 0; } 7.81%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p1 .typed span:nth-child(7) { animation-name: mcp-p1w6; }
@keyframes mcp-p1w7 { 0%, 8.13% { opacity: 0; } 8.44%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p1 .typed span:nth-child(8) { animation-name: mcp-p1w7; }
@keyframes mcp-p1w8 { 0%, 8.75% { opacity: 0; } 9.06%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p1 .typed span:nth-child(9) { animation-name: mcp-p1w8; }
@keyframes mcp-p1w9 { 0%, 9.38% { opacity: 0; } 9.69%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p1 .typed span:nth-child(10) { animation-name: mcp-p1w9; }
@keyframes mcp-p1w10 { 0%, 10% { opacity: 0; } 10.31%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p1 .typed span:nth-child(11) { animation-name: mcp-p1w10; }
@keyframes mcp-p1w11 { 0%, 10.63% { opacity: 0; } 10.94%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p1 .typed span:nth-child(12) { animation-name: mcp-p1w11; }
@keyframes mcp-p1w12 { 0%, 11.25% { opacity: 0; } 11.56%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p1 .typed span:nth-child(13) { animation-name: mcp-p1w12; }
@keyframes mcp-p2w0 { 0%, 58.75% { opacity: 0; } 59.06%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p2 .typed span:nth-child(1) { animation-name: mcp-p2w0; }
@keyframes mcp-p2w1 { 0%, 59.75% { opacity: 0; } 60.06%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p2 .typed span:nth-child(2) { animation-name: mcp-p2w1; }
@keyframes mcp-p2w2 { 0%, 60.75% { opacity: 0; } 61.06%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p2 .typed span:nth-child(3) { animation-name: mcp-p2w2; }
@keyframes mcp-p2w3 { 0%, 61.75% { opacity: 0; } 62.06%, 95% { opacity: 1; } 96.88%, 100% { opacity: 0; } }
.mcp-on .demo .p2 .typed span:nth-child(4) { animation-name: mcp-p2w3; }
.mcp-on .demo .stage-in, .chat-in { animation: mcp-fade 16s linear -13s infinite both; }
.mcp-on .demo .p1 { animation: mcp-p1 16s linear -13s infinite both; }
.mcp-on .demo .a1 { animation: mcp-a1 16s linear -13s infinite both; }
.mcp-on .demo .a2 { animation: mcp-a2 16s linear -13s infinite both; }
.mcp-on .demo .p2 { animation: mcp-p2 16s linear -13s infinite both; }
.mcp-on .demo .a3 { animation: mcp-a3 16s linear -13s infinite both; }
.mcp-on .demo .typed span { animation: none 16s linear -13s infinite both; }
.mcp-on .demo .post { animation: mcp-bg 16s linear -13s infinite both; }
.mcp-on .demo .post .l-photo { animation: mcp-photo 16s linear -13s infinite both; }
.mcp-on .demo .post .l-head { animation: mcp-head 16s linear -13s infinite both; }
.mcp-on .demo .post .l-btn { animation: mcp-btn 16s linear -13s infinite both; }
.mcp-on .demo .post .l-meta { animation: mcp-meta 16s linear -13s infinite both; }
.mcp-on .demo .post .l-riso { animation: mcp-riso 16s linear -13s infinite both; }
.mcp-on .demo .story { animation: mcp-story 16s linear -13s infinite both; }
.mcp-on .demo .layers li:nth-child(1) { animation: mcp-l0 16s linear -13s infinite both; }
.mcp-on .demo .layers li:nth-child(2) { animation: mcp-l1 16s linear -13s infinite both; }
.mcp-on .demo .layers li:nth-child(3) { animation: mcp-l2 16s linear -13s infinite both; }
.mcp-on .demo .layers li:nth-child(4) { animation: mcp-l3 16s linear -13s infinite both; }
.mcp-on .demo .layers li:nth-child(5) { animation: mcp-l4 16s linear -13s infinite both; }
.mcp-on .demo .layers li:nth-child(6) { animation: mcp-l5 16s linear -13s infinite both; }
.mcp-on .demo .says span:nth-child(1) { animation: mcp-s0 16s linear -13s infinite both; }
.mcp-on .demo .says span:nth-child(2) { animation: mcp-s1 16s linear -13s infinite both; }
.mcp-on .demo .says span:nth-child(3) { animation: mcp-s2 16s linear -13s infinite both; }
.mcp-on .demo .says span:nth-child(4) { animation: mcp-s3 16s linear -13s infinite both; }
.mcp-on .demo .says span:nth-child(5) { animation: mcp-s4 16s linear -13s infinite both; }
.mcp-on .demo .cursor { animation: mcp-cursor 16s linear -13s infinite both; }
.mcp-on .demo .ring { animation: mcp-ring 16s linear -13s infinite both; }
}
@media print { .demo, .tabs { display: none; } }