/** * @name LANDING_CSS * @description Server-rendered CSS for the public SAP MCP homepage. */ export declare const LANDING_CSS = "\n :root {\n color-scheme: dark;\n --bg: #111413;\n --bg-2: #20201e;\n --paper: #d9d4cd;\n --paper-ink: #242320;\n --ink: #f5fbfc;\n --muted: #a8b9bc;\n --subtle: #7e9397;\n --panel: rgba(255, 255, 255, .055);\n --panel-strong: rgba(255, 255, 255, .09);\n --line: rgba(255, 255, 255, .14);\n --line-strong: rgba(40, 216, 232, .44);\n --aqua: #28d8e8;\n --aqua-2: #55f1df;\n --green: #8ce99a;\n --yellow: #f6d365;\n --coral: #ff7666;\n --blue: #86a6ff;\n --radius: 16px;\n --content: 1180px;\n --nav-height: 74px;\n }\n\n * { box-sizing: border-box; }\n img, svg, video, canvas {\n max-width: 100%;\n }\n html { scroll-behavior: smooth; }\n body {\n margin: 0;\n min-height: 100vh;\n font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n color: var(--ink);\n background:\n linear-gradient(rgba(40, 216, 232, .025) 1px, transparent 1px),\n linear-gradient(90deg, rgba(40, 216, 232, .025) 1px, transparent 1px),\n var(--bg);\n background-size: 80px 80px;\n overflow-x: hidden;\n }\n body::before {\n content: \"\";\n position: fixed;\n inset: 0;\n z-index: -1;\n pointer-events: none;\n background:\n radial-gradient(circle at 16% 10%, rgba(40, 216, 232, .12), transparent 30%),\n radial-gradient(circle at 84% 18%, rgba(134, 166, 255, .08), transparent 28%),\n linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%);\n }\n\n a { color: inherit; }\n code, pre {\n max-width: 100%;\n }\n a:focus-visible, button:focus-visible {\n outline: 2px solid var(--aqua);\n outline-offset: 3px;\n }\n\n .skip-link {\n position: fixed;\n left: 16px;\n top: 16px;\n z-index: 100;\n transform: translateY(-150%);\n border: 1px solid var(--line-strong);\n border-radius: 999px;\n padding: 10px 14px;\n background: #061517;\n color: var(--ink);\n }\n .skip-link:focus { transform: translateY(0); }\n\n .site-nav {\n position: sticky;\n top: 12px;\n z-index: 20;\n width: min(calc(100% - 32px), var(--content));\n min-height: var(--nav-height);\n margin: 12px auto 0;\n padding: 10px 12px;\n display: grid;\n grid-template-columns: auto 1fr auto;\n gap: 14px;\n align-items: center;\n border: 1px solid rgba(255, 255, 255, .11);\n border-radius: 999px;\n background: rgba(11, 17, 17, .78);\n box-shadow: 0 18px 44px rgba(0, 0, 0, .28);\n backdrop-filter: blur(18px);\n }\n .mobile-nav-toggle,\n .mobile-nav-backdrop,\n .mobile-nav-panel {\n display: none;\n }\n .brand {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n min-width: 0;\n text-decoration: none;\n }\n .brand > span,\n .nav-menu-link span,\n .download-action span,\n .download-card span,\n .card,\n .metric,\n .feature,\n .bento-card,\n .protocol-card,\n .registry-card {\n min-width: 0;\n }\n .brand img {\n width: 42px;\n height: 42px;\n border-radius: 12px;\n box-shadow: 0 0 0 1px rgba(40, 216, 232, .2);\n }\n .brand strong {\n display: block;\n font-size: 15px;\n line-height: 1.1;\n }\n .brand span {\n display: block;\n color: var(--subtle);\n font-size: 12px;\n }\n .nav-center {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 6px;\n min-width: 0;\n }\n .nav-pill,\n .nav-dropdown summary,\n .nav-actions a,\n .button {\n min-height: 42px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid rgba(255, 255, 255, .12);\n border-radius: 999px;\n padding: 10px 14px;\n color: var(--ink);\n text-decoration: none;\n font-weight: 800;\n font-size: 14px;\n background: rgba(255, 255, 255, .04);\n }\n .nav-pill:hover,\n .nav-dropdown summary:hover,\n .nav-actions a:hover,\n .button:hover {\n border-color: var(--line-strong);\n background: rgba(40, 216, 232, .09);\n }\n .nav-pill.is-active,\n .nav-pill-strong {\n border-color: rgba(40, 216, 232, .28);\n background: rgba(40, 216, 232, .09);\n }\n .nav-pill-strong {\n color: var(--aqua);\n }\n .oobe-nav {\n gap: 8px;\n padding-left: 10px;\n }\n .oobe-nav img {\n width: 24px;\n height: 24px;\n border-radius: 999px;\n box-shadow: 0 0 0 1px rgba(140, 233, 154, .28);\n }\n .nav-dropdown {\n position: relative;\n }\n .nav-dropdown summary {\n gap: 7px;\n cursor: pointer;\n list-style: none;\n user-select: none;\n }\n .nav-dropdown summary::-webkit-details-marker {\n display: none;\n }\n .nav-dropdown[open] summary {\n border-color: var(--line-strong);\n background: rgba(40, 216, 232, .11);\n }\n .nav-dropdown[open] summary span {\n transform: rotate(180deg);\n }\n .nav-dropdown summary span {\n color: var(--aqua);\n transition: transform .18s ease;\n }\n .nav-menu {\n position: absolute;\n top: calc(100% + 12px);\n left: 50%;\n z-index: 40;\n display: grid;\n gap: 8px;\n width: min(420px, calc(100vw - 34px));\n max-height: min(72vh, 560px);\n overflow: auto;\n border: 1px solid rgba(255, 255, 255, .12);\n border-radius: 22px;\n padding: 10px;\n background: rgba(10, 17, 18, .9);\n box-shadow: 0 28px 80px rgba(0, 0, 0, .44);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n transform: translateX(-50%);\n }\n .nav-menu-wide {\n width: min(690px, calc(100vw - 34px));\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .nav-menu-link {\n display: grid;\n grid-template-columns: 42px 1fr;\n gap: 12px;\n align-items: start;\n min-width: 0;\n border: 1px solid rgba(255, 255, 255, .08);\n border-radius: 16px;\n padding: 12px;\n color: var(--ink);\n text-decoration: none;\n background: rgba(255, 255, 255, .04);\n }\n .nav-menu-link:hover {\n border-color: rgba(40, 216, 232, .34);\n background: rgba(40, 216, 232, .075);\n }\n .nav-menu-link span:not(.nav-glyph) {\n min-width: 0;\n }\n .nav-menu-link strong,\n .nav-menu-link small {\n display: block;\n }\n .nav-menu-link strong {\n font-size: 14px;\n line-height: 1.2;\n }\n .nav-menu-link small {\n margin-top: 5px;\n color: var(--subtle);\n font-size: 12px;\n line-height: 1.35;\n }\n .nav-glyph {\n display: grid;\n place-items: center;\n width: 42px;\n height: 42px;\n border: 1px solid rgba(40, 216, 232, .2);\n border-radius: 14px;\n color: var(--aqua);\n background: rgba(40, 216, 232, .08);\n font-weight: 900;\n font-size: 12px;\n }\n .nav-actions {\n display: flex;\n gap: 8px;\n align-items: center;\n min-width: 0;\n }\n .nav-install {\n gap: 8px;\n }\n .install-os {\n display: none;\n width: 20px;\n height: 20px;\n color: #061517;\n }\n .install-os svg {\n width: 20px;\n height: 20px;\n fill: currentColor;\n }\n html[data-os=\"windows\"] .install-os-windows,\n html[data-os=\"macos\"] .install-os-macos,\n html[data-os=\"linux\"] .install-os-linux {\n display: inline-grid;\n place-items: center;\n }\n .button.primary {\n border-color: rgba(40, 216, 232, .58);\n color: #061517;\n background: var(--aqua);\n }\n .mobile-nav-toggle,\n .mobile-nav-close {\n appearance: none;\n border: 1px solid rgba(255, 255, 255, .12);\n color: var(--ink);\n background: rgba(255, 255, 255, .045);\n }\n .mobile-nav-toggle {\n width: 44px;\n height: 44px;\n border-radius: 15px;\n place-items: center;\n gap: 2px;\n padding: 0;\n }\n .mobile-nav-toggle span {\n display: block;\n width: 18px;\n height: 2px;\n border-radius: 99px;\n background: var(--ink);\n transition: transform .18s ease, opacity .18s ease;\n }\n .mobile-nav-close {\n display: grid;\n place-items: center;\n width: 42px;\n height: 42px;\n border-radius: 14px;\n font-size: 28px;\n line-height: 1;\n }\n .mobile-nav-backdrop {\n position: fixed;\n inset: 0;\n z-index: 60;\n background: rgba(0, 0, 0, .48);\n backdrop-filter: blur(5px);\n -webkit-backdrop-filter: blur(5px);\n opacity: 0;\n pointer-events: none;\n transition: opacity .18s ease;\n }\n .mobile-nav-panel {\n position: fixed;\n inset: 10px 10px 10px auto;\n z-index: 70;\n width: min(390px, calc(100vw - 20px));\n border: 1px solid rgba(255, 255, 255, .12);\n border-radius: 26px;\n padding: 14px;\n overflow: auto;\n background:\n linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),\n rgba(8, 16, 17, .94);\n box-shadow: 0 28px 80px rgba(0, 0, 0, .5);\n backdrop-filter: blur(24px);\n -webkit-backdrop-filter: blur(24px);\n transform: translateX(calc(100% + 20px));\n transition: transform .2s cubic-bezier(.2, .8, .2, 1);\n }\n .mobile-nav-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding-bottom: 14px;\n border-bottom: 1px solid rgba(255, 255, 255, .1);\n }\n .mobile-nav-primary {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 9px;\n margin: 14px 0;\n }\n .mobile-nav-primary .primary {\n grid-column: 1 / -1;\n }\n .mobile-nav-group {\n display: grid;\n gap: 8px;\n margin-top: 16px;\n }\n .mobile-nav-group p {\n margin: 0;\n color: var(--aqua);\n font-size: 12px;\n font-weight: 900;\n text-transform: uppercase;\n }\n .mobile-nav-link {\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 12px;\n align-items: center;\n min-width: 0;\n border: 1px solid rgba(255, 255, 255, .09);\n border-radius: 16px;\n padding: 12px;\n color: var(--ink);\n text-decoration: none;\n background: rgba(255, 255, 255, .04);\n }\n .mobile-nav-link:hover {\n border-color: rgba(40, 216, 232, .34);\n background: rgba(40, 216, 232, .075);\n }\n .mobile-nav-link strong,\n .mobile-nav-link small {\n display: block;\n }\n .mobile-nav-link small {\n margin-top: 4px;\n color: var(--subtle);\n font-size: 12px;\n line-height: 1.35;\n }\n .mobile-nav-link b {\n color: var(--aqua);\n }\n html.mobile-nav-open {\n overflow: hidden;\n }\n html.mobile-nav-open .mobile-nav-backdrop {\n opacity: 1;\n pointer-events: auto;\n }\n html.mobile-nav-open .mobile-nav-panel {\n transform: translateX(0);\n }\n html.mobile-nav-open .mobile-nav-toggle span:nth-child(1) {\n transform: translateY(4px) rotate(45deg);\n }\n html.mobile-nav-open .mobile-nav-toggle span:nth-child(2) {\n opacity: 0;\n }\n html.mobile-nav-open .mobile-nav-toggle span:nth-child(3) {\n transform: translateY(-4px) rotate(-45deg);\n }\n .version-pill {\n border: 1px solid rgba(255, 255, 255, .12);\n border-radius: 999px;\n padding: 9px 12px;\n color: var(--muted);\n font-weight: 800;\n font-size: 13px;\n white-space: nowrap;\n }\n\n .runtime-logo-strip {\n width: min(calc(100% - 32px), var(--content));\n margin: 12px auto 0;\n overflow: hidden;\n }\n .runtime-logo-rail {\n position: relative;\n overflow: hidden;\n border: 1px solid rgba(255, 255, 255, .1);\n border-radius: 999px;\n padding: 8px;\n background: rgba(255, 255, 255, .035);\n box-shadow: inset 0 1px 0 rgba(255,255,255,.06);\n mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);\n }\n .runtime-logo-rail div {\n display: flex;\n width: max-content;\n gap: 8px;\n animation: runtimeRail 34s linear infinite;\n }\n .runtime-logo-item {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n min-height: 44px;\n border: 1px solid rgba(40, 216, 232, .16);\n border-radius: 999px;\n padding: 7px 16px 7px 8px;\n color: var(--ink);\n background: rgba(8, 18, 19, .72);\n white-space: nowrap;\n }\n .runtime-logo-item img {\n flex: 0 0 auto;\n width: 30px;\n height: 30px;\n border: 1px solid rgba(40, 216, 232, .24);\n border-radius: 999px;\n background: rgba(40, 216, 232, .08);\n object-fit: contain;\n padding: 2px;\n }\n .runtime-logo-item strong {\n font-size: 13px;\n line-height: 1;\n }\n\n .page-shell {\n width: min(calc(100% - 32px), var(--content));\n margin: 0 auto;\n }\n\n .hero {\n min-height: calc(96svh - var(--nav-height));\n display: grid;\n grid-template-columns: minmax(0, .98fr) minmax(380px, 560px);\n gap: 56px;\n align-items: center;\n padding: 78px 0 52px;\n }\n .hero > * {\n min-width: 0;\n }\n .hero-copy { align-self: center; }\n .eyebrow {\n margin: 0 0 18px;\n color: var(--aqua);\n font-weight: 900;\n font-size: 13px;\n text-transform: uppercase;\n }\n h1, h2, h3, p { margin-top: 0; }\n h1 {\n max-width: 760px;\n margin-bottom: 22px;\n font-size: clamp(56px, 7vw, 108px);\n line-height: .84;\n letter-spacing: 0;\n }\n .lead {\n max-width: 620px;\n color: var(--muted);\n font-size: clamp(17px, 1.7vw, 22px);\n }\n .hero-actions,\n .inline-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n align-items: center;\n margin-top: 30px;\n }\n .micro-copy {\n margin-top: 18px;\n color: var(--subtle);\n font-size: 14px;\n }\n\n .hero-visual {\n position: relative;\n min-height: 620px;\n border: 1px solid rgba(255,255,255,.11);\n border-radius: 34px;\n background:\n linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)),\n radial-gradient(circle at 50% 42%, rgba(40,216,232,var(--hero-glow, .16)), transparent 42%);\n box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 34px 90px rgba(0,0,0,.36);\n overflow: hidden;\n }\n .hero-visual::before {\n content: \"\";\n position: absolute;\n inset: 18px;\n border: 1px solid rgba(255,255,255,.07);\n border-radius: 26px;\n pointer-events: none;\n }\n .terminal-strip {\n position: absolute;\n left: 24px;\n right: 24px;\n top: 24px;\n display: flex;\n align-items: center;\n gap: 8px;\n min-height: 42px;\n border: 1px solid rgba(255,255,255,.09);\n border-radius: 999px;\n padding: 0 14px;\n color: var(--subtle);\n background: rgba(0,0,0,.22);\n }\n .terminal-strip span {\n width: 8px;\n height: 8px;\n border-radius: 999px;\n background: var(--coral);\n }\n .terminal-strip span:nth-child(2) { background: var(--yellow); }\n .terminal-strip span:nth-child(3) { background: var(--green); }\n .terminal-strip code {\n margin-left: auto;\n color: var(--aqua);\n font-size: 12px;\n }\n .orbital-engine {\n position: absolute;\n inset: 86px 26px 124px;\n display: grid;\n place-items: center;\n perspective: 1100px;\n }\n .orbit {\n position: absolute;\n width: min(78%, 390px);\n aspect-ratio: 1;\n border: 1px solid rgba(40,216,232,.24);\n border-radius: 42%;\n transform: rotateX(var(--engine-tilt, 0deg)) rotateZ(var(--orbit-a, 0deg));\n }\n .orbit-b {\n width: min(58%, 300px);\n border-color: rgba(246,211,101,.24);\n transform: rotateX(var(--engine-tilt, 0deg)) rotateZ(var(--orbit-b, 0deg));\n }\n .orbit-c {\n width: min(40%, 220px);\n border-color: rgba(255,118,102,.22);\n transform: rotateX(var(--engine-tilt, 0deg)) rotateZ(var(--orbit-c, 0deg));\n }\n .orbit-core {\n position: relative;\n z-index: 3;\n display: grid;\n place-items: center;\n width: 148px;\n height: 148px;\n border: 1px solid rgba(40,216,232,.45);\n border-radius: 34px;\n color: var(--aqua);\n background: rgba(4, 16, 18, .76);\n box-shadow: 0 0 70px rgba(40,216,232,.16), inset 0 0 44px rgba(40,216,232,.08);\n transform: rotateZ(var(--engine-spin, 0deg));\n }\n .orbit-core img { border-radius: 16px; }\n .orbit-core strong {\n margin-top: 8px;\n font-size: 28px;\n line-height: 1;\n }\n .orbit-chip {\n position: absolute;\n z-index: 4;\n width: 118px;\n border: 1px solid rgba(255,255,255,.12);\n border-radius: 16px;\n padding: 12px;\n background: rgba(8, 16, 17, .78);\n box-shadow: 0 20px 40px rgba(0,0,0,.24);\n }\n .orbit-chip b,\n .orbit-chip span { display: block; }\n .orbit-chip b { color: var(--ink); }\n .orbit-chip span { color: var(--subtle); font-size: 12px; }\n .chip-a { left: calc(12% - var(--chip-spread, 0px)); top: 22%; transform: rotate(-12deg); }\n .chip-b { right: calc(10% - var(--chip-spread, 0px)); top: 24%; transform: rotate(12deg); }\n .chip-c { left: calc(13% - var(--chip-spread, 0px)); bottom: 18%; transform: rotate(10deg); }\n .chip-d { right: calc(12% - var(--chip-spread, 0px)); bottom: 16%; transform: rotate(-10deg); }\n .hero-bento-mini {\n position: absolute;\n left: 24px;\n right: 24px;\n bottom: 24px;\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 10px;\n }\n .hero-bento-mini div {\n border: 1px solid rgba(255,255,255,.1);\n border-radius: 16px;\n padding: 14px;\n background: rgba(255,255,255,.04);\n }\n .hero-bento-mini span,\n .hero-bento-mini strong { display: block; }\n .hero-bento-mini span {\n color: var(--subtle);\n font-size: 11px;\n font-weight: 900;\n text-transform: uppercase;\n }\n .hero-bento-mini strong {\n margin-top: 4px;\n font-size: 20px;\n }\n\n .bento-strip {\n padding: 34px 0 96px;\n }\n .bento-stack {\n display: grid;\n grid-template-columns: minmax(0, .92fr) minmax(480px, .68fr);\n gap: 58px;\n align-items: start;\n }\n .bento-stack > * {\n min-width: 0;\n }\n .bento-sticky-copy {\n position: sticky;\n top: 112px;\n min-height: min(74vh, 760px);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 4px 0 10px;\n }\n .bento-sticky-copy h2 {\n max-width: 720px;\n margin: 0 0 18px;\n font-size: clamp(52px, 5.8vw, 104px);\n line-height: .88;\n }\n .bento-sticky-copy p:last-child {\n max-width: 620px;\n margin-bottom: 0;\n color: var(--muted);\n font-size: clamp(18px, 1.6vw, 24px);\n }\n .bento-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n grid-auto-rows: minmax(260px, auto);\n gap: 14px;\n }\n .bento-card {\n position: relative;\n grid-column: span 1;\n min-height: 260px;\n border: 1px solid rgba(255,255,255,.11);\n border-radius: 26px;\n padding: 22px;\n overflow: hidden;\n background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));\n }\n .bento-card::after {\n content: \"\";\n position: absolute;\n right: -36px;\n bottom: -48px;\n width: 150px;\n height: 150px;\n border-radius: 44px;\n opacity: .14;\n background: var(--aqua);\n transform: rotate(16deg);\n }\n .bento-card[data-tone=\"coral\"]::after { background: var(--coral); }\n .bento-card[data-tone=\"yellow\"]::after { background: var(--yellow); }\n .bento-card[data-tone=\"green\"]::after { background: var(--green); }\n .bento-card[data-tone=\"blue\"]::after { background: var(--blue); }\n .bento-card.wide { grid-column: span 2; }\n .bento-card.full {\n grid-column: 1 / -1;\n min-height: 220px;\n }\n .bento-card.tall { grid-column: span 2; grid-row: span 2; }\n .bento-card span {\n color: var(--aqua);\n font-size: 12px;\n font-weight: 900;\n text-transform: uppercase;\n }\n .bento-card h3 {\n margin: 14px 0 10px;\n font-size: clamp(24px, 3vw, 40px);\n line-height: .96;\n }\n .bento-card p { color: var(--muted); }\n .bento-card code {\n display: block;\n margin: 18px 0;\n overflow-wrap: anywhere;\n color: var(--aqua);\n }\n\n .machine-section {\n position: relative;\n width: 100vw;\n min-height: 180vh;\n margin-left: calc(50% - 50vw);\n padding: 110px max(16px, calc((100vw - var(--content)) / 2));\n border-top: 1px solid rgba(255, 255, 255, .08);\n border-bottom: 1px solid rgba(255, 255, 255, .08);\n background:\n linear-gradient(rgba(40, 216, 232, .022) 1px, transparent 1px),\n linear-gradient(90deg, rgba(40, 216, 232, .022) 1px, transparent 1px),\n #0c1111;\n background-size: 80px 80px;\n color: var(--ink);\n overflow: clip;\n }\n .machine-copy {\n position: sticky;\n top: 112px;\n z-index: 2;\n width: min(430px, 100%);\n }\n .machine-copy h2 {\n margin: 0 0 16px;\n font-size: clamp(36px, 5vw, 72px);\n line-height: .9;\n }\n .machine-copy p { color: var(--muted); }\n .machine-stage {\n position: sticky;\n top: 90px;\n height: min(76vh, 760px);\n margin-left: min(460px, 42vw);\n display: grid;\n place-items: center;\n }\n .machine-core {\n position: relative;\n z-index: 4;\n display: grid;\n place-items: center;\n width: 270px;\n height: 190px;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: var(--aqua);\n box-shadow: none;\n transform: rotate(var(--machine-rotate, 0deg));\n }\n .machine-logo-pair {\n display: flex;\n align-items: center;\n gap: 22px;\n filter: drop-shadow(0 28px 50px rgba(0,0,0,.36));\n }\n .machine-logo-pair img {\n width: 100px;\n height: 100px;\n border-radius: 25px;\n }\n .solana-mark {\n width: 112px;\n height: auto;\n color: var(--ink);\n }\n .solana-mark path {\n fill: rgba(245, 251, 252, .94);\n }\n .machine-core-ring {\n position: absolute;\n inset: -52px;\n border: 1px solid rgba(40,216,232,.14);\n border-radius: 50%;\n }\n .machine-part {\n position: absolute;\n z-index: 3;\n width: min(250px, 36vw);\n border: 1px solid rgba(255,255,255,.12);\n border-radius: 20px;\n padding: 18px;\n background: rgba(255,255,255,.055);\n box-shadow: 0 20px 40px rgba(0,0,0,.18);\n opacity: var(--machine-fade, .2);\n }\n .machine-part span {\n color: var(--aqua);\n font-weight: 900;\n font-size: 12px;\n }\n .machine-part strong {\n display: block;\n margin: 6px 0;\n font-size: 22px;\n }\n .machine-part p {\n margin: 0;\n color: var(--muted);\n overflow-wrap: anywhere;\n }\n .part-remote { transform: translate(calc(-230px - var(--machine-open, 0px)), -180px); }\n .part-policy { transform: translate(calc(220px + var(--machine-open, 0px)), -160px); }\n .part-payments { transform: translate(calc(-230px - var(--machine-open, 0px)), 170px); }\n .part-signer { transform: translate(calc(230px + var(--machine-open, 0px)), 160px); }\n .machine-rail {\n position: absolute;\n width: min(780px, 72vw);\n height: 1px;\n background: rgba(40,216,232,.2);\n transform: rotate(24deg) scaleX(var(--machine-rail-scale, .4));\n }\n .rail-b { transform: rotate(-24deg) scaleX(var(--machine-rail-scale, .4)); }\n\n .section {\n padding: 86px 0;\n }\n .section.paper {\n width: 100vw;\n margin-left: calc(50% - 50vw);\n padding-left: max(16px, calc((100vw - var(--content)) / 2));\n padding-right: max(16px, calc((100vw - var(--content)) / 2));\n color: var(--paper-ink);\n background: var(--paper);\n }\n .section-head {\n display: grid;\n gap: 10px;\n max-width: 740px;\n margin-bottom: 28px;\n }\n .section h2 {\n margin-bottom: 0;\n font-size: 44px;\n line-height: 1;\n letter-spacing: 0;\n }\n .section-head p {\n color: var(--muted);\n font-size: 18px;\n }\n .paper .section-head p { color: #67615a; }\n .paper .feature {\n border-color: rgba(36, 35, 32, .16);\n background: rgba(36, 35, 32, .055);\n }\n .paper .feature p { color: #67615a; }\n\n .protocol-surface {\n position: relative;\n width: 100vw;\n margin-left: calc(50% - 50vw);\n padding-left: max(16px, calc((100vw - var(--content)) / 2));\n padding-right: max(16px, calc((100vw - var(--content)) / 2));\n border-top: 1px solid rgba(255, 255, 255, .08);\n border-bottom: 1px solid rgba(255, 255, 255, .08);\n background:\n radial-gradient(circle at 20% 10%, rgba(40, 216, 232, .13), transparent 30%),\n linear-gradient(rgba(40, 216, 232, .022) 1px, transparent 1px),\n linear-gradient(90deg, rgba(40, 216, 232, .022) 1px, transparent 1px),\n #0c1111;\n background-size: auto, 80px 80px, 80px 80px;\n color: var(--ink);\n }\n .protocol-surface .section-head {\n max-width: 820px;\n }\n .protocol-bento {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n grid-auto-rows: minmax(260px, auto);\n gap: 14px;\n }\n .protocol-card {\n position: relative;\n grid-column: span 1;\n min-height: 260px;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n border: 1px solid rgba(255, 255, 255, .11);\n border-radius: 28px;\n padding: 22px;\n overflow: hidden;\n background:\n linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.032)),\n rgba(255,255,255,.035);\n box-shadow: inset 0 1px 0 rgba(255,255,255,.06);\n animation: surfaceRise .34s cubic-bezier(0, 0, .2, 1) both, bentoFloat 14s ease-in-out infinite;\n }\n .protocol-card:nth-child(2n) { animation-delay: .06s, -4s; }\n .protocol-card:nth-child(3n) { animation-delay: .12s, -8s; }\n .protocol-card::before {\n content: \"\";\n position: absolute;\n inset: auto -54px -68px auto;\n width: 180px;\n height: 180px;\n border-radius: 54px;\n background: linear-gradient(135deg, rgba(40,216,232,.2), rgba(140,233,154,.06));\n transform: rotate(18deg);\n opacity: .1;\n }\n .protocol-card.wide { grid-column: span 2; }\n .protocol-card.tall { grid-column: span 1; grid-row: span 2; }\n .protocol-sap {\n min-height: 534px;\n }\n .protocol-index {\n position: absolute;\n top: 18px;\n left: 18px;\n display: grid;\n place-items: center;\n width: 42px;\n height: 42px;\n border: 1px solid rgba(255,255,255,.13);\n border-radius: 999px;\n color: var(--muted);\n background: rgba(255,255,255,.045);\n font-size: 12px;\n font-weight: 900;\n }\n .protocol-logo-rail {\n position: absolute;\n top: 18px;\n right: 18px;\n width: min(270px, 48%);\n overflow: hidden;\n mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);\n z-index: 2;\n }\n .protocol-logo-rail div {\n display: flex;\n width: max-content;\n gap: 8px;\n animation: logoRail 22s linear infinite;\n }\n .protocol-logo-rail span {\n display: grid;\n place-items: center;\n width: 42px;\n height: 42px;\n border: 1px solid rgba(255,255,255,.12);\n border-radius: 999px;\n color: rgba(245,251,252,.9);\n background: rgba(255,255,255,.055);\n backdrop-filter: blur(10px);\n }\n .protocol-logo-rail img {\n width: 28px;\n height: 28px;\n border-radius: 999px;\n object-fit: cover;\n }\n .protocol-avatar {\n position: absolute;\n top: 18px;\n right: 18px;\n display: grid;\n place-items: center;\n width: 44px;\n height: 44px;\n border: 1px solid rgba(255,255,255,.1);\n border-radius: 14px;\n background: rgba(255,255,255,.045);\n box-shadow: inset 0 1px 0 rgba(255,255,255,.06);\n z-index: 2;\n }\n .protocol-avatar .solana-mark {\n width: 30px;\n }\n .sap-avatar {\n width: 56px;\n height: 56px;\n border-radius: 18px;\n background: rgba(40,216,232,.06);\n }\n .sap-avatar img {\n width: 40px;\n height: 40px;\n border-radius: 12px;\n }\n .protocol-card strong,\n .protocol-card p {\n position: relative;\n z-index: 1;\n }\n .protocol-card strong {\n display: block;\n max-width: 360px;\n margin-bottom: 10px;\n font-size: clamp(24px, 3vw, 42px);\n line-height: .96;\n }\n .protocol-card p {\n max-width: 460px;\n margin-bottom: 0;\n color: var(--muted);\n }\n @keyframes bentoFloat {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-4px); }\n }\n @keyframes surfaceRise {\n from {\n opacity: 0;\n filter: blur(8px);\n }\n to {\n opacity: 1;\n filter: blur(0);\n }\n }\n @keyframes logoRail {\n from { transform: translateX(0); }\n to { transform: translateX(-50%); }\n }\n @keyframes runtimeRail {\n from { transform: translateX(0); }\n to { transform: translateX(-33.333%); }\n }\n\n .registry-section {\n padding-top: 94px;\n }\n .registry-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 14px;\n }\n .registry-card {\n position: relative;\n display: grid;\n grid-template-columns: 74px 1fr auto;\n gap: 16px;\n align-items: center;\n min-height: 154px;\n border: 1px solid rgba(255,255,255,.11);\n border-radius: 28px;\n padding: 22px;\n color: var(--ink);\n text-decoration: none;\n overflow: hidden;\n background:\n linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.032)),\n rgba(255,255,255,.04);\n animation: surfaceRise .34s cubic-bezier(0, 0, .2, 1) both;\n transition: border-color .18s ease, background .18s ease, transform .18s ease;\n }\n .registry-card:hover {\n border-color: var(--line-strong);\n background: rgba(40,216,232,.075);\n transform: translateY(-2px);\n }\n .registry-logo {\n display: grid;\n place-items: center;\n width: 74px;\n height: 74px;\n border: 1px solid rgba(40,216,232,.24);\n border-radius: 22px;\n color: var(--aqua);\n background: rgba(40,216,232,.08);\n font-weight: 950;\n }\n .registry-logo img {\n width: 44px;\n height: 44px;\n object-fit: contain;\n }\n .registry-copy {\n display: grid;\n gap: 6px;\n min-width: 0;\n }\n .registry-copy strong {\n font-size: clamp(24px, 3vw, 38px);\n line-height: 1;\n }\n .registry-copy small {\n color: var(--muted);\n font-size: 15px;\n line-height: 1.45;\n }\n .registry-status {\n align-self: start;\n border: 1px solid rgba(140,233,154,.28);\n border-radius: 999px;\n padding: 8px 10px;\n color: var(--green);\n background: rgba(140,233,154,.08);\n font-size: 12px;\n font-weight: 900;\n }\n\n .metric-grid,\n .feature-grid,\n .install-grid,\n .setup-grid,\n .endpoint-grid,\n .download-grid {\n display: grid;\n gap: 14px;\n }\n .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n .install-grid { grid-template-columns: 1.15fr .85fr; }\n .setup-grid { grid-template-columns: minmax(0, .95fr) minmax(380px, 1.05fr); }\n .endpoint-grid { grid-template-columns: 1.35fr .65fr; }\n .download-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n\n .card,\n .metric,\n .feature,\n .download-card,\n .code-block {\n border: 1px solid var(--line);\n border-radius: var(--radius);\n background: var(--panel);\n }\n .card,\n .feature {\n padding: 22px;\n }\n .card,\n .metric,\n .feature,\n .bento-card,\n .download-card,\n .doc-tile {\n overflow-wrap: anywhere;\n }\n .metric {\n padding: 20px;\n }\n .metric span,\n .feature span,\n .download-card > span:not(.os-mark) > span {\n display: block;\n color: var(--subtle);\n font-size: 12px;\n font-weight: 900;\n text-transform: uppercase;\n }\n .metric strong {\n display: block;\n margin-top: 6px;\n font-size: 48px;\n line-height: 1;\n }\n .metric p,\n .feature p,\n .card p {\n color: var(--muted);\n }\n .feature strong {\n display: block;\n margin: 8px 0;\n font-size: 21px;\n }\n .feature[data-tone=\"coral\"] span { color: var(--coral); }\n .feature[data-tone=\"yellow\"] span { color: var(--yellow); }\n .feature[data-tone=\"green\"] span { color: var(--green); }\n .feature[data-tone=\"blue\"] span { color: var(--blue); }\n .feature[data-tone=\"aqua\"] span { color: var(--aqua); }\n\n .step-list {\n display: grid;\n gap: 12px;\n margin: 18px 0 0;\n padding: 0;\n list-style: none;\n }\n .step-list li {\n display: grid;\n grid-template-columns: 34px 1fr;\n gap: 12px;\n align-items: start;\n min-width: 0;\n }\n .step-list b {\n display: grid;\n place-items: center;\n width: 34px;\n height: 34px;\n border: 1px solid var(--line-strong);\n border-radius: 999px;\n color: var(--aqua);\n }\n .step-list code,\n .code-block code {\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n word-break: break-word;\n }\n .code-block {\n margin-top: 14px;\n padding: 16px;\n overflow: auto;\n max-width: 100%;\n color: #d8faff;\n background: rgba(0, 0, 0, .34);\n }\n .command-stack {\n display: grid;\n gap: 12px;\n margin-top: 18px;\n }\n .command-stack > div > span {\n display: block;\n margin-bottom: 8px;\n color: var(--subtle);\n font-size: 12px;\n font-weight: 900;\n text-transform: uppercase;\n }\n .download-actions,\n .step-downloads {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 10px;\n margin-top: 18px;\n }\n .step-downloads {\n margin-top: 12px;\n }\n .download-action {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 12px;\n align-items: center;\n min-width: 0;\n border: 1px solid var(--line);\n border-radius: 16px;\n padding: 12px;\n color: var(--ink);\n text-decoration: none;\n background: rgba(255, 255, 255, .045);\n transition: border-color .18s ease, background .18s ease, transform .18s ease;\n }\n .download-action:hover {\n border-color: var(--line-strong);\n background: rgba(40, 216, 232, .08);\n transform: translateY(-2px);\n }\n .download-action .os-mark {\n width: 44px;\n height: 44px;\n border-radius: 14px;\n }\n .download-action .os-mark svg {\n width: 26px;\n height: 26px;\n }\n .download-action span:last-child {\n display: grid;\n gap: 2px;\n min-width: 0;\n }\n .download-action strong,\n .download-action small {\n display: block;\n }\n .download-action small {\n color: var(--subtle);\n font-size: 12px;\n }\n .download-card {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 14px;\n align-items: center;\n min-height: 112px;\n padding: 16px;\n text-decoration: none;\n transition: border-color .18s ease, background .18s ease, transform .18s ease;\n }\n .download-card:hover {\n border-color: var(--line-strong);\n background: rgba(40, 216, 232, .08);\n transform: translateY(-2px);\n }\n .os-mark {\n display: grid;\n place-items: center;\n width: 54px;\n height: 54px;\n border-radius: 16px;\n color: var(--aqua);\n background: rgba(40, 216, 232, .11);\n box-shadow: inset 0 0 0 1px rgba(40, 216, 232, .22);\n }\n .os-mark svg {\n width: 30px;\n height: 30px;\n fill: currentColor;\n }\n .os-macos { color: var(--aqua-2); }\n .os-linux { color: var(--green); }\n .os-windows { color: #3ed7ff; }\n .download-card > span:last-child {\n display: grid;\n gap: 3px;\n }\n .download-card strong {\n display: block;\n font-size: 20px;\n }\n\n .docs-launchpad {\n position: relative;\n padding: 94px 0;\n }\n .docs-launchpad h2 {\n max-width: 740px;\n margin: 0 0 26px;\n font-size: clamp(36px, 5vw, 72px);\n line-height: .9;\n }\n .docs-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 12px;\n }\n .doc-tile {\n display: grid;\n grid-template-columns: 12px 1fr auto;\n gap: 14px;\n align-items: center;\n min-height: 74px;\n border: 1px solid rgba(255,255,255,.11);\n border-radius: 18px;\n padding: 18px;\n color: var(--ink);\n text-decoration: none;\n background: rgba(255,255,255,.045);\n transition: border-color .18s ease, background .18s ease, transform .18s ease;\n }\n .doc-tile:hover {\n border-color: var(--line-strong);\n background: rgba(40,216,232,.08);\n transform: translateY(-2px);\n }\n .doc-tile > span {\n width: 9px;\n height: 9px;\n border-radius: 999px;\n background: var(--aqua);\n }\n .doc-tile[data-tone=\"coral\"] > span { background: var(--coral); }\n .doc-tile[data-tone=\"yellow\"] > span { background: var(--yellow); }\n .doc-tile[data-tone=\"green\"] > span { background: var(--green); }\n .doc-tile[data-tone=\"blue\"] > span { background: var(--blue); }\n .doc-tile b {\n color: var(--subtle);\n }\n\n .timeline {\n position: relative;\n display: grid;\n gap: 16px;\n margin-top: 20px;\n }\n .timeline::before {\n content: \"\";\n position: absolute;\n left: 16px;\n top: 8px;\n bottom: 8px;\n width: 1px;\n background: rgba(40, 216, 232, .3);\n }\n .timeline-item {\n position: relative;\n display: grid;\n grid-template-columns: 34px 1fr;\n gap: 14px;\n }\n .timeline-item b {\n z-index: 1;\n display: grid;\n place-items: center;\n width: 34px;\n height: 34px;\n border-radius: 999px;\n color: #061517;\n background: var(--aqua);\n }\n .timeline-item p { margin-bottom: 0; }\n .endpoint-list {\n display: grid;\n gap: 10px;\n margin-top: 20px;\n }\n .endpoint-row {\n display: grid;\n grid-template-columns: 54px minmax(0, 1fr);\n gap: 12px;\n align-items: center;\n min-width: 0;\n }\n .method-badge {\n display: inline-grid;\n place-items: center;\n min-width: 46px;\n height: 26px;\n border: 1px solid rgba(40, 216, 232, .28);\n border-radius: 999px;\n padding: 0 9px;\n color: var(--aqua);\n font-size: 10px;\n font-weight: 900;\n line-height: 1;\n }\n .method-post {\n color: var(--green);\n border-color: rgba(140, 233, 154, .32);\n }\n .endpoint-row a {\n min-width: 0;\n overflow-wrap: anywhere;\n }\n\n .footer {\n padding: 70px 0 50px;\n color: var(--muted);\n }\n .footer-grid {\n display: grid;\n grid-template-columns: 1.1fr repeat(3, minmax(0, .7fr));\n gap: 14px;\n border-top: 1px solid var(--line);\n padding-top: 24px;\n }\n .footer a {\n display: block;\n padding: 7px 0;\n color: var(--muted);\n text-decoration: none;\n }\n .footer a:hover { color: var(--aqua); }\n\n @media (prefers-reduced-motion: reduce) {\n html { scroll-behavior: auto; }\n .download-card,\n .doc-tile,\n .protocol-card,\n .protocol-logo-rail div,\n .runtime-logo-rail div,\n .registry-card {\n animation: none;\n transition: none;\n }\n }\n\n @media (max-width: 980px) {\n .site-nav {\n grid-template-columns: 1fr;\n align-items: stretch;\n border-radius: 28px;\n }\n .nav-center {\n justify-content: stretch;\n overflow-x: auto;\n padding-bottom: 2px;\n scrollbar-width: none;\n }\n .nav-center::-webkit-scrollbar { display: none; }\n .nav-center > * {\n flex: 0 0 auto;\n }\n .nav-menu {\n left: 0;\n transform: none;\n }\n .nav-menu-wide {\n grid-template-columns: 1fr;\n }\n .nav-actions { justify-content: space-between; }\n .hero {\n grid-template-columns: 1fr;\n padding-top: 56px;\n }\n .hero-visual {\n min-height: 540px;\n }\n h1 { font-size: 52px; }\n .bento-stack,\n .bento-grid {\n grid-template-columns: 1fr;\n }\n .bento-sticky-copy {\n position: relative;\n top: auto;\n order: -1;\n min-height: 0;\n }\n .bento-card,\n .bento-card.wide,\n .bento-card.full,\n .bento-card.tall {\n grid-column: auto;\n grid-row: auto;\n }\n .protocol-bento {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .registry-grid {\n grid-template-columns: 1fr;\n }\n .protocol-card,\n .protocol-card.wide,\n .protocol-card.tall {\n grid-column: auto;\n grid-row: auto;\n }\n .protocol-sap {\n min-height: 360px;\n }\n .machine-section {\n min-height: auto;\n padding-top: 74px;\n padding-bottom: 74px;\n }\n .machine-copy,\n .machine-stage {\n position: relative;\n top: auto;\n }\n .machine-copy {\n width: 100%;\n max-width: 680px;\n }\n .machine-stage {\n height: auto;\n min-height: 680px;\n margin: 36px 0 0;\n }\n .machine-part {\n width: min(230px, 34vw);\n }\n .docs-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .metric-grid,\n .feature-grid,\n .install-grid,\n .setup-grid,\n .endpoint-grid,\n .footer-grid {\n grid-template-columns: 1fr;\n }\n }\n\n @media (max-width: 640px) {\n .page-shell,\n .site-nav,\n .runtime-logo-strip {\n width: min(calc(100% - 24px), var(--content));\n }\n .site-nav {\n grid-template-columns: 1fr auto;\n align-items: center;\n top: 8px;\n margin-top: 8px;\n padding: 10px;\n border-radius: 22px;\n gap: 10px;\n }\n .nav-center,\n .nav-actions {\n display: none;\n }\n .mobile-nav-toggle,\n .mobile-nav-backdrop,\n .mobile-nav-panel {\n display: grid;\n }\n .mobile-nav-backdrop {\n display: block;\n }\n .mobile-nav-panel {\n display: block;\n }\n .brand img {\n width: 38px;\n height: 38px;\n border-radius: 11px;\n }\n .brand strong {\n font-size: 14px;\n }\n .brand span span {\n font-size: 11px;\n }\n .nav-pill,\n .nav-dropdown summary,\n .nav-actions a,\n .button {\n min-height: 40px;\n padding: 9px 12px;\n font-size: 13px;\n }\n .version-pill {\n padding: 8px 10px;\n font-size: 12px;\n }\n .nav-menu {\n width: calc(100vw - 28px);\n max-height: min(68vh, 480px);\n border-radius: 18px;\n }\n .runtime-logo-rail {\n border-radius: 999px;\n padding: 7px;\n mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);\n }\n .runtime-logo-rail div {\n width: max-content;\n flex-wrap: nowrap;\n animation: runtimeRail 30s linear infinite;\n }\n .runtime-logo-item {\n flex: 0 0 auto;\n justify-content: flex-start;\n min-height: 38px;\n padding: 6px 13px 6px 7px;\n font-size: 13px;\n }\n .runtime-logo-item img {\n width: 26px;\n height: 26px;\n }\n .runtime-logo-item strong {\n font-size: 12px;\n }\n h1 {\n max-width: 12ch;\n font-size: 42px;\n line-height: .92;\n }\n .section h2 { font-size: 34px; }\n .lead { font-size: 18px; }\n .hero {\n min-height: auto;\n gap: 34px;\n padding-bottom: 44px;\n }\n .hero-actions .button,\n .inline-actions .button {\n width: 100%;\n }\n .hero-visual {\n min-height: 410px;\n border-radius: 24px;\n }\n .terminal-strip {\n left: 14px;\n right: 14px;\n top: 14px;\n }\n .terminal-strip code {\n max-width: 170px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .orbital-engine {\n inset: 76px 10px 104px;\n }\n .orbit {\n width: min(66%, 280px);\n }\n .orbit-b {\n width: min(50%, 220px);\n }\n .orbit-c {\n width: min(34%, 160px);\n }\n .orbit-core {\n width: 112px;\n height: 112px;\n border-radius: 26px;\n }\n .orbit-core img {\n width: 42px;\n height: 42px;\n border-radius: 13px;\n }\n .orbit-core strong {\n font-size: 22px;\n }\n .orbit-chip {\n display: none;\n }\n .hero-bento-mini {\n left: 14px;\n right: 14px;\n bottom: 14px;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 8px;\n }\n .hero-bento-mini div {\n border-radius: 13px;\n padding: 10px;\n }\n .hero-bento-mini span {\n font-size: 9px;\n }\n .hero-bento-mini strong {\n font-size: 18px;\n }\n .bento-header h2,\n .docs-launchpad h2,\n .machine-copy h2,\n .bento-sticky-copy h2 {\n font-size: 38px;\n line-height: .95;\n }\n .bento-sticky-copy {\n padding-bottom: 0;\n }\n .bento-card,\n .protocol-card {\n min-height: 230px;\n border-radius: 22px;\n padding: 18px;\n }\n .bento-card h3,\n .protocol-card strong {\n font-size: 30px;\n line-height: 1;\n }\n .machine-stage {\n display: grid;\n grid-template-columns: 1fr;\n gap: 12px;\n min-height: 0;\n place-items: stretch;\n }\n .machine-core {\n order: -1;\n justify-self: center;\n width: 100%;\n height: auto;\n min-height: 136px;\n }\n .machine-core-ring,\n .machine-rail {\n display: none;\n }\n .machine-part {\n position: relative;\n width: 100%;\n opacity: 1;\n transform: none !important;\n }\n .download-grid,\n .download-actions,\n .step-downloads,\n .docs-grid,\n .protocol-bento,\n .registry-card {\n grid-template-columns: 1fr;\n }\n .registry-card {\n grid-template-columns: 56px 1fr;\n border-radius: 22px;\n }\n .registry-logo {\n width: 56px;\n height: 56px;\n border-radius: 18px;\n }\n .registry-logo img {\n width: 34px;\n height: 34px;\n }\n .registry-status {\n grid-column: 1 / -1;\n }\n .protocol-logo-rail {\n width: min(210px, 54%);\n }\n .protocol-logo-rail span {\n width: 36px;\n height: 36px;\n }\n .protocol-logo-rail img {\n width: 24px;\n height: 24px;\n }\n .protocol-avatar {\n width: 40px;\n height: 40px;\n border-radius: 12px;\n }\n .protocol-avatar .solana-mark {\n width: 28px;\n }\n .sap-avatar {\n width: 48px;\n height: 48px;\n border-radius: 16px;\n }\n .sap-avatar img {\n width: 34px;\n height: 34px;\n border-radius: 10px;\n }\n .registry-status {\n justify-self: start;\n }\n .metric strong { font-size: 40px; }\n .card,\n .feature,\n .metric { padding: 18px; }\n .download-card {\n min-height: 96px;\n }\n .endpoint-row {\n grid-template-columns: 44px minmax(0, 1fr);\n gap: 9px;\n }\n .method-badge {\n min-width: 40px;\n height: 24px;\n padding: 0 7px;\n font-size: 9px;\n }\n .footer {\n padding: 48px 0 34px;\n font-size: 14px;\n }\n .footer-grid {\n gap: 20px;\n padding-top: 18px;\n }\n .footer strong {\n font-size: 15px;\n }\n .footer p {\n margin-bottom: 0;\n font-size: 14px;\n line-height: 1.45;\n }\n .footer a {\n padding: 4px 0;\n font-size: 14px;\n line-height: 1.35;\n }\n }\n\n @media (max-width: 420px) {\n .hero-actions,\n .inline-actions {\n gap: 8px;\n }\n h1 {\n font-size: 36px;\n }\n .lead {\n font-size: 16px;\n }\n .hero-visual {\n min-height: 388px;\n }\n .terminal-strip code {\n max-width: 138px;\n }\n .section {\n padding: 64px 0;\n }\n .machine-section {\n padding-left: 12px;\n padding-right: 12px;\n }\n .download-action,\n .download-card {\n grid-template-columns: 42px 1fr;\n }\n .download-action .os-mark,\n .os-mark {\n width: 42px;\n height: 42px;\n border-radius: 13px;\n }\n }\n"; //# sourceMappingURL=styles.d.ts.map