.mp .mp-hero-inner {
max-width: 720px;
margin: 0 auto;
padding: 0 0 8px;
text-align: center;
}
.mp .mp-hero-eyebrow {
display: block;
margin: 0 0 14px;
text-align: center;
}
.mp h1.mp-hero-title {
max-width: 100%;
margin: 0 0 18px;
font-size: 38px;
line-height: 1.12;
}
.mp .section-main.hero .mp-hero-lead {
max-width: 640px;
margin: 0 auto 26px;
font-size: 17px;
line-height: 1.6;
}
.mp .mp-endpoint {
display: inline-flex;
align-items: center;
gap: 10px;
max-width: 100%;
margin: 0 0 12px;
padding: 10px 10px 10px 20px;
border-radius: 10px;
background: #1E1E2E;
text-align: left;
}
.mp .mp-endpoint-url {
overflow-x: auto;
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: #E6E6F0;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 15px;
line-height: 1.6;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.mp .mp-transport {
margin: 0 0 24px;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 14px;
line-height: 1.6;
color: rgba(43, 41, 45, .72);
}
.mp .mp-hero-actions {
justify-content: center;
margin: 0 0 20px;
}
.mp .mp-hero-status {
justify-content: center;
}
.mp .mp-md {
margin: 22px 0 0;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 14px;
line-height: 1.6;
}
.mp .mp-md a {
color: #0000ff;
font-weight: 700;
text-decoration: underline;
}
.mp .mp-panel {
position: relative;
}
.mp .mp-code {
margin: 0;
padding-right: 84px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mp .mp-copy {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
padding: 5px 12px;
border: 1px solid rgba(230, 230, 240, .28);
border-radius: 5px;
background: rgba(230, 230, 240, .08);
color: rgba(230, 230, 240, .8);
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
cursor: pointer;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mp .mp-copy:hover,
.mp .mp-copy:focus {
background: rgba(230, 230, 240, .18);
border-color: rgba(230, 230, 240, .5);
color: #E6E6F0;
}
.mp .mp-copy:focus-visible {
outline: 2px solid #00ffff;
outline-offset: 2px;
}
.mp .mp-copy--inline {
position: static;
flex: none;
top: auto;
right: auto;
}
.mp .mp-copy.is-copied {
background: rgba(0, 255, 255, .18);
border-color: rgba(0, 255, 255, .55);
color: #fff;
}
.mp .mp-note {
margin: 0;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 15px;
line-height: 1.6;
color: rgba(43, 41, 45, .72);
}
.mp .mp-note--after {
margin-top: 28px;
}
.mp .mp-note + .mp-note {
margin-top: 10px;
}
.mp .mp-connect-notes {
margin: 26px 0 0;
}
.mp .mp-note--key {
margin-top: 12px;
}
.mp .mp-tabs {
border: 1px solid rgba(43, 41, 45, .1);
border-radius: 16px;
background: #fff;
overflow: hidden;
}
.mp .mp-tablist {
display: none;
}
.mp .mp-tabs.is-ready .mp-tablist {
display: flex;
flex-wrap: wrap;
gap: 2px;
padding: 6px 6px 0;
border-bottom: 1px solid rgba(43, 41, 45, .1);
background: #F8F8FB;
}
.mp .mp-tab {
position: relative;
padding: 12px 16px 13px;
border: 0;
border-bottom: 3px solid transparent;
background: none;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
color: rgba(43, 41, 45, .6);
cursor: pointer;
transition: color .15s ease, border-color .15s ease;
}
.mp .mp-tab:hover {
color: #2B292D;
}
.mp .mp-tab.is-active {
border-bottom-color: #0000ff;
color: #2B292D;
}
.mp .mp-tab:focus-visible {
outline: 2px solid #0000ff;
outline-offset: -2px;
}
.mp .mp-tabpanel {
padding: 26px 24px 28px;
}
.mp .mp-tabs.is-ready .mp-tabpanel {
display: none;
}
.mp .mp-tabs.is-ready .mp-tabpanel.is-active {
display: block;
}
.mp .mp-tabs.is-ready .mp-client-name {
display: none;
}
.mp .mp-client-name {
margin: 0 0 6px;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.4px;
line-height: 1.2;
color: #2B292D;
}
.mp .mp-tabpanel + .mp-tabpanel {
border-top: 1px solid rgba(43, 41, 45, .1);
}
.mp .mp-tabs.is-ready .mp-tabpanel + .mp-tabpanel {
border-top: 0;
}
.mp .mp-client-where {
margin: 0 0 14px;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 15px;
line-height: 1.6;
color: rgba(43, 41, 45, .72);
}
.mp a.mp-install {
display: inline-block;
margin: 14px 0 0;
padding: 9px 18px;
border: 1px solid rgba(43, 41, 45, .22);
border-radius: 6px;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
color: #0000ff;
text-decoration: none;
transition: border-color .15s ease, background-color .15s ease;
}
.mp a.mp-install:hover,
.mp a.mp-install:focus {
background: #F8F8FB;
border-color: #0000ff;
color: #0000ff;
text-decoration: none;
}
.mp a.mp-install:focus-visible {
outline: 2px solid #0000ff;
outline-offset: 2px;
}
.mp .mp-callout {
margin: 22px 0 0;
padding: 22px 26px;
border-left: 4px solid #0000ff;
background: #F8F8FB;
}
.mp .mp-callout-h {
margin: 0 0 8px;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.3px;
line-height: 1.2;
color: #2B292D;
}
.mp .mp-callout-t {
margin: 0;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 15px;
line-height: 1.6;
color: rgba(43, 41, 45, .72);
}
.mp .mp-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mp .mp-table {
width: 100%;
min-width: 640px;
border-collapse: collapse;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
text-align: left;
}
.mp .mp-table th,
.mp .mp-table td {
padding: 13px 16px;
border-bottom: 1px solid rgba(43, 41, 45, .1);
vertical-align: top;
}
.mp .mp-table thead th {
border-bottom: 2px solid rgba(43, 41, 45, .1);
font-size: 13px;
font-weight: 700;
letter-spacing: .4px;
text-transform: uppercase;
color: rgba(43, 41, 45, .55);
}
.mp .mp-table .mp-group-cell {
padding-top: 34px;
border-bottom: 1px solid rgba(43, 41, 45, .1);
background: none;
}
.mp .mp-table tr.mp-group:first-child .mp-group-cell {
padding-top: 20px;
}
.mp .mp-group-name {
display: block;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.3px;
line-height: 1.2;
color: #2B292D;
}
.mp .mp-group-text {
display: block;
margin-top: 5px;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: rgba(43, 41, 45, .72);
}
.mp .mp-tool code {
padding: 0;
background: none;
color: #2B292D;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 13px;
line-height: 1.5;
white-space: nowrap;
}
.mp .mp-what {
font-size: 15px;
line-height: 1.6;
color: rgba(43, 41, 45, .72);
}
.mp .mp-access {
white-space: nowrap;
font-size: 14px;
line-height: 1.6;
color: rgba(43, 41, 45, .6);
}
.mp .mp-access--destructive {
font-weight: 700;
color: #2B292D;
}
.mp .mp-prompts {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid rgba(43, 41, 45, .1);
}
.mp .mp-prompt {
padding: 26px 0;
border-bottom: 1px solid rgba(43, 41, 45, .1);
}
.mp .mp-prompt-text {
margin: 0 0 8px;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.3px;
line-height: 1.4;
color: #2B292D;
}
.mp .mp-prompt-result {
margin: 0;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 16px;
line-height: 1.6;
color: rgba(43, 41, 45, .72);
}
.mp ul.mp-tiles {
margin: 0;
padding: 0;
list-style: none;
}
.mp .mp-tile {
transition: none;
overflow-wrap: anywhere;
}
.mp .mp-tile:hover,
.mp .mp-tile:focus {
background: #F8F8FB;
border-top-color: transparent;
box-shadow: none;
}
.mp .ap-section--band .mp-tile,
.mp .ap-section--band .mp-tile:hover {
background: #fff;
}
.mp .mp-tile p:last-child {
margin-bottom: 0;
}
.mp .mp-lists {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 40px;
margin: 48px 0 0;
}
.mp .mp-sub-h {
margin: 0 0 14px;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.4px;
line-height: 1.2;
color: #2B292D;
}
.mp .mp-rules {
margin: 0;
padding: 0;
list-style: none;
}
.mp .mp-rules li {
margin: 0 0 14px;
padding: 0 0 14px;
border-bottom: 1px solid rgba(43, 41, 45, .1);
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 15px;
line-height: 1.6;
color: rgba(43, 41, 45, .72);
}
.mp .mp-rules li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.mp .mp-rules b {
color: #2B292D;
font-weight: 700;
}
@media (min-width: 768px) {
.mp h1.mp-hero-title {
font-size: 46px;
}
.mp .mp-tabpanel {
padding: 30px 30px 32px;
}
}
@media (min-width: 992px) {
.mp .mp-hero-inner {
padding: 0 0 16px;
}
.mp h1.mp-hero-title {
font-size: 52px;
}
.mp .section-main.hero .mp-hero-lead {
font-size: 19px;
}
.mp .section-main.hero .hero-status {
justify-content: center;
}
.mp .mp-prompt {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 40px;
align-items: start;
}
.mp .mp-prompt-text {
margin: 0;
}
.mp .mp-prompt-result {
padding-top: 4px;
}
.mp .mp-list--rules {
max-width: 780px;
}
}
@media (min-width: 1200px) {
.mp h1.mp-hero-title {
font-size: 56px;
}
}
@media (prefers-reduced-motion: reduce) {
.mp .mp-copy,
.mp .mp-tab,
.mp a.mp-install {
transition: none;
}
}
@media (max-width: 767px) {
.mp .hero-status__item + .hero-status__item:before {
display: none;
}
}