@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink: #0c1a31; --midnight: #071426; --panel: #102442; --muted: #9eb0c9; --line: rgba(202, 225, 255, .15); --paper: #f5f8fc; --cyan: #39d7ea; --violet: #9171ff; --emerald: #37e0ac; --amber: #ffc66e; --shadow: 0 24px 70px rgba(0, 11, 31, .18); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope, Arial, sans-serif; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
.shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.skip-link { position: absolute; left: -999px; top: 10px; z-index: 20; border-radius: 8px; background: white; padding: 10px 14px; color: #071426; font-weight: 700; }
.skip-link:focus { left: 10px; }
.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid rgba(10, 32, 65, .08); background: rgba(249, 251, 255, .88); backdrop-filter: blur(16px); }
.nav-wrap, .footer-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 24px; }
.brand { display: inline-flex; min-width: 0; align-items: center; gap: 11px; }
.brand-mark { display: grid; width: 42px; height: 42px; flex: 0 0 42px; overflow: hidden; place-items: center; border: 1px solid #cfdae8; border-radius: 11px; background: white; box-shadow: 0 3px 12px rgba(10, 42, 76, .08); }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { color: #175ac8; font-size: 18px; letter-spacing: -.04em; }
.brand-copy span { overflow: hidden; max-width: 255px; color: #607086; font-size: 9px; font-weight: 700; letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
.nav-links { display: flex; gap: 25px; color: #475a72; font-size: 13px; font-weight: 700; }
.nav-links a, .footer-links a { transition: color .18s ease; }
.nav-links a:hover, .footer-links a:hover { color: #216ee1; }
.nav-cta { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #bed4fa; border-radius: 9px; background: white; padding: 9px 12px; color: #1458bd; font-size: 12px; font-weight: 800; }
.hero { position: relative; overflow: hidden; min-height: 670px; background: radial-gradient(circle at 70% 30%, rgba(43, 161, 232, .2), transparent 24%), radial-gradient(circle at 95% 80%, rgba(131, 91, 255, .22), transparent 29%), var(--midnight); color: white; }
.hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(152, 207, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(152, 207, 255, .04) 1px, transparent 1px); background-size: 48px 48px; content: ''; mask-image: linear-gradient(to bottom, black, transparent); }
.hero-grid { position: relative; display: grid; min-height: 670px; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; }
.hero-copy { padding: 90px 0; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: #50d9eb; font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 5px rgba(55, 224, 172, .12); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 640px; margin-bottom: 24px; font-size: clamp(48px, 6vw, 76px); font-weight: 800; letter-spacing: -.065em; line-height: .98; }
h1 em { color: #7fe8f4; font-style: normal; }
.hero-text { max-width: 590px; color: #bdcce0; font-size: 17px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 10px; padding: 0 17px; font-size: 13px; font-weight: 800; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(130deg, #31d2e5, #5f8df4); color: #04152a; box-shadow: 0 12px 32px rgba(44, 192, 220, .25); }
.button-secondary { border: 1px solid rgba(207, 228, 255, .3); background: rgba(207, 228, 255, .07); color: #e7f4ff; }
.signal-row { display: flex; gap: 28px; margin: 52px 0 0; padding: 0; }
.signal-row div { min-width: 110px; }
.signal-row dt { color: #e9f8ff; font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; }
.signal-row dd { margin: 3px 0 0; color: #7e94b1; font-size: 11px; }
.hero-visual { position: relative; min-height: 535px; }
.logo-panel { position: absolute; top: 96px; right: 34px; z-index: 2; display: grid; width: min(420px, 92%); aspect-ratio: 1 / 1; place-items: center; overflow: hidden; border: 1px solid rgba(209, 239, 255, .22); border-radius: 30px; background: rgba(232, 247, 255, .95); box-shadow: 0 30px 85px rgba(1, 9, 30, .4); transform: rotate(3deg); }
.logo-panel img { width: 100%; height: 100%; object-fit: cover; }
.orbit { position: absolute; z-index: 3; border: 1px solid rgba(75, 212, 232, .5); border-radius: 50%; }
.orbit-one { top: 68px; left: 20px; width: 468px; height: 300px; transform: rotate(30deg); }
.orbit-two { top: 110px; left: 46px; width: 440px; height: 290px; border-color: rgba(142, 112, 255, .46); transform: rotate(-35deg); }
.orb { position: absolute; z-index: 1; border-radius: 50%; filter: blur(1px); }
.orb-one { top: 64px; right: 48px; width: 130px; height: 130px; background: rgba(66, 218, 235, .25); }
.orb-two { bottom: 30px; left: 20px; width: 140px; height: 140px; background: rgba(133, 99, 254, .28); }
.event-card { position: absolute; z-index: 4; width: 190px; border: 1px solid rgba(215, 240, 255, .16); border-radius: 12px; background: rgba(8, 28, 55, .9); padding: 13px 14px; box-shadow: 0 15px 38px rgba(0, 0, 0, .28); backdrop-filter: blur(9px); }
.event-card strong, .event-card small { display: block; }
.event-card strong { margin-top: 7px; color: #edf9ff; font-family: 'DM Mono', monospace; font-size: 12px; }
.event-card small { margin-top: 4px; color: #87a2c4; font-size: 10px; }
.event-card-top { top: 41px; left: 0; }.event-card-bottom { right: -10px; bottom: 35px; }
.status-chip { display: inline-block; border-radius: 999px; padding: 3px 6px; font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .08em; }.status-live { background: rgba(55, 224, 172, .15); color: #65efc0; }.status-secure { background: rgba(116, 163, 255, .15); color: #9fc4ff; }
.trust-strip { border-bottom: 1px solid #dde7f0; background: #fff; }.trust-items { display: grid; grid-template-columns: repeat(3, 1fr); }.trust-items p { display: flex; min-height: 76px; align-items: center; gap: 11px; margin: 0; border-right: 1px solid #e8eef5; padding: 0 24px; color: #405671; font-size: 12px; font-weight: 700; }.trust-items p:first-child { border-left: 1px solid #e8eef5; }.trust-items span { color: #3c7ed9; font-family: 'DM Mono', monospace; font-size: 10px; }
.section { padding: 112px 0; }.section-heading { max-width: 700px; margin-bottom: 46px; }.section-heading .eyebrow, .controls-copy .eyebrow, .start-copy .eyebrow { color: #287bd5; }.section-heading h2, .controls-copy h2, .start-copy h2 { margin-bottom: 17px; color: #10233e; font-size: clamp(34px, 4vw, 53px); letter-spacing: -.055em; line-height: 1.06; }.section-heading > p:not(.eyebrow) { max-width: 650px; color: #62768e; font-size: 16px; line-height: 1.75; }.narrow { max-width: 660px; }
.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.capability-card { position: relative; min-height: 310px; overflow: hidden; border: 1px solid #dae5ef; border-radius: 16px; background: white; padding: 24px; box-shadow: 0 8px 24px rgba(26, 61, 101, .035); transition: transform .2s ease, box-shadow .2s ease; }.capability-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }.featured-card { background: linear-gradient(150deg, #eafbff, #e9f1ff); }.card-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; font-size: 18px; font-weight: 800; }.cyan { background: #c9f7fb; color: #0c9eb1; }.violet { background: #eae4ff; color: #7752e5; }.emerald { background: #d8faed; color: #0d9b71; }.amber { background: #fff0d8; color: #db8a16; }.card-kicker { margin: 28px 0 8px; color: #477195; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }.capability-card h3 { margin-bottom: 10px; color: #10233e; font-size: 19px; letter-spacing: -.035em; line-height: 1.2; }.capability-card p:last-of-type { margin-bottom: 0; color: #64768d; font-size: 12px; line-height: 1.75; }.card-line { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.section-dark { background: var(--midnight); color: white; }.controls-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 76px; }.controls-copy { position: sticky; top: 112px; }.controls-copy .eyebrow { color: var(--cyan); }.controls-copy h2 { color: white; }.controls-copy > p:not(.eyebrow) { max-width: 410px; color: #a7b8cf; font-size: 16px; line-height: 1.8; }.text-link { display: inline-flex; gap: 8px; margin-top: 18px; color: #75dfe9; font-size: 13px; font-weight: 800; }.controls-board { border-top: 1px solid var(--line); }.control-row { display: grid; grid-template-columns: 46px 1fr auto; gap: 15px; align-items: start; border-bottom: 1px solid var(--line); padding: 24px 0; }.control-number { color: #6282a9; font-family: 'DM Mono', monospace; font-size: 11px; }.control-row h3 { margin-bottom: 6px; color: #f5fbff; font-size: 16px; }.control-row p { margin: 0; color: #9bb0ca; font-size: 12px; line-height: 1.65; }.control-state { border: 1px solid rgba(55, 224, 172, .22); border-radius: 999px; background: rgba(55, 224, 172, .08); padding: 4px 7px; color: #69edc2; font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .08em; }
.operations-section { padding-bottom: 80px; }.run-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: steps; }.run-flow li { position: relative; min-height: 234px; border-top: 1px solid #b6c8d9; padding: 21px 14px 16px 0; }.run-flow li:not(:last-child)::after { position: absolute; top: -1px; right: -10px; width: 20px; height: 1px; background: #b6c8d9; content: ''; }.step-mark { display: inline-grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: #183b68; color: white; font-family: 'DM Mono', monospace; font-size: 11px; }.step-label { margin: 31px 0 6px; color: #437dc4; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }.run-flow h3 { margin-bottom: 9px; color: #112744; font-size: 19px; letter-spacing: -.03em; line-height: 1.25; }.run-flow p:last-child { color: #63768f; font-size: 12px; line-height: 1.7; }.operations-note { display: flex; align-items: center; gap: 16px; margin-top: 13px; border: 1px solid #c8e2eb; border-radius: 14px; background: #effcff; padding: 17px 19px; color: #4d6981; font-size: 12px; }.operations-note p { margin: 0; }.operations-note strong { color: #17466c; }.note-icon { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 9px; background: #cff5f8; color: #117e91; font-size: 19px; }
.evidence-section { padding: 84px 0; background: linear-gradient(135deg, #eef4fb, #edfaff); }.evidence-layout { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 70px; }.evidence-layout h2 { margin: 0; color: #10233e; font-size: clamp(32px, 3.5vw, 47px); letter-spacing: -.06em; line-height: 1.08; }.evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.evidence-grid div { min-height: 106px; border: 1px solid #d6e4f0; border-radius: 11px; background: rgba(255, 255, 255, .78); padding: 17px; }.evidence-grid strong, .evidence-grid span { display: block; }.evidence-grid strong { color: #1d599c; font-family: 'DM Mono', monospace; font-size: 13px; }.evidence-grid span { margin-top: 8px; color: #63758c; font-size: 11px; line-height: 1.45; }
.start-section { padding: 105px 0; }.start-card { display: grid; grid-template-columns: 1fr .9fr; gap: 50px; align-items: center; overflow: hidden; border-radius: 22px; background: linear-gradient(128deg, #103162, #07182f); padding: 58px; box-shadow: 0 25px 70px rgba(6, 24, 49, .22); }.start-copy .eyebrow { color: var(--cyan); }.start-copy h2 { color: white; }.start-copy > p:not(.eyebrow) { color: #a7b9d0; font-size: 14px; line-height: 1.75; }.dark-button { border-color: rgba(208, 230, 255, .18); }.command-card { overflow: auto; margin: 0; border: 1px solid rgba(177, 217, 255, .17); border-radius: 14px; background: #061426; padding: 24px; color: #d7ebff; font: 11px/1.9 'DM Mono', monospace; white-space: pre-wrap; }.command-muted { color: #7192bb; }
.site-footer { border-top: 1px solid #dfe8f1; background: white; }.footer-wrap { min-height: 112px; }.site-footer p { margin: 0; color: #718197; font-size: 11px; }.footer-links { display: flex; gap: 17px; color: #4f6682; font-size: 11px; font-weight: 800; }
@media (max-width: 980px) { .nav-links { display: none; }.hero-grid { grid-template-columns: 1fr; padding: 40px 0 20px; }.hero-copy { padding: 40px 0 20px; }.hero-visual { min-height: 470px; max-width: 590px; width: 100%; margin: 0 auto; }.controls-layout, .evidence-layout, .start-card { grid-template-columns: 1fr; gap: 35px; }.controls-copy { position: static; }.capability-grid { grid-template-columns: repeat(2, 1fr); }.run-flow { grid-template-columns: repeat(2, 1fr); }.evidence-grid { max-width: 680px; }.footer-wrap { flex-wrap: wrap; padding: 22px 0; } }
@media (max-width: 640px) { .shell { width: min(100% - 32px, 1160px); }.nav-wrap { min-height: 65px; }.nav-cta { display: none; }.brand-copy span { max-width: 210px; }.hero { min-height: auto; }.hero-copy { padding-top: 60px; }.hero-text { font-size: 15px; }.signal-row { flex-wrap: wrap; gap: 17px; margin-top: 38px; }.hero-visual { min-height: 370px; }.logo-panel { top: 51px; right: 4%; width: min(300px, 86%); }.orbit-one { top: 40px; left: 0; width: 330px; height: 210px; }.orbit-two { top: 65px; left: 8px; width: 318px; height: 205px; }.event-card { width: 155px; }.event-card-top { top: 8px; }.event-card-bottom { right: 0; bottom: 8px; }.trust-items, .capability-grid, .run-flow, .evidence-grid { grid-template-columns: 1fr; }.trust-items p, .trust-items p:first-child { min-height: 58px; border-right: 0; border-left: 0; border-bottom: 1px solid #e8eef5; }.section { padding: 75px 0; }.section-heading { margin-bottom: 34px; }.controls-layout { gap: 28px; }.control-row { grid-template-columns: 30px 1fr; }.control-state { grid-column: 2; justify-self: start; }.run-flow li { min-height: auto; padding-bottom: 18px; }.run-flow li:not(:last-child)::after { display: none; }.evidence-layout { gap: 30px; }.start-card { gap: 29px; padding: 31px 23px; }.site-footer p { order: 3; width: 100%; }.footer-links { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* API test-plan documentation */
.api-workflow-section { background: #ffffff; }
.api-heading { max-width: 800px; }
.api-heading code, .doc-callout code { border-radius: 5px; background: #e8f1fb; padding: 2px 5px; color: #1d5c9f; font: 500 .9em 'DM Mono', monospace; }
.api-doc-grid { display: grid; grid-template-columns: 265px 1fr; gap: 32px; align-items: stretch; }
.api-rail { border: 1px solid #d9e6f1; border-radius: 16px; background: linear-gradient(160deg, #f5faff, #edf4ff); padding: 24px; }
.rail-label, .reference-kicker { color: #477ebd; font: 500 10px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.api-rail ol { display: grid; gap: 22px; margin: 25px 0 0; padding: 0; list-style: none; }
.api-rail li { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; }
.api-rail li span { grid-row: 1 / span 2; color: #5b86bb; font: 500 10px 'DM Mono', monospace; }
.api-rail strong { color: #173352; font-size: 13px; }
.api-rail small { margin-top: 3px; color: #6d7f96; font-size: 11px; line-height: 1.5; }
.api-doc-content { min-width: 0; }
.doc-callout { display: flex; gap: 12px; margin-bottom: 14px; border: 1px solid #c5e9ee; border-radius: 13px; background: #f0fdff; padding: 16px 18px; color: #46647b; font-size: 13px; line-height: 1.7; }
.doc-callout p { margin: 0; }.doc-callout strong { color: #164f64; }.callout-mark { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border-radius: 8px; background: #cdf5f7; color: #11849a; font-weight: 800; }
.api-plan-example { overflow: hidden; border: 1px solid #17375d; border-radius: 15px; background: #07182e; box-shadow: 0 18px 42px rgba(9, 34, 67, .16); }
.code-topline { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(183, 220, 255, .14); padding: 12px 17px; color: #83a5c8; font: 500 10px 'DM Mono', monospace; }
.api-plan-example pre { overflow: auto; margin: 0; padding: 20px; color: #dcecff; font: 11px/1.72 'DM Mono', monospace; white-space: pre; }
.api-reference { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.api-reference article { border-top: 3px solid #84b6e8; border-radius: 4px 4px 13px 13px; background: #f5f9fd; padding: 18px; }
.api-reference article:nth-child(2) { border-top-color: #9c84ec; }.api-reference article:nth-child(3) { border-top-color: #43caa4; }.api-reference article:nth-child(4) { border-top-color: #f2af4e; }
.api-reference h3 { margin: 9px 0; color: #173452; font-size: 15px; letter-spacing: -.025em; line-height: 1.25; }
.api-reference p:last-child { margin-bottom: 0; color: #64788f; font-size: 11px; line-height: 1.65; }

/* Browser-only API test-runner simulation */
.simulator-section { position: relative; overflow: hidden; background: radial-gradient(circle at 85% 20%, rgba(47, 196, 221, .17), transparent 22%), radial-gradient(circle at 20% 85%, rgba(120, 86, 229, .18), transparent 30%), #08182e; color: white; }
.simulator-section::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(169, 218, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(169, 218, 255, .04) 1px, transparent 1px); background-size: 46px 46px; content: ''; }
.simulator-layout { position: relative; display: grid; grid-template-columns: .72fr 1.28fr; gap: 55px; align-items: center; }
.simulator-copy .eyebrow { color: #55ddea; }.simulator-copy h2 { max-width: 500px; margin-bottom: 17px; font-size: clamp(34px, 4vw, 51px); letter-spacing: -.055em; line-height: 1.05; }.simulator-copy > p:not(.eyebrow):not(.runner-status) { max-width: 430px; color: #aec0d8; font-size: 14px; line-height: 1.8; }
.runner-actions { display: flex; align-items: center; gap: 12px; margin-top: 26px; }.runner-actions .button { border: 0; cursor: pointer; }.runner-actions .button:disabled { cursor: wait; opacity: .7; transform: none; }
.runner-reset { border: 1px solid rgba(203, 228, 255, .25); border-radius: 9px; background: transparent; padding: 13px 15px; color: #c3d7ed; font: 800 12px Manrope, sans-serif; cursor: pointer; transition: background .18s ease, color .18s ease; }.runner-reset:hover { background: rgba(220, 240, 255, .1); color: white; }.runner-reset:focus-visible, .runner-actions .button:focus-visible { outline: 3px solid #75e8f3; outline-offset: 3px; }
.runner-status { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: #a8bdd4; font: 500 11px 'DM Mono', monospace; }.runner-status::before { width: 7px; height: 7px; border-radius: 50%; background: #7590b0; content: ''; }.runner-status[data-tone="running"]::before { background: #60dfee; box-shadow: 0 0 0 5px rgba(96, 223, 238, .12); }.runner-status[data-tone="passed"]::before { background: #4be0ae; box-shadow: 0 0 0 5px rgba(75, 224, 174, .12); }
.runner-console { overflow: hidden; border: 1px solid rgba(187, 223, 255, .19); border-radius: 18px; background: rgba(6, 22, 43, .86); box-shadow: 0 28px 72px rgba(0, 0, 0, .32); backdrop-filter: blur(10px); }.console-heading { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(186, 218, 249, .13); padding: 16px 20px; color: #dfeeff; font-size: 12px; }.console-heading > div { display: flex; align-items: center; gap: 8px; }.console-heading > span { border-radius: 999px; background: rgba(148, 177, 210, .12); padding: 4px 8px; color: #9fb7d1; font: 500 9px 'DM Mono', monospace; text-transform: uppercase; }.console-dot { width: 8px; height: 8px; border-radius: 50%; background: #42dea8; box-shadow: 0 0 0 5px rgba(66, 222, 168, .11); }
.runner-phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; border-bottom: 1px solid rgba(186, 218, 249, .11); padding: 15px 20px; list-style: none; }.runner-phases li { display: flex; align-items: center; gap: 6px; color: #7188a4; font: 500 10px 'DM Mono', monospace; }.runner-phases li span { display: inline-grid; width: 18px; height: 18px; place-items: center; border: 1px solid #365270; border-radius: 50%; color: #7592b3; font-size: 9px; }.runner-phases li[data-state="active"] { color: #8eeef4; }.runner-phases li[data-state="active"] span { border-color: #55ddea; background: rgba(85, 221, 234, .12); color: #8eeef4; }.runner-phases li[data-state="complete"] { color: #78e8bb; }.runner-phases li[data-state="complete"] span { border-color: #52d8a7; background: #52d8a7; color: #072338; }
.runner-steps { display: grid; gap: 8px; padding: 17px 20px; }.runner-steps article { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid rgba(178, 214, 248, .13); border-radius: 10px; background: rgba(146, 184, 222, .04); padding: 12px 13px; transition: border-color .22s ease, background .22s ease; }.runner-steps article > div { display: grid; grid-template-columns: 28px auto; column-gap: 10px; align-items: center; }.step-order { grid-row: 1 / span 2; color: #7c96b5; font: 500 10px 'DM Mono', monospace; }.runner-steps strong { color: #d8eaff; font-size: 12px; }.runner-steps code { margin-top: 3px; color: #7ba5ca; font: 10px 'DM Mono', monospace; }.runner-steps article > span { flex: 0 0 auto; color: #7a91aa; font: 10px 'DM Mono', monospace; text-align: right; }.runner-steps article[data-state="running"] { border-color: rgba(73, 217, 232, .55); background: rgba(62, 203, 223, .08); }.runner-steps article[data-state="running"] > span { color: #77e9f3; }.runner-steps article[data-state="passed"] { border-color: rgba(69, 220, 164, .36); background: rgba(69, 220, 164, .07); }.runner-steps article[data-state="passed"] > span { color: #71e8b6; }
.runner-log { display: grid; min-height: 118px; max-height: 170px; gap: 6px; overflow: auto; border-top: 1px solid rgba(186, 218, 249, .11); background: rgba(1, 12, 29, .5); padding: 16px 20px; }.runner-log-entry { margin: 0; color: #7f9ab7; font: 10px/1.45 'DM Mono', monospace; }.runner-log-success { color: #7be4ba; }.runner-log-request { color: #91dce5; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (max-width: 980px) { .api-doc-grid, .simulator-layout { grid-template-columns: 1fr; gap: 24px; }.api-rail ol { grid-template-columns: repeat(4, 1fr); gap: 14px; }.api-reference { grid-template-columns: repeat(2, 1fr); }.simulator-copy { max-width: 620px; } }
@media (max-width: 640px) { .api-rail ol, .api-reference { grid-template-columns: 1fr; }.api-rail { padding: 20px; }.api-plan-example pre { padding: 15px; font-size: 10px; }.doc-callout { padding: 14px; font-size: 12px; }.runner-phases { grid-template-columns: repeat(2, 1fr); gap: 11px; }.runner-steps article { align-items: flex-start; flex-direction: column; gap: 7px; }.runner-steps article > span { text-align: left; }.simulator-layout { gap: 30px; }.runner-console { border-radius: 13px; }.runner-steps, .runner-log { padding-right: 14px; padding-left: 14px; }.console-heading { padding: 14px; } }

/* Native mobile generation */
.capability-grid { grid-template-columns: repeat(5, 1fr); }
.rose { background: #ffe4f1; color: #cd4d87; }.mobile-card { background: linear-gradient(155deg, #fff9fc, #f5edff); }.mobile-card .card-kicker { color: #9a5682; }
.mobile-section { position: relative; overflow: hidden; border-top: 1px solid #e5eaf4; border-bottom: 1px solid #dce6f2; background: linear-gradient(125deg, #f7f4ff, #edf8ff); }.mobile-section::after { position: absolute; top: -160px; right: -100px; width: 380px; height: 380px; border: 1px solid rgba(116, 92, 222, .17); border-radius: 50%; box-shadow: 0 0 0 45px rgba(80, 190, 236, .045), 0 0 0 90px rgba(152, 114, 240, .035); content: ''; }
.mobile-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1.06fr .94fr; gap: 55px; align-items: center; }.mobile-copy .eyebrow { color: #6652c4; }.mobile-copy h2 { max-width: 620px; margin-bottom: 18px; color: #1b294a; font-size: clamp(34px, 4vw, 51px); letter-spacing: -.055em; line-height: 1.07; }.mobile-copy > p:not(.eyebrow) { max-width: 620px; color: #66758e; font-size: 14px; line-height: 1.8; }.mobile-copy code { border-radius: 5px; background: #e9e7ff; padding: 2px 5px; color: #5a4dad; font: 500 .9em 'DM Mono', monospace; }
.mobile-platforms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; }.mobile-platforms article { border: 1px solid #d7dbef; border-radius: 13px; background: rgba(255, 255, 255, .72); padding: 15px; }.mobile-platforms span, .mobile-platforms strong, .mobile-platforms small { display: block; }.mobile-platforms span { color: #735fc0; font: 500 10px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }.mobile-platforms strong { margin-top: 7px; color: #24395e; font-size: 17px; }.mobile-platforms small { margin-top: 3px; color: #6e7e95; font-size: 10px; }
.mobile-contract { overflow: hidden; border: 1px solid rgba(73, 72, 139, .34); border-radius: 17px; background: #101735; box-shadow: 0 24px 55px rgba(45, 45, 106, .18); }.contract-heading { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(207, 210, 255, .14); padding: 14px 18px; color: #aeb6e5; font: 500 10px 'DM Mono', monospace; }.mobile-contract pre { overflow: auto; margin: 0; padding: 23px; color: #d8ddff; font: 12px/1.75 'DM Mono', monospace; }.mobile-boundary { display: flex; gap: 11px; border-top: 1px solid rgba(207, 210, 255, .12); background: rgba(113, 89, 195, .13); padding: 15px 18px; }.mobile-boundary > span { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 7px; background: rgba(242, 139, 192, .18); color: #ffa4ca; }.mobile-boundary p { margin: 0; color: #aeb8d8; font-size: 11px; line-height: 1.65; }.mobile-boundary strong { color: #f2eaff; }

/* Simulator authentication and local evidence export */
.runner-auth-config { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 24px 0 0; border: 1px solid rgba(196, 226, 255, .17); border-radius: 13px; background: rgba(166, 205, 242, .06); padding: 14px; }.runner-auth-config legend { padding: 0 5px; color: #81cae7; font: 500 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }.runner-auth-config label { display: grid; gap: 6px; color: #b7cce2; font-size: 10px; font-weight: 700; }.runner-auth-config select, .runner-auth-config input { width: 100%; border: 1px solid rgba(190, 226, 255, .2); border-radius: 7px; outline: 0; background: #081a34; padding: 9px; color: #ddebfa; font: 10px 'DM Mono', monospace; }.runner-auth-config select:focus, .runner-auth-config input:focus { border-color: #64ddea; box-shadow: 0 0 0 3px rgba(100, 221, 234, .14); }.runner-auth-config p { grid-column: 1 / -1; margin: 1px 0 0; color: #788fa9; font-size: 10px; line-height: 1.5; }.runner-export-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }.runner-export-actions button { border: 1px solid rgba(178, 218, 250, .28); border-radius: 8px; background: rgba(178, 218, 250, .08); padding: 8px 10px; color: #c3e5ff; font: 700 10px Manrope, sans-serif; cursor: pointer; transition: background .18s ease, border-color .18s ease; }.runner-export-actions button:hover:not(:disabled) { border-color: #72e4ef; background: rgba(81, 212, 229, .15); }.runner-export-actions button:disabled { cursor: not-allowed; opacity: .45; }.runner-export-actions button:focus-visible { outline: 3px solid #75e8f3; outline-offset: 3px; }

@media (max-width: 1180px) { .capability-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) { .mobile-layout { grid-template-columns: 1fr; gap: 30px; }.mobile-contract { max-width: 620px; }.capability-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .capability-grid, .mobile-platforms { grid-template-columns: 1fr; }.mobile-layout { gap: 24px; }.mobile-contract pre { padding: 17px; font-size: 10px; }.runner-auth-config { grid-template-columns: 1fr; }.runner-auth-config p { grid-column: auto; }.runner-export-actions { display: grid; grid-template-columns: 1fr; }.runner-export-actions button { width: 100%; } }