1import{r as D,j as e}from"./react-B8xo0EiF.js";import{m as H}from"./melaya_logo-BRRqZeAA.js";import{i as G,l as X}from"./linkedin-BHzfKbZ6.js";import{s as Y,g as Q}from"./slack-CpUQsNQh.js";import{w as Z}from"./whatsapp-tgsEWt7k.js";import{c as K,o as U,m as ee}from"./mistral-_fEvskVD.js";import{c as ie}from"./cursor-C9Vp5PzQ.js";import{P as te}from"./ProductPageFrame-D760DyLi.js";import{P as re,a as oe,M as n,b as ae}from"./ProductCloser-ycRFGEZw.js";import{P as pe}from"./ProductFaq-CruaupSh.js";import{u as le}from"./use-mobile-D09hle5e.js";import{C as u}from"./CursorEyebrow-CncSseb1.js";import{n as ne}from"./PromoBanner-DPO8UJrc.js";import{b as se,c as de,d as ce,P as q}from"./seoConfig-DqhM0Dpd.js";import{u as me}from"./ThemeContext-Bxm4BGLC.js";import{e as ge}from"./x-VD8fYXZL.js";import{u as W}from"./ScrollContext-C9GW0cBz.js";import{u as l}from"./useTranslation-Dw1aOzWh.js";import{c as xe}from"./chunk-BV7QT456-MDYouwzX.js";import{L as T}from"./layout-grid-DBTUR0MG.js";import{S as V}from"./shield-check-CUIQnWVW.js";import{E as M}from"./eye-Ck0Ly5th.js";import{C as O}from"./cpu-BRoD69ue.js";import{u as I,m,a as R,b as x}from"./motion-BR_tK3Qn.js";import{c as L}from"./createLucideIcon-zn7CGCyS.js";import{Z as he}from"./zap-TefOf4d2.js";import{R as ve}from"./rotate-cw-CyLitaj9.js";import{C}from"./check-C2yWEyXB.js";import{D as _}from"./download-QuyJuxYZ.js";import{Q as be}from"./qr-code-1SikrOSn.js";import{S as ue}from"./shield-alert-x7LwfJc4.js";import{P as fe}from"./plug-zap-D5M5H92T.js";import{L as ye}from"./lock-keyhole-DzgnKP1h.js";import{S as we}from"./search-CZw67pSo.js";import{L as ke}from"./landmark-e8OhH8wG.js";import{H as je}from"./hand-D-tvO_oA.js";import"./animations-Bkglk-zA.js";import"./logo-discord-CbQGQTMh.js";import"./RouterPath-P-vjLTql.js";import"./index-X2xlMaga.js";
1import"./useMarketingScrollPause-DTX2-nE5.js";import"./Footer-DSAs3IA3.js";import"./arrow-right-kuVqEXYb.js";import"./file-text-CbmziVF1.js";import"./utils-DEwi5Emy.js";import"./neoCard-BfKOoBZT.js";/** 2 * @license lucide-react v0.484.0 - ISC 3 * 4 * This source code is licensed under the ISC license. 5 * See the LICENSE file in the root directory of this source tree. 6 */const Ce=[["circle",{cx:"16",cy:"4",r:"1",key:"1grugj"}],["path",{d:"m18 19 1-7-6 1",key:"r0i19z"}],["path",{d:"m5 8 3-3 5.5 3-2.36 3.5",key:"9ptxx2"}],["path",{d:"M4.24 14.5a5 5 0 0 0 6.88 6",key:"10kmtu"}],["path",{d:"M13.76 17.5a5 5 0 0 0-6.88-6",key:"2qq6rc"}]],De=L("accessibility",Ce);/** 7 * @license lucide-react v0.484.0 - ISC 8 * 9 * This source code is licensed under the ISC license. 10 * See the LICENSE file in the root directory of this source tree. 11 */const Ne=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["rect",{x:"9",y:"9",width:"6",height:"6",rx:"1",key:"1ssd4o"}]],ze=L("circle-stop",Ne);/** 12 * @license lucide-react v0.484.0 - ISC 13 * 14 * This source code is licensed under the ISC license. 15 * See the LICENSE file in the root directory of this source tree. 16 */const Ee=[["polyline",{points:"15 10 20 15 15 20",key:"1q7qjw"}],["path",{d:"M4 4v7a4 4 0 0 0 4 4h12",key:"z08zvw"}]],J=L("corner-down-right",Ee),Se="/blog/device-control/my-pipelines.webp",P="/blog/device-control/assistant.jpeg",a="#22D3EE",s="#8B5CF6",g="#10B981",A="#F59E0B",v={paddingLeft:"var(--mlp-section-gutter, clamp(20px, 4vw, 64px))",paddingRight:"var(--mlp-section-gutter, clamp(20px, 4vw, 64px))"},f={paddingTop:"var(--mlp-device-sec-pad-y, clamp(64px, 9vh, 96px))",paddingBottom:"var(--mlp-device-sec-pad-y, clamp(64px, 9vh, 96px))"};function N(i,t){const r=i(t,{returnObjects:!0});return Array.isArray(r)?r.map(String):[]}function z(i,t){const r=i(t,{returnObjects:!0});return Array.isArray(r)?r:[]}function h({children:i,className:t,y:r=46,blur:o=!0,as:p="div"}){const c=D.useRef(null),S=!!I(),{scrollYProgress:F}=W(c,{offset:["start 0.96","center 0.58"]}),y=R(F,{stiffness:90,damping:28,mass:.5}),w=x(y,[0,.9],[0,1]),b=x(y,[0,1],[r,0]),B=x(y,[0,.8],o?["blur(7px)","blur(0px)"]:["blur(0px)","blur(0px)"]),k=p==="li"?m.li:m.div;return e.jsx(k,{ref:c,className:t,style:S?void 0:{opacity:w,y:b,filter:B},children:i})}const Fe={LinkedIn:X,Gmail:Q,Slack:Y,WhatsApp:Z,Instagram:G},Be=[M,O,he,V],Pe=[_,be,ue,De,T];function d(){return e.jsx("div",{"aria-hidden":!0,style:{...v,paddingTop:0,paddingBottom:0},children:e.jsx("div",{style:{maxWidth:1440,margin:"0 auto",height:1,background:`linear-gradient(90deg, transparent 0%, ${a}40 22%, ${s}35 64%, transparent 100%)`}})})}function Ae(){const{t:i}=l("marketing"),t=z(i,"agenticDeviceControl.faq.items"),r=xe(),o=D.useCallback(()=>{ge("primary_cta",{metadata:{location:"device-control-page"}}),r("/register")},[r]);return e.jsxs(te,{children:[e.jsx(ne,{route:"deviceControl",jsonLd:[se(q.deviceControl.software),de(q.deviceControl.breadcrumb),ce(t)]}),e.jsx(re,{chapterIndex:3,chapterTotal:4,layoutVariant:"split",eyebrow:i("agenticDeviceControl.hero.eyebrow"),accent:a,accentSecondary:s,headline:[i("agenticDeviceControl.hero.headlineLine1"),i("agenticDeviceControl.hero.headlineLine2")],sub:i("agenticDeviceControl.hero.sub"),primaryCta:{label:i("agenticDeviceControl.hero.primaryCta"),onClick:o},signatureVariant:"custom",signatureSlot:e.jsx(Me,{}),ghostWordmark:{text:i("agenticDeviceControl.hero.ghostWordmark"),outlined:!0,position:"right"}}),e.jsx(oe,{ariaLabel:i("agenticDeviceControl.principles.ariaLabel"),accent:a,items:[{Icon:T,value:i("agenticDeviceControl.principles.items.0.value"),label:i("agenticDeviceControl.principles.items.0.label")},{Icon:V,value:i("agenticDeviceControl.principles.items.1.value"),label:i("agenticDeviceControl.principles.items.1.label")},{Icon:M,value:i("agenticDeviceControl.principles.items.2.value"),label:i("agenticDeviceControl.principles.items.2.label")},{Icon:O,value:i("agenticDeviceControl.principles.items.3.value"),label:i("agenticDeviceControl.principles.items.3.label")}]}),e.jsxs(n,{id:"what-it-is",index:0,intrinsicSize:"auto 640px",children:[e.jsx(d,{}),e.jsx(We,{})]}),e.jsxs(n,{id:"why-device-control",index:0,intrinsicSize:"auto 620px",children:[e.jsx(d,{}),e.jsx(Ve,{})]}),e.jsxs(n,{id:"bring-your-own-assistant",index:0,intrinsicSize:"auto 640px",children:[e.jsx(d,{}),e.jsx(qe,{})]}),e.jsxs(n,{id:"phone-as-tool",index:0,intrinsicSize:"auto 760px",children:[e.jsx(d,{}),e.jsx(Oe,{})]}),e.jsxs(n,{id:"app-allowlist",index:1,intrinsicSize:"auto 820px",children:[e.jsx(d,{}),e.jsx(_e,{})]}),e.jsxs(n,{id:"agent-loop",index:2,intrinsicSize:"auto 760px",children:[e.jsx(d,{}),e.jsx(He,{})]}),e.jsxs(n,{id:"mobile-native",index:3,intrinsicSize:"auto 780px",children:[e.jsx(d,{}),e.jsx(Ge,{})]}),e.jsxs(n,{id:"setup-path",index:4,intrinsicSize:"auto 780px",children:[e.jsx(d,{}),e.jsx(Ye,{})]}),e.jsxs(n,{id:"security",index:5,intrinsicSize:"auto 760px",children:[e.jsx(d,{}),e.jsx(Qe,{})]}),e.jsxs(n,{id:"device-control-faq",index:6,intrinsicSize:"auto 1040px",children:[e.jsx(d,{}),e.jsx(Ze,{})]}
16),e.jsx(n,{id:"device-control-closer",index:7,intrinsicSize:"auto 560px",children:e.jsx(Ke,{})}),e.jsx(Ue,{})]})}function Me(){const{t:i}=l("marketing"),{mode:t}=me(),r=t==="light",o=!!I();return le()?e.jsxs("div",{className:"mlp-device-hero-sig mlp-device-hero-sig-mobile","data-light":r?"true":"false",children:[e.jsx("div",{className:"mlp-device-hero-orbit","aria-hidden":!0,children:e.jsx("span",{className:"mlp-device-orbit-core"})}),e.jsx(m.div,{className:"mlp-device-hero-phone mlp-device-hero-phone-solo",initial:o?!1:{opacity:0,y:16},animate:o?void 0:{opacity:1,y:0},transition:{duration:.5,ease:[.22,.61,.36,1]},children:e.jsx(j,{platform:"android",src:P,alt:i("agenticDeviceControl.hero.visualAltRight")})})]}):e.jsxs("div",{className:"mlp-device-hero-sig","data-light":r?"true":"false",children:[e.jsxs("div",{className:"mlp-device-hero-orbit","aria-hidden":!0,children:[e.jsx("span",{className:"mlp-device-orbit-core"}),e.jsx("span",{className:"mlp-device-orbit-ring mlp-orbit-r1",children:e.jsx("i",{})}),e.jsx("span",{className:"mlp-device-orbit-ring mlp-orbit-r2",children:e.jsx("i",{})}),e.jsx("span",{className:"mlp-device-orbit-ring mlp-orbit-r3",children:e.jsx("i",{})})]}),e.jsx(m.div,{className:"mlp-device-hero-phone mlp-device-hero-phone-iphone",initial:o?!1:{opacity:0,y:22,rotate:-6},animate:o?void 0:{opacity:1,y:0,rotate:-3},transition:{duration:.64,ease:[.22,.61,.36,1]},children:e.jsx(j,{platform:"iphone",src:Se,alt:i("agenticDeviceControl.hero.visualAltLeft")})}),e.jsx(m.div,{className:"mlp-device-hero-phone mlp-device-hero-phone-android",initial:o?!1:{opacity:0,y:30,rotate:6},animate:o?void 0:{opacity:1,y:0,rotate:3},transition:{duration:.64,ease:[.22,.61,.36,1],delay:.08},children:e.jsx(j,{platform:"android",src:P,alt:i("agenticDeviceControl.hero.visualAltRight")})})]})}function j({platform:i,src:t,alt:r}){return e.jsxs("div",{className:`mlp-device-phone-shell mlp-device-phone-${i}`,children:[e.jsx("span",{className:"mlp-device-phone-btn mlp-device-phone-btn-left","aria-hidden":!0}),e.jsx("span",{className:"mlp-device-phone-btn mlp-device-phone-btn-right","aria-hidden":!0}),e.jsx("span",{className:"mlp-device-phone-btn mlp-device-phone-btn-power","aria-hidden":!0}),e.jsxs("div",{className:"mlp-device-phone-glass",children:[e.jsx("img",{src:t,alt:r,loading:"eager"}),i==="iphone"?e.jsx("span",{className:"mlp-device-dynamic-island","aria-hidden":!0}):e.jsx("span",{className:"mlp-device-punch-hole","aria-hidden":!0}),e.jsx("span",{className:"mlp-device-screen-sheen","aria-hidden":!0}),e.jsx("span",{className:"mlp-device-home-indicator","aria-hidden":!0})]})]})}const Ie=[{name:"Claude",logo:K},{name:"ChatGPT",logo:U},{name:"Le Chat",logo:ee},{name:"Cursor",logo:ie}],Le=["melaya:read","melaya:phone","melaya:pipelines"];function qe(){const{t:i}=l("marketing");return e.jsx(E,{reverse:!0,eyebrow:i("agenticDeviceControl.mcp.eyebrow"),title:i("agenticDeviceControl.mcp.title"),body:i("agenticDeviceControl.mcp.body"),accent:s,visual:e.jsx($e,{})})}function $e(){const{t:i}=l("marketing");return e.jsxs("div",{className:"mlp-device-mcp",children:[e.jsx("div",{className:"mlp-device-mcp-glow","aria-hidden":!0}),e.jsx("div",{className:"mlp-device-mcp-clients",children:Ie.map(t=>e.jsx(h,{y:10,blur:!1,children:e.jsxs("figure",{className:"mlp-device-mcp-client",children:[e.jsx("img",{src:t.logo,alt:"",loading:"lazy",decoding:"async"}),e.jsx("figcaption",{children:t.name})]})},t.name))}),e.jsx("div",{className:"mlp-device-mcp-wire","aria-hidden":!0,children:e.jsx("span",{})}),e.jsxs("div",{className:"mlp-device-mcp-endpoint",children:[e.jsx(fe,{size:15,strokeWidth:2,"aria-hidden":!0}),e.jsx("code",{children:"api.melaya.org/mcp"}),e.jsxs("span",{className:"mlp-device-mcp-oauth",children:[e.jsx(ye,{size:11,"aria-hidden":!0})," OAuth 2.1"]})]}),e.jsx("div",{className:"mlp-device-mcp-scopes",children:Le.map(t=>e.jsx("span",{children:t},t))}),e.jsx("p",{className:"mlp-device-mcp-note",children:i("agenticDeviceControl.mcp.footnote")})]})}function We(){const i=D.useRef(null),t=!!I(),{t:r}=l("marketing"),{scrollYProgress:o}=W(i,{offset:["start end","center center"]}),p=R(o,{stiffness:120,damping:28,mass:.6}),c=x(p,[0,1],[80,-80]),S=x(p,[0,.5,1],[.04,.08,.04]),F=x(p,[0,1],[24,-8]),y=x(p,[0,1],[16,-4]),w=r("agenticDeviceControl.whatItIs.headline",{defaultValue:"An assistant with hands. It taps, types, and checks its work."}),b=w.match(/^(.*?[.ã।!?ï¼ï¼])\s*(.+)$/),B=b?b[1]:w,k=b?b[2]:"";return e.jsxs("section",{ref:i,style:{position:"relative",overflow:"hidden",...v,...f},children:[e.jsx(m.div,{"aria-hidden":!0,style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none",y:t?0:c,opacity:t?.06:S,fontFamily:"Poppins, system-ui, sans-serif",fontSize:"clamp(14vw, 22vw, 28vw)",fontWeight:700,letterSpacing:"-0.04em",color:a,whiteSpace:"nowrap",willChange:"transform, opacity"},children:r("agenticDeviceControl.whatItIs.ghostText",{defaultValue:"HANDS"})}),e.jsxs("div",{style:{position:"relative",maxWidth:1100,margin:"0 auto",textAlign:"center",display:"flex",flexDirection:"column",alignItems:"center",gap:48},children:[e.jsx(u,{text:r("agenticDeviceControl.whatItIs.eyebrow",{defaultValue:"// WHAT IT IS"}),accent:a}),e.jsxs(m.h2,{style:{fontFamily:"Poppins, system-ui, sans-serif",fontSize:"clamp(2.25rem, 2.2vw + 1.4rem, 3rem)",fontWeight:700,letterSpacing:"-0.02em",lineHeight:1.12,color:"var(--mel-text-primary)",margin:0,maxWidth:"18ch",y:t?0:F,willChange:"transform"},children:[B,k&&e.jsx("span",{style:{display:"block",backgroundImage:`linear-gradient(92deg, ${a} 0%, ${s}
16 60%, #A78BFA 100%)`,WebkitBackgroundClip:"text",backgroundClip:"text",WebkitTextFillColor:"transparent",color:"transparent",paddingBottom:"0.12em"},children:k})]}),e.jsx(Te,{progress:p,reduced:t}),e.jsxs(m.p,{style:{fontFamily:"Poppins, system-ui, sans-serif",fontSize:17,lineHeight:1.6,color:"var(--mel-text-secondary, rgba(220,228,255,0.74))",margin:0,textAlign:"center",maxWidth:"min(64ch, 100%)",y:t?0:y,willChange:"transform"},children:[r("agenticDeviceControl.whatItIs.bodyBefore",{defaultValue:"A phone agent is an AI that uses your phone the way you do. Say what you need and it opens the app, reads the screen, and works through it one careful step at a time: booking the table, answering the messages, posting the update. It can only enter the apps you allow, you can watch every move live, and one tap stops it cold. Think of it as "}),e.jsx("mark",{style:{background:"transparent",color:"var(--mel-text-primary)",fontWeight:600,borderBottom:`1px solid ${s}88`,padding:"0 2px"},children:r("agenticDeviceControl.whatItIs.bodyMark",{defaultValue:"a helpful pair of hands that always asks first"})}),r("agenticDeviceControl.whatItIs.bodyAfter",{defaultValue:"."})]})]})]})}function Te({progress:i,reduced:t}){const r=x(i,[.05,.65],[0,1]);return e.jsx(m.span,{"aria-hidden":!0,style:{display:"block",width:1,height:"clamp(64px, 10vh, 96px)",background:`linear-gradient(180deg, ${s}88 0%, ${a}88 100%)`,transformOrigin:"top center",scaleY:t?1:r,willChange:"transform"}})}function Ve(){const{t:i}=l("marketing"),t=[{title:i("agenticDeviceControl.problem.step1Title",{defaultValue:"Pair your phone"}),body:i("agenticDeviceControl.problem.step1Body",{defaultValue:"Install the Melaya app on Android, scan a QR code, and grant permissions you can revoke at any time."})},{title:i("agenticDeviceControl.problem.step2Title",{defaultValue:"Allow specific apps"}),body:i("agenticDeviceControl.problem.step2Body",{defaultValue:"Grant access app by app. Anything off the allowlist stays out of reach."})},{title:i("agenticDeviceControl.problem.step3Title",{defaultValue:"Let agents work"}),body:i("agenticDeviceControl.problem.step3Body",{defaultValue:"Agents see the screen, act one step at a time, and verify each result. Watch live, approve, or stop at any moment."})}];return e.jsx("section",{style:{...v,...f},children:e.jsxs("div",{className:"mlp-device-section-inner",children:[e.jsxs("div",{className:"mlp-device-section-head",children:[e.jsx(u,{text:i("agenticDeviceControl.problem.eyebrow",{defaultValue:"Why it matters"}),accent:s}),e.jsx("h2",{children:i("agenticDeviceControl.problem.title",{defaultValue:"Real work lives in apps your automations cannot reach"})}),e.jsx("p",{children:i("agenticDeviceControl.problem.body",{defaultValue:"Messages, approvals, and posts happen inside mobile apps with no API, so most automation stops at the browser. And handing an AI an unlocked phone is a hard no without guardrails."})}),e.jsxs("p",{className:"mlp-device-problem-answer",children:[e.jsx("span",{"aria-hidden":!0}),i("agenticDeviceControl.problem.answer",{defaultValue:"Melaya makes it governed: agents operate your phone under an explicit per-app allowlist, revocable in one tap, observable live on screen."})]})]}),e.jsxs("div",{className:"mlp-device-problem-how",children:[e.jsx("span",{className:"mlp-device-problem-kicker",children:i("agenticDeviceControl.problem.howKicker",{defaultValue:"How you use it"})}),e.jsx("div",{className:"mlp-device-problem-steps",children:t.map((r,o)=>e.jsxs(h,{className:"mlp-device-problem-step",y:18,blur:!1,children:[e.jsx("span",{children:String(o+1).padStart(2,"0")}),e.jsx("strong",{children:r.title}),e.jsx("p",{children:r.body})]},r.title))}),e.jsxs("a",{className:"mlp-device-problem-link",href:"#setup-path",children:[i("agenticDeviceControl.problem.setupLink",{defaultValue:"See the full setup path"}),e.jsx(J,{size:13,strokeWidth:2,"aria-hidden":!0})]})]})]})})}function Oe(){const{t:i}=l("marketing"),t=N(i,"agenticDeviceControl.capabilities.items");return e.jsx(E,{eyebrow:i("agenticDeviceControl.capabilities.eyebrow"),title:i("agenticDeviceControl.capabilities.title"),body:i("agenticDeviceControl.capabilities.body"),accent:a,visual:e.jsx(Re,{items:t})})}const $=["open_app","read_screen","tap","type_text","verify"];function Re({items:i}){return e.jsxs("div",{className:"mlp-device-trace",children:[e.jsx("div",{className:"mlp-device-trace-glow","aria-hidden":!0}),e.jsxs("div",{className:"mlp-device-trace-head",children:[e.jsxs("span",{className:"mlp-device-trace-dots","aria-hidden":!0,
16children:[e.jsx("i",{}),e.jsx("i",{}),e.jsx("i",{})]}),e.jsx("span",{className:"mlp-device-trace-name",children:"agent · phone tools"}),e.jsxs("span",{className:"mlp-device-trace-live",children:[e.jsx("i",{}),"live"]})]}),e.jsxs("div",{className:"mlp-device-trace-body",children:[i.map((t,r)=>e.jsxs(h,{className:"mlp-device-trace-call",y:12,blur:!1,children:[e.jsx("span",{className:"mlp-device-trace-gutter",children:String(r+1).padStart(2,"0")}),e.jsxs("div",{className:"mlp-device-trace-line",children:[e.jsxs("code",{children:["phone.",$[r%$.length],"()"]}),e.jsx("p",{children:t})]}),e.jsx("span",{className:"mlp-device-trace-ok","aria-hidden":!0,children:e.jsx(C,{size:12,strokeWidth:3})})]},t)),e.jsxs(h,{className:"mlp-device-trace-return",y:10,blur:!1,children:[e.jsx(J,{size:13,strokeWidth:2,"aria-hidden":!0}),e.jsxs("span",{className:"mlp-device-trace-done",children:[e.jsx(C,{size:11,strokeWidth:3,"aria-hidden":!0})," done"]}),e.jsx("span",{className:"mlp-device-trace-cursor","aria-hidden":!0})]})]})]})}function _e(){const{t:i}=l("marketing"),t=z(i,"agenticDeviceControl.allowlist.apps");return e.jsx(E,{reverse:!0,eyebrow:i("agenticDeviceControl.allowlist.eyebrow"),title:i("agenticDeviceControl.allowlist.title"),body:i("agenticDeviceControl.allowlist.body"),accent:g,visual:e.jsx(Je,{apps:t})})}function Je({apps:i}){return e.jsxs("div",{className:"mlp-device-allowlist",children:[e.jsxs("div",{className:"mlp-device-allowlist-search",children:[e.jsx(we,{size:15,strokeWidth:2,"aria-hidden":!0}),e.jsx("p",{children:"Search installed apps"})]}),e.jsx("div",{className:"mlp-device-allowlist-rows",children:i.map((t,r)=>{const o=t.allowed===!0||t.state.toLowerCase().includes("allow")||t.state.toLowerCase().includes("autor"),p=Fe[t.name];return e.jsxs(h,{className:"mlp-device-app-row",y:14,blur:!1,children:[e.jsx("div",{className:"mlp-device-app-icon","data-logo":p?"true":"false",children:p?e.jsx("img",{src:p,alt:t.name,loading:"lazy"}):e.jsx(ke,{size:20,strokeWidth:1.75})}),e.jsxs("div",{className:"mlp-device-app-meta",children:[e.jsx("strong",{children:t.name}),e.jsx("p",{children:t.scope})]}),e.jsxs("span",{className:o?"mlp-device-app-state on":"mlp-device-app-state",children:[t.state,e.jsx("span",{className:o?"mlp-device-toggle on":"mlp-device-toggle",children:e.jsx("i",{})})]})]},`${t.name}-${r}`)})}),e.jsxs("div",{className:"mlp-device-allowlist-note",children:[e.jsx("span",{children:"policy"}),e.jsx("p",{children:"Server checks the allowlist. The phone checks the foreground app again before executing."})]})]})}function He(){const{t:i}=l("marketing"),t=z(i,"agenticDeviceControl.loop.steps");return e.jsx("section",{style:{...v,...f},children:e.jsxs("div",{className:"mlp-device-section-inner",children:[e.jsxs("div",{className:"mlp-device-section-head",children:[e.jsx(u,{text:i("agenticDeviceControl.loop.eyebrow"),accent:a}),e.jsx("h2",{children:i("agenticDeviceControl.loop.title")}),e.jsx("p",{children:i("agenticDeviceControl.loop.body")})]}),e.jsxs("div",{className:"mlp-device-loop",children:[e.jsx("span",{className:"mlp-device-loop-rail","aria-hidden":!0}),t.map((r,o)=>{const p=Be[o]??M;return e.jsxs(h,{className:"mlp-device-loop-step",y:26,children:[e.jsxs("div",{className:"mlp-device-loop-node",children:[e.jsx("span",{className:"mlp-device-loop-ico",children:e.jsx(p,{size:20,strokeWidth:1.75})}),e.jsx("span",{className:"mlp-device-loop-index",children:r.kicker})]}),e.jsx("h3",{children:r.title}),e.jsx("p",{children:r.body})]},r.title)}),e.jsx("span",{className:"mlp-device-loop-return","aria-hidden":!0,children:e.jsx(ve,{size:14,strokeWidth:2.25})})]})]})})}function Ge(){const{t:i}=l("marketing"),t=N(i,"agenticDeviceControl.mobile.items");return e.jsx(E,{eyebrow:i("agenticDeviceControl.mobile.eyebrow"),title:i("agenticDeviceControl.mobile.title"),body:i("agenticDeviceControl.mobile.body"),accent:s,visual:e.jsx(Xe,{items:t})})}function Xe({items:i}){const{t}=l("marketing");return e.jsxs("div",{className:"mlp-device-mobile-app",children:[e.jsx(j,{platform:"android",src:P,alt:""}),e.jsx("div",{className:"mlp-device-working-scrim","aria-hidden":!0}),e.jsxs("div",{className:"mlp-device-working-card",children:[e.jsxs("div",{className:"mlp-device-working-head",children:[e.jsx("span",{className:"mlp-device-working-logo",children:e.jsx("img",{src:H,alt:"Melaya"})}),e.jsxs("span",{className:"mlp-device-working-live",children:[e.jsx("i",{}),t("agenticDeviceControl.mobile.working.status")]})]}),e.jsx("strong",{children:t("agenticDeviceControl.mobile.working.title")}),e.jsx("p",{children:t("agenticDeviceControl.mobile.working.body")}),e.jsx("div",{className:"mlp-device-working-progress","aria-hidden":!0,
16children:e.jsx("span",{})}),e.jsxs("div",{className:"mlp-device-working-actions",children:[e.jsxs("button",{type:"button",className:"stop",children:[e.jsx(ze,{size:15,strokeWidth:2}),t("agenticDeviceControl.mobile.working.stop")]}),e.jsxs("button",{type:"button",className:"hitl",children:[e.jsx(je,{size:15,strokeWidth:2}),t("agenticDeviceControl.mobile.working.hitl")]})]})]}),e.jsx("div",{className:"mlp-device-mobile-bullets",children:i.map(r=>e.jsxs(h,{className:"mlp-device-mobile-bullet",y:10,blur:!1,children:[e.jsx(C,{size:13,strokeWidth:2.5}),r]},r))})]})}function Ye(){const{t:i}=l("marketing"),t=N(i,"agenticDeviceControl.setup.items");return e.jsx("section",{style:{...v,...f},children:e.jsxs("div",{className:"mlp-device-section-inner",children:[e.jsxs("div",{className:"mlp-device-section-head",children:[e.jsx(u,{text:i("agenticDeviceControl.setup.eyebrow"),accent:A}),e.jsx("h2",{children:i("agenticDeviceControl.setup.title")}),e.jsx("p",{children:i("agenticDeviceControl.setup.body")})]}),e.jsxs("ol",{className:"mlp-device-setup-flow",children:[e.jsx("span",{className:"mlp-device-setup-spine","aria-hidden":!0}),t.map((r,o)=>{const p=Pe[o]??_,c=o<2?"done":o===2?"current":"todo";return e.jsxs(h,{as:"li",className:"mlp-device-setup-node",y:18,blur:!1,children:[e.jsx("span",{className:"mlp-device-setup-badge","data-state":c,children:c==="done"?e.jsx(C,{size:16,strokeWidth:3}):e.jsx(p,{size:18,strokeWidth:1.75})}),e.jsxs("div",{className:"mlp-device-setup-body",children:[e.jsx("span",{className:"mlp-device-setup-kicker",children:String(o+1).padStart(2,"0")}),e.jsx("p",{children:r})]})]},r)})]})]})})}function Qe(){const{t:i}=l("marketing"),t=N(i,"agenticDeviceControl.security.items");return e.jsx("section",{style:{...v,...f},children:e.jsx("div",{className:"mlp-device-section-inner",children:e.jsxs("div",{className:"mlp-device-section-head",children:[e.jsx(u,{text:i("agenticDeviceControl.security.eyebrow"),accent:g}),e.jsx("h2",{children:i("agenticDeviceControl.security.title")}),e.jsx("p",{children:i("agenticDeviceControl.security.body")}),e.jsx("div",{className:"mlp-device-security-list",children:t.map(r=>e.jsxs("div",{children:[e.jsx("span",{}),r]},r))})]})})})}function Ze(){const{t:i}=l("marketing"),t=z(i,"agenticDeviceControl.faq.items");return e.jsx(pe,{eyebrow:i("agenticDeviceControl.faq.eyebrow"),title:i("agenticDeviceControl.faq.title"),body:i("agenticDeviceControl.faq.body"),items:t,accent:a})}function Ke(){const{t:i}=l("marketing");return e.jsx(ae,{eyebrow:i("agenticDeviceControl.closer.eyebrow"),title:i("agenticDeviceControl.closer.title"),sub:i("agenticDeviceControl.closer.body"),primaryLabel:i("agenticDeviceControl.closer.primaryCta"),docsLabel:i("agenticDeviceControl.closer.docsCta"),docsTo:"/documentation#device-agents-overview",trustLine:i("agenticDeviceControl.closer.trust"),accent:a,analyticsLocation:"device-control-page-closer"})}function E({eyebrow:i,title:t,body:r,accent:o,visual:p,reverse:c=!1}){return e.jsx("section",{style:{...v,...f},children:e.jsxs("div",{className:c?"mlp-device-article reverse":"mlp-device-article",children:[e.jsxs("div",{className:"mlp-device-section-head",children:[e.jsx(u,{text:i,accent:o}),e.jsx("h2",{children:t}),e.jsx("p",{children:r})]}),e.jsx("div",{className:"mlp-device-visual-slot",children:p})]})})}function Ue(){return e.jsx("style",{children:` 17 .mlp-device-section-inner, 18 .mlp-device-article { 19 max-width: 1440px; 20 margin: 0 auto; 21 } 22 .mlp-device-article { 23 display: grid; 24 grid-template-columns: minmax(0, 0.86fr) minmax(380px, 1.14fr); 25 align-items: center; 26 gap: clamp(32px, 6vw, 96px); 27 } 28 .mlp-device-article.reverse .mlp-device-section-head { order: 2; } 29 .mlp-device-article.reverse .mlp-device-visual-slot { order: 1; } 30 .mlp-device-section-head h2 { 31 margin: 16px 0 0; 32 max-width: 22ch; 33 font-family: Poppins, system-ui, sans-serif; 34 font-weight: 700; 35 font-size: clamp(2rem, 3.2vw, 3rem); 36 line-height: 1.12; 37 letter-spacing: -0.02em; 38 color: var(--mel-text-primary); 39 } 40 .mlp-device-section-head p { 41 margin: 20px 0 0; 42 max-width: 66ch; 43 font-family: Poppins, system-ui, sans-serif; 44 font-size: clamp(1rem, 0.42vw + 0.92rem, 1.16rem); 45 line-height: 1.68; 46 color: var(--mel-text-secondary); 47 } 48 .mlp-device-visual-slot { 49 min-width: 0; 50 } 51 .mlp-device-hero-sig { 52 position: relative; 53 min-height: min(620px, 72dvh); 54 perspective: 1300px; 55 transform-style: preserve-3d; 56 } 57 .mlp-device-hero-orbit { 58 position: absolute; 59 inset: 4% 2% 0; 60 border-radius: 42px; 61 background: 62 radial-gradient(circle at 24% 18%, rgba(34,211,238,0.26), transparent 30%), 63 radial-gradient(circle at 78% 70%, rgba(139,92,246,0.23), transparent 34%), 64 linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02)); 65 border: 1px solid rgba(255,255,255,0.09); 66 backdrop-filter: blur(18px) saturate(150%); 67 -webkit-backdrop-filter: blur(18px) saturate(150%); 68 mask-image: radial-gradient(circle at 50% 50%, black 52%, transparent 74%); 69 } 70 .mlp-device-hero-sig[data-light="true"] .mlp-device-hero-orbit { 71 background: 72 radial-gradient(circle at 24% 18%, rgba(34,211,238,0.28), transparent 30%), 73 radial-gradient(circle at 78% 70%, rgba(139,92,246,0.22), transparent 34%), 74 linear-gradient(135deg, rgba(255,255,255,0.74), rgba(255,255,255,0.20)); 75 border-color: rgba(15,23,42,0.08); 76 } 77 .mlp-device-hero-phone { 78 position: absolute; 79 transform-style: preserve-3d; 80 } 81 .mlp-device-hero-phone-iphone { 82 left: 10%; 83 top: 4%; 84 z-index: 3; 85 } 86 .mlp-device-hero-phone-android { 87 right: 8%; 88 top: 17%; 89 z-index: 4; 90 } 91 .mlp-device-phone-shell { 92 position: relative; 93 width: min(242px, 42vw); 94 padding: 9px; 95 border-radius: 46px; 96 background: linear-gradient(145deg, #F8FAFC 0%, #94A3B8 46%, #0F172A 100%); 97 border: 1px solid rgba(255,255,255,0.20); 98 box-shadow: 99 0 42px 110px rgba(0,0,0,0.45), 100 inset 0 1px 0 rgba(255,255,255,0.62), 101 inset 0 -18px 34px rgba(2,6,23,0.38); 102 }
103 .mlp-device-phone-android { 104 border-radius: 34px; 105 background: linear-gradient(145deg, #334155 0%, #0F172A 48%, #020617 100%); 106 } 107 .mlp-device-phone-btn { 108 position: absolute; 109 width: 3px; 110 border-radius: 999px; 111 background: linear-gradient(180deg, #CBD5E1, #334155); 112 z-index: 0; 113 } 114 .mlp-device-phone-btn-left { 115 left: -3px; 116 top: 92px; 117 height: 52px; 118 } 119 .mlp-device-phone-btn-right { 120 right: -3px; 121 top: 132px; 122 height: 74px; 123 } 124 .mlp-device-phone-glass { 125 position: relative; 126 overflow: hidden; 127 aspect-ratio: 9 / 19.4; 128 border-radius: 37px; 129 background: #020617; 130 border: 1px solid rgba(255,255,255,0.12); 131 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); 132 } 133 .mlp-device-phone-android .mlp-device-phone-glass { 134 border-radius: 26px; 135 } 136 .mlp-device-phone-glass img { 137 width: 100%; 138 height: 100%; 139 display: block; 140 object-fit: cover; 141 } 142 .mlp-device-dynamic-island { 143 position: absolute; 144 top: 10px; 145 left: 50%; 146 width: 74px; 147 height: 22px; 148 border-radius: 999px; 149 transform: translateX(-50%); 150 background: rgba(2,6,23,0.96); 151 box-shadow: 0 4px 12px rgba(0,0,0,0.32); 152 } 153 .mlp-device-punch-hole { 154 position: absolute; 155 top: 11px; 156 left: 50%; 157 width: 12px; 158 height: 12px; 159 border-radius: 50%; 160 transform: translateX(-50%); 161 background: rgba(2,6,23,0.92); 162 border: 1px solid rgba(255,255,255,0.18); 163 } 164 .mlp-device-screen-sheen { 165 position: absolute; 166 inset: 0; 167 pointer-events: none; 168 background: linear-gradient(145deg, rgba(255,255,255,0.22), transparent 23%, transparent 72%, rgba(255,255,255,0.08)); 169 mix-blend-mode: screen; 170 } 171 .mlp-device-home-indicator { 172 position: absolute; 173 left: 50%; 174 bottom: 8px; 175 width: 74px; 176 height: 4px; 177 border-radius: 999px; 178 transform: translateX(-50%); 179 background: rgba(255,255,255,0.78); 180 } 181 .mlp-device-phone-label { 182 position: absolute; 183 left: 12px; 184 right: 12px; 185 bottom: 18px; 186 min-height: 31px; 187 display: flex; 188 align-items: center; 189 justify-content: center; 190 border-radius: 999px; 191 background: rgba(2,6,23,0.68); 192 border: 1px solid rgba(34,211,238,0.45); 193 backdrop-filter: blur(12px) saturate(150%); 194 -webkit-backdrop-filter: blur(12px) saturate(150%); 195 color: #FFFFFF; 196 font: 900 10px/1 Poppins, system-ui, sans-serif; 197 letter-spacing: 0.14em; 198 text-transform: uppercase; 199 } 200 .mlp-device-hero-chip { 201 position: absolute; 202 z-index: 6; 203 display: inline-flex; 204 align-items: center; 205 min-height: 38px; 206 padding: 0 13px; 207 border-radius: 999px; 208 border: 1px solid rgba(255,255,255,0.14); 209 background: rgba(2,6,23,0.48); 210 backdrop-filter: blur(18px) saturate(160%); 211 -webkit-backdrop-filter: blur(18px) saturate(160%); 212 color: #FFFFFF; 213 font: 800 10px/1 'JetBrains Mono', ui-monospace, monospace; 214 letter-spacing: 0.13em; 215 text-transform: uppercase; 216 box-shadow: 0 18px 54px rgba(0,0,0,0.24); 217 } 218 .mlp-device-hero-chip-top { left: 2%; top: 18%; } 219 .mlp-device-hero-chip-bottom { right: 0; bottom: 14%; } 220 .mlp-device-tool-surface, 221 .mlp-device-allowlist, 222 .mlp-device-mobile-app { 223 position: relative; 224 overflow: hidden; 225 border-radius: 34px; 226 border: 1px solid rgba(255,255,255,0.10); 227 background: 228 radial-gradient(circle at 18% 12%, rgba(34,211,238,0.16), transparent 32%), 229 radial-gradient(circle at 88% 78%, rgba(139,92,246,0.15), transparent 34%), 230 rgba(255,255,255,0.045); 231 backdrop-filter: blur(20px) saturate(150%); 232 -webkit-backdrop-filter: blur(20px) saturate(150%); 233 box-shadow: 0 34px 110px rgba(0,0,0,0.32); 234 } 235 .light .mlp-device-tool-surface, 236 .light .mlp-device-allowlist, 237 .light .mlp-device-mobile-app { 238 border-color: rgba(15,23,42,0.08); 239 background: 240 radial-gradient(circle at 18% 12%, rgba(34,211,238,0.18), transparent 32%), 241 radial-gradient(circle at 88% 78%, rgba(139,92,246,0.13), transparent 34%), 242 rgba(255,255,255,0.72); 243 box-shadow: 0 34px 100px rgba(15,23,42,0.14); 244 } 245 .mlp-device-tool-surface { 246 padding: clamp(20px, 3vw, 34px); 247 } 248 .mlp-device-tool-glow { 249 position: absolute; 250 inset: -30%; 251 background: conic-gradient(from 130deg, transparent, rgba(34,211,238,0.22), transparent, rgba(139,92,246,0.20), transparent); 252 filter: blur(20px); 253 opacity: 0.82; 254 } 255 .mlp-device-tool-header, 256 .mlp-device-tool-grid, 257 .mlp-device-tool-list { 258 position: relative; 259 z-index: 1; 260 } 261 .mlp-device-tool-header { 262 display: flex; 263 justify-content: space-between; 264 gap: 12px; 265 color: var(--mel-text-tertiary); 266 font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace; 267 letter-spacing: 0.14em; 268 text-transform: uppercase; 269 } 270 .mlp-device-tool-grid { 271 display: grid; 272 grid-template-columns: repeat(4, minmax(0, 1fr)); 273 gap: 10px; 274 margin-top: 24px; 275 } 276 .mlp-device-tool-verb, 277 .mlp-device-tool-row, 278 .mlp-device-loop-step, 279 .mlp-device-setup-step, 280 .mlp-device-faq { 281 border: 1px solid rgba(255,255,255,0.10); 282 background: rgba(255,255,255,0.055); 283 backdrop-filter: blur(14px) saturate(140%); 284 -webkit-backdrop-filter: blur(14px) saturate(140%); 285 } 286 .light .mlp-device-tool-verb, 287 .light .mlp-device-tool-row, 288 .light .mlp-device-loop-step, 289 .light .mlp-device-setup-step, 290 .light .mlp-device-faq { 291 border-color: rgba(15,23,42,0.08); 292 background: rgba(255,255,255,0.70); 293 } 294 .mlp-device-tool-verb { 295 min-height: 98px; 296 display: flex; 297 flex-direction: column; 298 justify-content: space-between; 299 border-radius: 20px; 300 padding: 14px; 301 } 302 .mlp-device-tool-verb span, 303 .mlp-device-loop-index, 304 .mlp-device-setup-step span { 305 color: ${a}; 306 font: 900 11px/1 'JetBrains Mono', ui-monospace, monospace; 307 letter-spacing: 0.14em; 308 text-transform: uppercase; 309 } 310 .mlp-device-tool-verb strong { 311 color: var(--mel-text-primary); 312 font: 700 18px/1.1 Poppins, system-ui, sans-serif; 313 } 314 .mlp-device-tool-list { 315 display: grid; 316 gap: 10px; 317 margin-top: 12px; 318 } 319 .mlp-device-tool-row { 320 display: grid; 321 grid-template-columns: 44px 1fr; 322 gap: 12px; 323 align-items: start; 324 border-radius: 18px; 325 padding: 14px; 326 } 327 .mlp-device-tool-row span { 328 color: ${s}; 329 font: 900 10px/1 'JetBrains Mono', ui-monospace, monospace; 330 letter-spacing: 0.14em; 331 } 332 .mlp-device-tool-row p, 333 .mlp-device-loop-step p, 334 .mlp-device-setup-step p, 335 .mlp-device-faq p { 336 margin: 0; 337 color: var(--mel-text-secondary); 338 line-height: 1.55; 339 font-size: 14px; 340 } 341 .mlp-device-allowlist { 342 padding: clamp(18px, 3vw, 30px); 343 } 344 .mlp-device-allowlist-search { 345 height: 46px; 346 display: flex; 347 align-items: center; 348 gap: 12px; 349 border-radius: 999px; 350 padding: 0 16px; 351 border: 1px solid rgba(255,255,255,0.10); 352 background: rgba(2,6,23,0.32); 353 } 354 .light .mlp-device-allowlist-search { background: rgba(255,255,255,0.64); border-color: rgba(15,23,42,0.08); } 355 .mlp-device-allowlist-search span { 356 width: 12px; 357 height: 12px; 358 border-radius: 50%; 359 border: 2px solid ${a}; 360 box-shadow: 8px 8px 0 -6px ${a}; 361 } 362 .mlp-device-allowlist-search p { 363 margin: 0; 364 color: var(--mel-text-tertiary); 365 font-size: 13px; 366 } 367 .mlp-device-allowlist-rows { 368 display: grid; 369 gap: 11px; 370 margin-top: 16px; 371 } 372 .mlp-device-app-row { 373 display: grid; 374 grid-template-columns: 46px 1fr auto; 375 gap: 13px; 376 align-items: center; 377 padding: 12px; 378 border-radius: 20px; 379 border: 1px solid rgba(255,255,255,0.10); 380 background: rgba(255,255,255,0.052); 381 } 382 .light .mlp-device-app-row { border-color: rgba(15,23,42,0.08); background: rgba(255,255,255,0.70); } 383 .mlp-device-app-icon { 384 width: 46px; 385 height: 46px; 386 display: grid; 387 place-items: center; 388 border-radius: 16px; 389 background: linear-gradient(135deg, rgba(34,211,238,0.24), rgba(139,92,246,0.24)); 390 color: var(--mel-text-primary); 391 font-weight: 900; 392 } 393 .mlp-device-app-row strong { 394 display: block; 395 color: var(--mel-text-primary); 396 font-size: 14px; 397 } 398 .mlp-device-app-row p { 399 margin: 3px 0 0; 400 color: var(--mel-text-tertiary); 401 font-size: 12px; 402 } 403 .mlp-device-toggle { 404 position: relative; 405 width: 48px; 406 height: 28px; 407 border-radius: 999px; 408 background: rgba(148,163,184,0.28); 409 border: 1px solid rgba(255,255,255,0.12); 410 } 411 .mlp-device-toggle i { 412 position: absolute; 413 top: 3px; 414 left: 3px;
415 width: 20px; 416 height: 20px; 417 border-radius: 50%; 418 background: #FFFFFF; 419 transition: transform 180ms ease; 420 } 421 .mlp-device-toggle.on { 422 background: linear-gradient(135deg, ${g}, ${a}); 423 } 424 .mlp-device-toggle.on i { transform: translateX(20px); } 425 .mlp-device-allowlist-note { 426 display: grid; 427 grid-template-columns: auto 1fr; 428 gap: 12px; 429 margin-top: 16px; 430 padding: 14px; 431 border-radius: 18px; 432 background: rgba(16,185,129,0.10); 433 border: 1px solid rgba(16,185,129,0.22); 434 } 435 .mlp-device-allowlist-note span { 436 color: ${g}; 437 font: 900 10px/1 'JetBrains Mono', ui-monospace, monospace; 438 letter-spacing: 0.14em; 439 text-transform: uppercase; 440 } 441 .mlp-device-allowlist-note p { 442 margin: 0; 443 color: var(--mel-text-secondary); 444 font-size: 13px; 445 line-height: 1.5; 446 } 447 .mlp-device-loop { 448 display: grid; 449 grid-template-columns: repeat(4, minmax(0, 1fr)); 450 gap: 14px; 451 margin-top: clamp(28px, 5vh, 54px); 452 } 453 .mlp-device-loop-step { 454 position: relative; 455 min-height: 250px; 456 display: flex; 457 flex-direction: column; 458 gap: 14px; 459 border-radius: 26px; 460 padding: 22px; 461 overflow: hidden; 462 } 463 .mlp-device-loop-step::before { 464 content: ""; 465 position: absolute; 466 inset: -35% -20% auto auto; 467 width: 140px; 468 height: 140px; 469 border-radius: 50%; 470 background: radial-gradient(circle, rgba(34,211,238,0.26), transparent 66%); 471 } 472 .mlp-device-loop-step h3 { 473 margin: auto 0 0; 474 color: var(--mel-text-primary); 475 font: 700 clamp(1.25rem, 1vw + 1rem, 1.8rem)/1.1 Poppins, system-ui, sans-serif; 476 letter-spacing: -0.03em; 477 } 478 .mlp-device-mobile-app { 479 min-height: 560px; 480 display: flex; 481 align-items: center; 482 justify-content: center; 483 padding: 34px; 484 } 485 .mlp-device-mobile-app .mlp-device-phone-shell { 486 transform: rotate(-4deg) scale(0.92); 487 } 488 .mlp-device-working-card { 489 position: absolute; 490 z-index: 4; 491 width: min(330px, 78%); 492 left: 50%; 493 top: 50%; 494 transform: translate(-50%, -50%); 495 border-radius: 26px; 496 border: 1px solid rgba(255,255,255,0.14); 497 background: rgba(2,6,23,0.64); 498 backdrop-filter: blur(22px) saturate(160%); 499 -webkit-backdrop-filter: blur(22px) saturate(160%); 500 padding: 22px; 501 text-align: center; 502 color: #FFFFFF; 503 box-shadow: 0 28px 90px rgba(0,0,0,0.40); 504 } 505 .mlp-device-working-logo { 506 width: 42px; 507 height: 42px; 508 display: grid; 509 place-items: center; 510 margin: 0 auto 12px; 511 border-radius: 14px; 512 background: linear-gradient(135deg, ${a}, ${s}); 513 color: #020617; 514 font-weight: 1000; 515 } 516 .mlp-device-working-card strong { 517 font: 800 20px/1.1 Poppins, system-ui, sans-serif; 518 } 519 .mlp-device-working-card p { 520 margin: 10px 0 0; 521 color: rgba(255,255,255,0.72); 522 font-size: 13px; 523 line-height: 1.5; 524 } 525 .mlp-device-working-actions { 526 display: grid; 527 grid-template-columns: 1fr 1fr; 528 gap: 9px; 529 margin-top: 16px; 530 } 531 .mlp-device-working-actions button { 532 height: 38px; 533 border: 0; 534 border-radius: 12px; 535 background: rgba(255,255,255,0.12); 536 color: #FFFFFF; 537 font-weight: 800; 538 } 539 .mlp-device-working-actions button:first-child { 540 background: rgba(239,68,68,0.86); 541 } 542 .mlp-device-mobile-bullets { 543 position: absolute; 544 left: 18px; 545 right: 18px; 546 bottom: 18px; 547 display: flex; 548 flex-wrap: wrap; 549 gap: 8px; 550 justify-content: center; 551 } 552 .mlp-device-mobile-bullets span { 553 border-radius: 999px; 554 padding: 8px 10px; 555 border: 1px solid rgba(255,255,255,0.12); 556 background: rgba(255,255,255,0.07); 557 color: var(--mel-text-secondary); 558 font-size: 12px; 559 } 560 .mlp-device-setup-rail { 561 position: relative; 562 display: grid; 563 grid-template-columns: repeat(5, minmax(0, 1fr)); 564 gap: 12px; 565 margin-top: clamp(28px, 5vh, 54px); 566 } 567 .mlp-device-setup-rail::before { 568 content: ""; 569 position: absolute; 570 left: 6%; 571 right: 6%; 572 top: 32px; 573 height: 1px; 574 background: linear-gradient(90deg, ${A}, ${a}, ${s}); 575 opacity: 0.42; 576 } 577 .mlp-device-setup-step { 578 position: relative; 579 min-height: 190px; 580 border-radius: 24px; 581 padding: 20px; 582 } 583 .mlp-device-setup-step span { 584 display: inline-grid; 585 place-items: center; 586 width: 42px; 587 height: 42px; 588 border-radius: 50%; 589 background: rgba(245,158,11,0.15); 590 color: ${A}; 591 border: 1px solid rgba(245,158,11,0.30); 592 } 593 .mlp-device-setup-step p { 594 margin-top: 54px; 595 } 596 .mlp-device-security-layout { 597 display: grid; 598 grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr); 599 gap: clamp(28px, 5vw, 72px); 600 align-items: start; 601 } 602 .mlp-device-security-list { 603 display: grid; 604 gap: 10px; 605 margin-top: 24px; 606 } 607 .mlp-device-security-list div { 608 display: flex; 609 gap: 10px; 610 color: var(--mel-text-secondary); 611 line-height: 1.55; 612 font-size: 14px; 613 } 614 .mlp-device-security-list span { 615 width: 8px; 616 height: 8px; 617 margin-top: 7px; 618 border-radius: 50%; 619 flex: 0 0 8px; 620 background: ${g}; 621 box-shadow: 0 0 18px ${g}; 622 } 623 .mlp-device-faq-stack { 624 display: grid; 625 gap: 12px; 626 } 627 .mlp-device-faq { 628 border-radius: 22px; 629 padding: 18px; 630 } 631 .mlp-device-faq summary { 632 cursor: pointer; 633 color: var(--mel-text-primary); 634 font-weight: 800; 635 line-height: 1.35; 636 } 637 .mlp-device-faq p { 638 margin-top: 12px; 639 } 640 @media (max-width: 980px) { 641 .mlp-device-article, 642 .mlp-device-security-layout { 643 grid-template-columns: 1fr; 644 } 645 .mlp-device-article.reverse .mlp-device-section-head, 646 .mlp-device-article.reverse .mlp-device-visual-slot { 647 order: initial; 648 } 649 .mlp-device-loop, 650 .mlp-device-setup-rail { 651 grid-template-columns: 1fr; 652 } 653 .mlp-device-setup-rail::before { display: none; } 654 .mlp-device-setup-step { min-height: auto; } 655 .mlp-device-setup-step p { margin-top: 24px; } 656 .mlp-device-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } 657 .mlp-device-hero-sig { min-height: 520px; } 658 .mlp-device-hero-phone-iphone { left: 2%; } 659 .mlp-device-hero-phone-android { right: 0; } 660 } 661 @media (max-width: 640px) { 662 .mlp-device-phone-shell { width: min(208px, 48vw); } 663 .mlp-device-hero-sig { min-height: 440px; } 664 .mlp-device-hero-chip { display: none; } 665 .mlp-device-tool-grid { grid-template-columns: 1fr; } 666 .mlp-device-mobile-app { min-height: 500px; padding: 18px; } 667 .mlp-device-working-card { width: min(300px, 86%); } 668 } 669 @media (prefers-reduced-motion: reduce) { 670 .mlp-device-phone-shell, 671 .mlp-device-tool-glow { 672 animation: none !important; 673 transition: none !important; 674 } 675 } 676 677 /* ============ Reworked visuals (2026-07) ============ */ 678 679 /* Hero â real orbital system instead of a flat glass blob */ 680 .mlp-device-hero-orbit { 681 inset: 0; 682 border: 0; 683 background: none; 684 backdrop-filter: none; 685 -webkit-backdrop-filter: none; 686 mask-image: none; 687 display: grid; 688 place-items: center; 689 } 690 .mlp-device-hero-sig[data-light="true"] .mlp-device-hero-orbit { background: none; border: 0; } 691 .mlp-device-orbit-core { 692 position: absolute; 693 width: 48%; 694 aspect-ratio: 1; 695 border-radius: 50%; 696 background: 697 radial-gradient(circle at 40% 36%, rgba(34,211,238,0.34), transparent 60%), 698 radial-gradient(circle at 66% 70%, rgba(139,92,246,0.32), transparent 62%); 699 filter: blur(36px); 700 } 701 .mlp-device-orbit-ring { 702 position: absolute; 703 border-radius: 50%; 704 border: 1px solid rgba(148,163,184,0.20); 705 will-change: transform; 706 } 707 .light .mlp-device-orbit-ring { border-color: rgba(15,23,42,0.10); } 708 .mlp-device-orbit-ring i { 709 position: absolute; 710 top: -4px; 711 left: 50%; 712 width: 9px; 713 height: 9px; 714 margin-left: -4.5px; 715 border-radius: 50%; 716 background: linear-gradient(135deg, #22D3EE, #8B5CF6); 717 box-shadow: 0 0 14px rgba(34,211,238,0.85); 718 } 719 .mlp-orbit-r1 { width: 56%; aspect-ratio: 1; animation: mlp-orbit 26s linear infinite; } 720 .mlp-orbit-r2 { width: 80%; aspect-ratio: 1; border-style: dashed; animation: mlp-orbit 44s linear infinite reverse; } 721 .mlp-orbit-r2 i { background: linear-gradient(135deg, #10B981, #22D3EE); box-shadow: 0 0 14px rgba(16,185,129,0.75); } 722 .mlp-orbit-r3 { width: 104%; aspect-ratio: 1; opacity: 0.5; animation: mlp-orbit 66s linear infinite; } 723 .mlp-orbit-r3 i { background: #F59E0B; box-shadow: 0 0 12px rgba(245,158,11,0.75); } 724 @keyframes mlp-orbit { to { transform: rotate(360deg); } } 725 726 /* Capability tool card â verb tiles with icons */ 727 .mlp-device-tool-header { align-items: center; } 728 .mlp-device-tool-file { display: inline-flex; align-items: center; gap: 8px; color: var(--mel-text-secondary); } 729 .mlp-device-tool-file i { width: 9px; height: 9px; border-radius: 50%; background: #10B981; box-shadow: 0 0 10px #10B981; } 730 .mlp-device-tool-badge { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(34,211,238,0.30); background: rgba(34,211,238,0.10); color: #22D3EE; } 731 .light .mlp-device-tool-badge { color: #0891B2; } 732 .mlp-device-tool-verb { min-height: auto; align-items: flex-start; gap: 10px; padding: 16px; position: relative; } 733 .mlp-device-verb-ico { 734 display: grid; place-items: center; 735 width: 38px; height: 38px; border-radius: 12px; color: #fff; 736 background: linear-gradient(140deg, rgba(34,211,238,0.92), rgba(139,92,246,0.92)); 737 box-shadow: 0 8px 18px -8px rgba(139,92,246,0.7); 738 } 739 .mlp-device-tool-verb strong { text-transform: capitalize; } 740 .mlp-device-tool-verb em { 741 position: absolute; top: 13px; right: 14px; font-style: normal; 742 color: var(--mel-text-tertiary); font: 900 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; 743 } 744 745 /* Allowlist â real app logos + state label */ 746 .mlp-device-allowlist-search svg { color: var(--mel-text-tertiary); flex: 0 0 auto; } 747 .mlp-device-app-row { grid-template-columns: 44px 1fr auto; } 748 .mlp-device-app-icon { 749 width: 44px; height: 44px; overflow: hidden; border-radius: 13px; 750 background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); 751 } 752 .mlp-device-app-icon[data-logo="true"] { background: #fff; border-color: rgba(15,23,42,0.10); } 753 .light .mlp-device-app-icon { background: rgba(15,23,42,0.04); border-color: rgba(15,23,42,0.08); } 754 .light .mlp-device-app-icon[data-logo="true"] { background: #fff; } 755 .mlp-device-app-icon img { width: 66%; height: 66%; object-fit: contain; } 756 .mlp-device-app-icon svg { color: var(--mel-text-secondary); } 757 .mlp-device-app-state { 758 display: inline-flex; align-items: center; gap: 10px; 759 font: 800 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.10em; text-transform: uppercase; 760 color: var(--mel-text-tertiary); 761 } 762 .mlp-device-app-state.on { color: #10B981; } 763 .light .mlp-device-app-state.on { color: #059669; } 764 765 /* Agent loop â an elegant connected cycle */ 766 .mlp-device-loop { position: relative; } 767 .mlp-device-loop-rail { 768 position: absolute; left: 8%; right: 8%; top: 46px; height: 2px; border-radius: 999px; 769 background: linear-gradient(90deg, #22D3EE, #8B5CF6 40%, #10B981 74%, #22D3EE); 770 opacity: 0.55; 771 } 772 .mlp-device-loop-step { 773 min-height: auto; align-items: flex-start; gap: 12px; padding: 22px 20px; z-index: 1; 774 } 775 .mlp-device-loop-step::before { display: none; } 776 .mlp-device-loop-node { display: flex; align-items: center; gap: 12px; } 777 .mlp-device-loop-ico { 778 display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #fff; 779 background: linear-gradient(140deg, #22D3EE, #8B5CF6); 780 box-shadow: 0 10px 22px -10px rgba(139,92,246,0.85); 781 } 782 .mlp-device-loop-step h3 { margin: 4px 0 0; } 783 .mlp-device-loop-return { 784 position: absolute; top: 29px; right: calc(8% - 17px); display: grid; place-items: center; 785 width: 34px; height: 34px; border-radius: 50%; color: #22D3EE; 786 border: 1px solid rgba(34,211,238,0.42); background: rgba(34,211,238,0.10); 787 box-shadow: 0 0 18px -4px rgba(34,211,238,0.6); 788 } 789 790 /* Mobile "Melaya is working" overlay â real logo, readable, left-aligned */ 791 .mlp-device-mobile-app { position: relative; } 792 .mlp-device-working-scrim { 793 position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 34px; 794 background: radial-gradient(circle at 50% 42%, rgba(2,6,23,0.52), rgba(2,6,23,0.28)); 795 backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); 796 } 797 .mlp-device-working-card { width: min(340px, 84%); padding: 20px; text-align: left; } 798 .mlp-device-working-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } 799 .mlp-device-working-logo { 800 width: 40px; height: 40px; margin: 0; border-radius: 12px; background: rgba(255,255,255,0.10); 801 border: 1px solid rgba(255,255,255,0.18); overflow: hidden; 802 } 803 .mlp-device-working-logo img { width: 26px;
803 height: 26px; object-fit: contain; } 804 .mlp-device-working-live { 805 display: inline-flex; align-items: center; gap: 7px; color: #22D3EE; 806 font: 800 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; 807 } 808 .mlp-device-working-live i { width: 7px; height: 7px; border-radius: 50%; background: #22D3EE; box-shadow: 0 0 10px #22D3EE; animation: mlp-live 1.6s ease-in-out infinite; } 809 @keyframes mlp-live { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.68); } } 810 .mlp-device-working-card strong { font: 800 19px/1.15 Poppins, system-ui, sans-serif; } 811 .mlp-device-working-card p { margin: 8px 0 0; color: rgba(255,255,255,0.74); } 812 .mlp-device-working-progress { margin-top: 15px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; } 813 .mlp-device-working-progress span { display: block; height: 100%; width: 42%; border-radius: 999px; background: linear-gradient(90deg, #22D3EE, #8B5CF6); animation: mlp-progress 2.2s ease-in-out infinite; } 814 @keyframes mlp-progress { 0% { transform: translateX(-130%); } 100% { transform: translateX(320%); } } 815 .mlp-device-working-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; } 816 .mlp-device-working-actions .hitl { background: rgba(255,255,255,0.14); } 817 .mlp-device-mobile-bullets { z-index: 5; gap: 8px; } 818 .mlp-device-mobile-bullet { 819 display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 8px 12px; 820 border: 1px solid rgba(255,255,255,0.14); background: rgba(2,6,23,0.55); color: #E2E8F0; font-size: 12px; 821 backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); 822 } 823 .mlp-device-mobile-bullet svg { color: #34D399; flex: 0 0 auto; } 824 825 /* Setup rail â connected numbered path */ 826 .mlp-device-setup-rail::before { display: none; } 827 .mlp-device-setup-line { 828 position: absolute; left: 6%; right: 6%; top: 41px; height: 2px; border-radius: 999px; 829 background: linear-gradient(90deg, #F59E0B, #22D3EE 55%, #8B5CF6); opacity: 0.5; 830 } 831 .mlp-device-setup-step { min-height: auto; padding: 20px; z-index: 1; } 832 .mlp-device-setup-num { 833 display: inline-grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; 834 color: #1A1205; font: 900 15px/1 'JetBrains Mono', ui-monospace, monospace; 835 background: linear-gradient(140deg, #FBBF24, #F59E0B); box-shadow: 0 10px 22px -10px rgba(245,158,11,0.85); 836 } 837 .mlp-device-setup-step p { margin-top: 16px; } 838 839 /* FAQ â vertically centered beside the security list, chevron affordance */ 840 .mlp-device-security-layout { align-items: center; } 841 .mlp-device-faq-layout { align-items: start; } 842 .mlp-device-faq-heading { position: sticky; top: 116px; } 843 .mlp-device-faq-stack { align-self: center; gap: 10px; } 844 .mlp-device-faq summary { 845 display: flex; align-items: center; justify-content: space-between; gap: 14px; list-style: none; 846 } 847 .mlp-device-faq summary::-webkit-details-marker { display: none; } 848 .mlp-device-faq-chevron { 849 flex: 0 0 auto; width: 9px; height: 9px; margin-bottom: 3px; 850 border-right: 2px solid var(--mel-text-tertiary); border-bottom: 2px solid var(--mel-text-tertiary); 851 transform: rotate(45deg); transition: transform 0.26s cubic-bezier(0.2,0.7,0.3,1); 852 } 853 .mlp-device-faq[open] .mlp-device-faq-chevron { transform: rotate(-135deg); margin-bottom: -3px; border-color: #22D3EE; } 854 .mlp-device-faq[open] { border-color: rgba(34,211,238,0.30); } 855 856 /* Capability visual â real agent tool-call trace (a console, kept dark in 857 both themes because that is how a real trace reads) */ 858 .mlp-device-trace { 859 position: relative; overflow: hidden; border-radius: 28px; 860 border: 1px solid rgba(255,255,255,0.10); 861 background: linear-gradient(180deg, rgba(7,11,26,0.94), rgba(2,6,23,0.97)); 862 box-shadow: 0 34px 110px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06); 863 } 864 .light .mlp-device-trace { border-color: rgba(15,23,42,0.10); box-shadow: 0 30px 80px rgba(15,23,42,0.22); } 865 .mlp-device-trace-glow { position: absolute; inset: -45% -25% auto auto; width: 300px; height: 300px; background: radial-gradient(circle, rgba(34,211,238,0.22), transparent 66%); filter: blur(32px); pointer-events: none; } 866 .mlp-device-trace-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); } 867 .mlp-device-trace-dots { display: inline-flex; gap: 6px; } 868 .mlp-device-trace-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.2); } 869 .mlp-device-trace-dots i:nth-child(1) { background: #FF5F57; } 870 .mlp-device-trace-dots i:nth-child(2) { background: #FEBC2E; } 871 .mlp-device-trace-dots i:nth-child(3) { background: #28C840; } 872 .mlp-device-trace-name { color: rgba(226,232,240,0.60); font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.10em; } 873 .mlp-device-trace-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #22D3EE; font: 800 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; } 874 .mlp-device-trace-live i { width: 7px; height: 7px; border-radius: 50%; background: #22D3EE; box-shadow: 0 0 10px #22D3EE; animation: mlp-live 1.6s ease-in-out infinite; } 875 .mlp-device-trace-body { position: relative; z-index: 1; padding: 16px 18px 18px; display: grid; gap: 9px; } 876 .mlp-device-trace-call { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 11px 13px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.03); } 877 .mlp-device-trace-gutter { color: rgba(148,163,184,0.55); font: 800 11px/1 'JetBrains Mono', monospace; } 878 .mlp-device-trace-line { min-width: 0; display: flex; flex-direction: column; gap: 3px; } 879 .mlp-device-trace-line code { color: #7DE3F4; font: 700 13px/1.3 'JetBrains Mono', ui-monospace, monospace; } 880 .mlp-device-trace-line p { margin: 0; color: rgba(226,232,240,0.66); font-size: 12.5px; line-height: 1.45; } 881 .mlp-device-trace-ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #05140D; background: linear-gradient(135deg, #34D399, #10B981); box-shadow: 0 4px 12px -4px rgba(16,185,129,0.8); } 882 .mlp-device-trace-return { display: flex; align-items: center; gap: 9px; padding: 4px 2px 0; color: rgba(148,163,184,0.7); font-size: 12px; } 883 .mlp-device-trace-done { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; color: #6EE7B7; background: rgba(16,185,129,0.16); border: 1px solid rgba(16,185,129,0.34); font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; } 884 .mlp-device-trace-done svg { color: #34D399; } 885 .mlp-device-trace-cursor { width: 8px; height: 15px; background: #22D3EE; border-radius: 1px; animation: mlp-blink 1.1s steps(1) infinite; } 886 @keyframes mlp-blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } } 887 888 /* Setup â stateful guided checklist (done / current / next) on a spine */ 889 .mlp-device-setup-flow { position: relative; list-style: none; margin: clamp(28px, 5vh, 52px) 0 0; padding: 0; display: grid; gap: 12px; max-width: 780px; } 890 .mlp-device-setup-spine { position: absolute; left: 23px; top: 26px; bottom: 26px; width: 2px; border-radius: 999px; background: linear-gradient(180deg, #10B981 0%, #10B981 38%, #22D3EE 38%, #22D3EE 52%, rgba(148,163,184,0.24) 52%); } 891 .light .mlp-device-setup-spine { background: linear-gradient(180deg, #10B981 0%, #10B981 38%, #22D3EE 38%, #22D3EE 52%, rgba(15,23,42,0.14) 52%); } 892 .mlp-device-setup-node { position: relative; z-index: 1; display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; } 893 .mlp-device-setup-badge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); background: var(--mel-surface-card); color: var(--mel-text-secondary); } 894 .light .mlp-device-setup-badge { border-color: rgba(15,23,42,0.10); } 895 .mlp-device-setup-badge[data-state="done"] { color: #04140C; border: 0; background: linear-gradient(140deg, #34D399, #10B981); box-shadow: 0 8px 18px -8px rgba(16,185,129,0.8); } 896 .mlp-device-setup-badge[data-state="current"] { color: #22D3EE; border-color: rgba(34,211,238,0.5); animation: mlp-setup-pulse 2.4s ease-in-out infinite; } 897 @keyframes mlp-setup-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(34,211,238,0.12); } 50% { box-shadow: 0 0 0 8px rgba(34,211,238,0.05); } } 898 .mlp-device-setup-body { display: flex; flex-direction: column; gap: 3px; padding: 13px 0; border-bottom: 1px solid rgba(148,163,184,0.12); } 899 .light .mlp-device-setup-body { border-color: rgba(15,23,42,0.08); } 900 .mlp-device-setup-node:last-child .mlp-device-setup-body { border-bottom: 0; } 901 .mlp-device-setup-kicker { color: var(--mel-text-tertiary); font: 800 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.16em; } 902 .mlp-device-setup-body p { margin: 0; color: var(--mel-text-secondary); font-size: 14.5px; line-height: 1.5; } 903 904 @media (max-width: 980px) { 905 .mlp-device-loop-rail, .mlp-device-loop-return { display: none; } 906 .mlp-device-security-layout { align-items: start; } 907 } 908 @media (prefers-reduced-motion: reduce) { 909 .mlp-device-orbit-ring, .mlp-device-working-live i, .mlp-device-working-progress span, 910 .mlp-device-trace-live i, .mlp-device-trace-cursor, .mlp-device-setup-badge[data-state="current"] { animation: none !important; } 911 .mlp-device-working-progress span { width: 62%; } 912 } 913 914 /* ===== Sharp, tight titanium phone pair (no floating chips / labels) ===== */ 915 .mlp-device-hero-sig { min-height: min(560px, 66dvh); perspective: 1600px; } 916 .mlp-device-hero-chip, .mlp-device-phone-label { display: none !important; } 917 /* Overlapping, centered pair â the android sits on top of the iPhone's inner edge */ 918 .mlp-device-hero-phone-iphone { left: auto; right: 47%; top: 9%; z-index: 3; } 919 .mlp-device-hero-phone-android { right: auto; left: 47%; top: 0%; z-index: 4; } 920 .mlp-device-phone-shell { 921 width: min(216px, 40vw); 922 padding: 6px; 923 border-radius: 42px; 924 background: linear-gradient(155deg, #4A5163 0%, #262B36 38%, #0C0F16 100%); 925 border: 1px solid rgba(255,255,255,0.16); 926 box-shadow: 927 0 46px 100px rgba(0,0,0,0.55), 928 0 10px 26px rgba(0,0,0,0.42), 929 inset 0 0 0 1.5px rgba(255,255,255,0.05), 930 inset 0 1.5px 0 rgba(255,255,255,0.42), 931 inset 0 -16px 30px rgba(0,0,0,0.55); 932 }
933 .mlp-device-phone-android { 934 border-radius: 32px; 935 background: linear-gradient(155deg, #3A404E 0%, #1B1F28 42%, #05070C 100%); 936 } 937 .mlp-device-phone-btn { 938 width: 2.5px; border-radius: 999px; 939 background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(120,130,150,0.42)); 940 box-shadow: -1px 0 2px rgba(0,0,0,0.42); 941 } 942 .mlp-device-phone-btn-left { left: -2.5px; top: 82px; height: 38px; } 943 .mlp-device-phone-btn-power { left: -2.5px; top: 130px; height: 58px; } 944 .mlp-device-phone-btn-right { right: -2.5px; top: 116px; height: 70px; } 945 .mlp-device-phone-glass { 946 aspect-ratio: 9 / 19.5; 947 border-radius: 36px; 948 border: 1px solid rgba(0,0,0,0.6); 949 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.85), inset 0 0 22px rgba(0,0,0,0.5); 950 } 951 .mlp-device-phone-android .mlp-device-phone-glass { border-radius: 26px; } 952 .mlp-device-dynamic-island { top: 9px; width: 62px; height: 19px; background: #000; box-shadow: 0 2px 8px rgba(0,0,0,0.5); } 953 .mlp-device-punch-hole { top: 10px; width: 10px; height: 10px; background: #000; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 0 0 2px rgba(2,6,23,0.5); } 954 .mlp-device-screen-sheen { background: linear-gradient(150deg, rgba(255,255,255,0.16), transparent 20%, transparent 78%, rgba(255,255,255,0.06)); } 955 .mlp-device-home-indicator { bottom: 7px; width: 84px; height: 4px; background: rgba(255,255,255,0.55); } 956 @media (max-width: 980px) { 957 .mlp-device-hero-sig { min-height: 480px; } 958 .mlp-device-hero-phone-iphone { right: 50%; } 959 .mlp-device-hero-phone-android { left: 50%; } 960 } 961 @media (max-width: 640px) { 962 .mlp-device-hero-sig { min-height: 402px; } 963 .mlp-device-phone-shell { width: min(176px, 46vw); } 964 .mlp-device-hero-phone-iphone { right: 49%; top: 10%; } 965 .mlp-device-hero-phone-android { left: 49%; top: 2%; } 966 } 967 968 /* ============ Problem / "how you use it" beat (post-hero) ============ */ 969 .mlp-device-section-head p.mlp-device-problem-answer { 970 display: flex; 971 align-items: flex-start; 972 gap: 10px; 973 margin-top: 16px; 974 max-width: 62ch; 975 color: var(--mel-text-primary); 976 font-weight: 600; 977 font-size: clamp(0.98rem, 0.34vw + 0.9rem, 1.08rem); 978 line-height: 1.6; 979 } 980 .mlp-device-problem-answer > span { 981 flex: 0 0 8px; 982 width: 8px; 983 height: 8px; 984 margin-top: 8px; 985 border-radius: 50%; 986 background: ${g}; 987 box-shadow: 0 0 18px ${g}; 988 } 989 .mlp-device-problem-how { margin-top: clamp(26px, 4.5vh, 44px); } 990 .mlp-device-problem-kicker { 991 color: var(--mel-text-tertiary); 992 font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace; 993 letter-spacing: 0.16em; 994 text-transform: uppercase; 995 } 996 .mlp-device-problem-steps { 997 display: grid; 998 grid-template-columns: repeat(3, minmax(0, 1fr)); 999 gap: 14px; 1000 margin-top: 14px; 1001 } 1002 .mlp-device-problem-step { 1003 display: flex; 1004 flex-direction: column; 1005 gap: 8px; 1006 border-radius: 22px; 1007 padding: 18px; 1008 border: 1px solid rgba(255,255,255,0.10); 1009 background: rgba(255,255,255,0.055); 1010 backdrop-filter: blur(14px) saturate(140%); 1011 -webkit-backdrop-filter: blur(14px) saturate(140%); 1012 } 1013 .light .mlp-device-problem-step { border-color: rgba(15,23,42,0.08); background: rgba(255,255,255,0.70); } 1014 .mlp-device-problem-step span { 1015 color: ${a}; 1016 font: 900 11px/1 'JetBrains Mono', ui-monospace, monospace; 1017 letter-spacing: 0.14em; 1018 } 1019 .mlp-device-problem-step strong { 1020 color: var(--mel-text-primary); 1021 font: 700 17px/1.2 Poppins, system-ui, sans-serif; 1022 letter-spacing: -0.02em; 1023 } 1024 .mlp-device-problem-step p { 1025 margin: 0; 1026 color: var(--mel-text-secondary); 1027 font-size: 14px; 1028 line-height: 1.55; 1029 } 1030 .mlp-device-problem-link { 1031 display: inline-flex; 1032 align-items: center; 1033 gap: 7px; 1034 margin-top: 16px; 1035 color: ${a}; 1036 text-decoration: none; 1037 font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace; 1038 letter-spacing: 0.14em; 1039 text-transform: uppercase; 1040 } 1041 .mlp-device-problem-link:hover { text-decoration: underline; } 1042 .light .mlp-device-problem-link { color: #0891B2; } 1043 1044 /* ============ Mobile hero: single clean phone (hook swaps markup <768px) ============ */ 1045 .mlp-device-hero-sig.mlp-device-hero-sig-mobile { 1046 min-height: min(400px, 52dvh); 1047 perspective: none; 1048 transform-style: flat; 1049 display: flex; 1050 align-items: center; 1051 justify-content: center; 1052 } 1053 .mlp-device-hero-sig-mobile .mlp-device-hero-phone-solo { 1054 position: relative; 1055 inset: auto; 1056 transform-style: flat; 1057 } 1058 .mlp-device-hero-sig-mobile .mlp-device-phone-shell { width: min(184px, 46vw); } 1059 .mlp-device-hero-sig-mobile .mlp-device-orbit-core { width: 76%; } 1060 1061 /* ============ Mobile adaptation (<=768px) - desktop rules above untouched ============ */ 1062 @media (max-width: 768px) { 1063 .mlp-device-faq-heading { position: static; } 1064 .mlp-device-section-inner, 1065 .mlp-device-article { min-width: 0; } 1066 .mlp-device-article, 1067 .mlp-device-security-layout { grid-template-columns: 1fr; } 1068 .mlp-device-article { gap: 26px; } 1069 .mlp-device-article.reverse .mlp-device-section-head, 1070 .mlp-device-article.reverse .mlp-device-visual-slot { order: initial; } 1071 .mlp-device-visual-slot { width: 100%; max-width: 560px; margin: 0 auto; } 1072 .mlp-device-visual-slot > * { max-width: 100%; } 1073 .mlp-device-loop { grid-template-columns: 1fr; gap: 12px; } 1074 .mlp-device-loop-rail, 1075 .mlp-device-loop-return { display: none; } 1076 .mlp-device-loop-step { min-height: auto; padding: 18px 16px; } 1077 .mlp-device-problem-steps { grid-template-columns: 1fr; gap: 10px; } 1078 .mlp-device-security-layout { align-items: start; gap: 26px; } 1079 } 1080 1081 .mlp-device-mcp { 1082 position: relative; 1083 border-radius: 24px; 1084 padding: clamp(22px, 2.4vw, 30px); 1085 background: var(--mel-surface-card); 1086 border: 1px solid color-mix(in srgb, #8B5CF6 24%, transparent); 1087 box-shadow: 0 34px 90px -60px #8B5CF6; 1088 overflow: hidden; 1089 } 1090 .mlp-device-mcp-glow { 1091 position: absolute; 1092 inset: -55% 28% 58% -28%; 1093 background: radial-gradient(circle at 36% 44%, rgba(139,92,246,0.20), transparent 62%); 1094 pointer-events: none; 1095 } 1096 .mlp-device-mcp-clients { 1097 position: relative; 1098 display: grid; 1099 grid-template-columns: repeat(4, minmax(0, 1fr)); 1100 gap: clamp(8px, 1.4vw, 18px); 1101 } 1102 .mlp-device-mcp-client { 1103 margin: 0; 1104 display: flex; 1105 flex-direction: column; 1106 align-items: center; 1107 gap: 9px; 1108 } 1109 .mlp-device-mcp-client img { 1110 display: block; 1111 width: clamp(38px, 4vw, 50px); 1112 height: clamp(38px, 4vw, 50px); 1113 border-radius: 50%; 1114 object-fit: cover; 1115 box-shadow: 0 10px 26px -16px rgba(0,0,0,0.9); 1116 } 1117 .mlp-device-mcp-client figcaption { 1118 font-family: Poppins, system-ui, sans-serif; 1119 font-size: 12px; 1120 font-weight: 600; 1121 color: var(--mel-text-secondary); 1122 text-align: center; 1123 white-space: nowrap; 1124 } 1125 .mlp-device-mcp-wire { 1126 position: relative; 1127 height: 48px; 1128 display: flex; 1129 justify-content: center; 1130 } 1131 .mlp-device-mcp-wire span { 1132 width: 1px; 1133 height: 100%; 1134 background: linear-gradient(180deg, transparent 0%, #8B5CF6 58%, #22D3EE 100%); 1135 } 1136 .mlp-device-mcp-endpoint { 1137 position: relative; 1138 display: flex; 1139 align-items: center; 1140 gap: 10px; 1141 flex-wrap: wrap; 1142 padding: 12px 14px; 1143 border-radius: 14px; 1144 color: #8B5CF6; 1145 background: color-mix(in srgb, #8B5CF6 9%, transparent); 1146 border: 1px solid color-mix(in srgb, #8B5CF6 26%, transparent); 1147 } 1148 .mlp-device-mcp-endpoint code { 1149 font-family: ui-monospace, "SF Mono", Menlo, monospace; 1150 font-size: clamp(0.84rem, 1vw, 1rem); 1151 color: var(--mel-text-primary);
1152 overflow-wrap: anywhere; 1153 } 1154 .mlp-device-mcp-oauth { 1155 margin-left: auto; 1156 display: inline-flex; 1157 align-items: center; 1158 gap: 5px; 1159 padding: 4px 9px; 1160 border-radius: 999px; 1161 font-family: Poppins, system-ui, sans-serif; 1162 font-size: 11px; 1163 font-weight: 700; 1164 color: #10B981; 1165 background: color-mix(in srgb, #10B981 12%, transparent); 1166 border: 1px solid color-mix(in srgb, #10B981 32%, transparent); 1167 } 1168 .mlp-device-mcp-scopes { 1169 position: relative; 1170 display: flex; 1171 gap: 6px; 1172 flex-wrap: wrap; 1173 margin-top: 12px; 1174 } 1175 .mlp-device-mcp-scopes span { 1176 padding: 4px 9px; 1177 border-radius: 8px; 1178 font-family: ui-monospace, "SF Mono", Menlo, monospace; 1179 font-size: 11.5px; 1180 color: #22D3EE; 1181 background: color-mix(in srgb, #22D3EE 10%, transparent); 1182 border: 1px solid color-mix(in srgb, #22D3EE 26%, transparent); 1183 } 1184 .mlp-device-mcp-note { 1185 position: relative; 1186 margin: 16px 0 0; 1187 font-family: Poppins, system-ui, sans-serif; 1188 font-size: 12.5px; 1189 line-height: 1.55; 1190 color: var(--mel-text-tertiary); 1191 } 1192 @media (max-width: 640px) { 1193 .mlp-product-section { 1194 --mlp-device-sec-pad-y: clamp(44px, 7vh, 60px); 1195 } 1196 .mlp-device-section-head h2 { 1197 max-width: none; 1198 margin-top: 12px; 1199 } 1200 .mlp-device-section-head p { margin-top: 12px; font-size: 15px; line-height: 1.62; } 1201 .mlp-device-section-head p.mlp-device-problem-answer { margin-top: 12px; font-size: 14.5px; } 1202 .mlp-device-problem-how { margin-top: 24px; } 1203 .mlp-device-problem-step { padding: 15px; border-radius: 18px; } 1204 .mlp-device-problem-step strong { font-size: 16px; } 1205 .mlp-device-problem-step p { font-size: 13.5px; } 1206 .mlp-device-hero-sig, 1207 .mlp-device-hero-sig.mlp-device-hero-sig-mobile { min-height: min(360px, 48dvh); } 1208 /* CSS-only fallback for the prerendered dual-phone markup before the 1209 mobile hook hydrates: hide the outer rings + second phone, center 1210 the remaining one. Post-hydration the solo variant takes over. */ 1211 .mlp-device-hero-sig:not(.mlp-device-hero-sig-mobile) .mlp-orbit-r2, 1212 .mlp-device-hero-sig:not(.mlp-device-hero-sig-mobile) .mlp-orbit-r3, 1213 .mlp-device-hero-sig:not(.mlp-device-hero-sig-mobile) .mlp-device-hero-phone-iphone { display: none; } 1214 .mlp-device-hero-sig:not(.mlp-device-hero-sig-mobile) .mlp-device-hero-phone-android { 1215 left: 0; 1216 right: 0; 1217 width: max-content; 1218 margin: 0 auto; 1219 } 1220 .mlp-device-trace-head { padding: 12px 14px; gap: 9px; } 1221 .mlp-device-trace-name { 1222 flex: 1 1 auto; 1223 min-width: 0; 1224 overflow: hidden; 1225 text-overflow: ellipsis; 1226 white-space: nowrap; 1227 } 1228 .mlp-device-trace-body { padding: 12px 12px 14px; gap: 8px; } 1229 .mlp-device-trace-call { grid-template-columns: 18px 1fr auto; gap: 9px; padding: 10px 11px; } 1230 .mlp-device-trace-line code { font-size: 12px; white-space: normal; overflow-wrap: anywhere; } 1231 .mlp-device-trace-line p { font-size: 12px; } 1232 .mlp-device-allowlist { padding: 16px 14px; } 1233 .mlp-device-allowlist-search { height: 42px; padding: 0 14px; gap: 10px; } 1234 .mlp-device-app-row { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 10px; } 1235 .mlp-device-app-icon { width: 40px; height: 40px; border-radius: 12px; } 1236 .mlp-device-app-meta { min-width: 0; } 1237 .mlp-device-app-row p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 1238 .mlp-device-app-state { gap: 7px; font-size: 9px; letter-spacing: 0.08em; } 1239 .mlp-device-toggle { width: 40px; height: 24px; } 1240 .mlp-device-toggle i { width: 16px; height: 16px; } 1241 .mlp-device-toggle.on i { transform: translateX(16px); } 1242 .mlp-device-mobile-app { min-height: 440px; padding: 18px 14px 72px; } 1243 .mlp-device-working-card { width: min(280px, 94%); padding: 16px; } 1244 .mlp-device-working-card strong { font-size: 17px; } 1245 .mlp-device-working-card p { font-size: 12px; } 1246 .mlp-device-working-actions button { height: 36px; font-size: 13px; } 1247 .mlp-device-mobile-bullets { left: 10px; right: 10px; bottom: 12px; gap: 6px; } 1248 .mlp-device-mobile-bullet { padding: 6px 10px; font-size: 11px; } 1249 .mlp-device-setup-node { grid-template-columns: 40px 1fr; gap: 12px; } 1250 .mlp-device-setup-badge { width: 40px; height: 40px; } 1251 .mlp-device-setup-spine { left: 19px; } 1252 .mlp-device-setup-body { padding: 11px 0; } 1253 .mlp-device-setup-body p { font-size: 14px; } 1254 .mlp-device-faq { padding: 15px 16px; border-radius: 18px; } 1255 .mlp-device-faq summary { font-size: 14.5px; gap: 10px; } 1256 .mlp-device-mcp { padding: 18px 15px; border-radius: 20px; } 1257 .mlp-device-mcp-clients { gap: 6px; } 1258 .mlp-device-mcp-client figcaption { font-size: 10.5px; } 1259 .mlp-device-mcp-wire { height: 32px; } 1260 .mlp-device-mcp-endpoint { padding: 11px 12px; gap: 8px; } 1261 .mlp-device-mcp-oauth { margin-left: 0; } 1262 } 1263 `})}const Hi=D.memo(Ae);export{Hi as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.