/* Shared page containers, buttons and general controls. Shell: site-shell.css. */
.container {
  width: min(var(--site-content-width), calc(100% - var(--site-gutters)));
  margin: 0 auto;
}

@media (max-width: 720px) {
  :root {
    --site-gutters: 30px;
  }
}

@media (max-width: 420px) {
  :root {
    --site-gutters: 24px;
  }
}

.btn {
  font-family: var(--font-body);
  min-height: var(--button-height);
  padding: 0 var(--button-padding);
  border: 1px solid var(--button-line);
  border-radius: var(--radius-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  background: var(--color-white);
  font-size: var(--button-font-size);
  font-weight: var(--button-weight);
  cursor: var(--button-cursor);
  transition: var(--button-transition);
}

.btn.primary {
  border-color: var(--color-brand-dark);
  background: var(--button-primary);
  color: var(--color-white);
  box-shadow: var(--button-shadow);
}

.btn:hover {
  transform: translateY(var(--button-hover-y));
}

:where(html[data-layout="home"]) .btn:hover {
  border-color: var(--color-cbd3df);
  box-shadow: var(--shadow-2);
}

:where(html[data-layout="home"]) .btn.primary:hover {
  background: var(--blue2);
  border-color: var(--blue2);
  box-shadow: var(--shadow-3);
}

:is(.btn, .signin, .icon-btn, .menu-toggle, .nav a):focus-visible {
  outline: 3px solid rgba(7,139,112,.24);
  outline-offset: 2px;
}

:where(html[data-layout="home"])[lang="zh"] .btn {
  letter-spacing: 0;
}

:where(html[data-layout="inner"]) body[data-lang="zh"] .btn {
  letter-spacing: 0;
}

html:lang(en) .btn {
  font-weight: 600;
  letter-spacing: 0;
}

@media(prefers-reduced-motion:reduce) {
  :where(html[data-layout="inner"]) .btn:hover {
    transform: none;
  }
}

:where(html[data-layout="home"]) .cta-box>.ctas .btn {
  gap: var(--space-10);
  border: 1px solid var(--color-d8e0eb)!important;
}

:where(html[data-layout="home"]) .cta-box>.ctas .btn.primary {
  gap: var(--space-10);
  border: 1px solid var(--color-d8e0eb)!important;
}

:where(html[data-layout="home"]) .cta-box>.ctas .btn:before {
  content: "";
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

:where(html[data-layout="home"]) .cta-box>.ctas .btn:first-child:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230078D4' d='M2.5 4.2 11 3v8H2.5V4.2Z'/%3E%3Cpath fill='%232A9DF4' d='M12 2.8 21.5 1.5V11H12V2.8Z'/%3E%3Cpath fill='%230078D4' d='M2.5 12H11v8l-8.5-1.2V12Z'/%3E%3Cpath fill='%232A9DF4' d='M12 12h9.5v9.5L12 20.2V12Z'/%3E%3C/svg%3E");
}

:where(html[data-layout="home"]) .cta-box>.ctas .btn:last-child:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='3' y1='3' x2='21' y2='21' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2344B9FF'/%3E%3Cstop offset='.52' stop-color='%236C63FF'/%3E%3Cstop offset='1' stop-color='%23B14DFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.28-.23 2.18.7 2.93.7.75 0 1.92-1.09 3.23-.93 1.31.16 2.3.62 2.96 1.57-2.72 1.63-2.08 5.21.42 6.22-.5 1.3-1.15 2.58-1.54 3.41ZM12.03 7c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25Z'/%3E%3C/svg%3E");
}

@media(max-width:720px) {
  :where(html[data-layout="home"]) .cta-box>.ctas .btn {
    width: 100%;
  }

  :where(html[data-layout="home"]) .cta-box>.ctas .btn.primary {
    width: 100%;
  }
}

:where(html[data-layout="home"]) .cta-box>.ctas .btn {
  min-width: 238px;
  min-height: 58px;
  padding: 0 var(--space-24);
  border-color: var(--color-142b25)!important;
  background: var(--color-142b25)!important;
  color: var(--color-white)!important;
  box-shadow: var(--shadow-5) !important;
}

:where(html[data-layout="home"]) .cta-box>.ctas .btn.primary {
  min-width: 238px;
  min-height: 58px;
  padding: 0 var(--space-24);
  border-color: var(--color-142b25)!important;
  background: var(--color-142b25)!important;
  color: var(--color-white)!important;
  box-shadow: var(--shadow-5) !important;
}

:where(html[data-layout="home"]) .cta-box>.ctas .btn:hover {
  border-color: var(--color-08785f)!important;
  background: var(--color-08785f)!important;
  box-shadow: var(--shadow-6) !important;
}

:where(html[data-layout="home"]) .cta-box>.ctas .btn.primary:hover {
  border-color: var(--color-08785f)!important;
  background: var(--color-08785f)!important;
  box-shadow: var(--shadow-6) !important;
}

:where(html[data-layout="home"]) .cta-box>.ctas .btn:focus-visible {
  outline: 3px solid rgba(7,139,112,.26);
  outline-offset: 3px;
}

@media(max-width:720px) {
  :where(html[data-layout="home"]) .cta-box>.ctas .btn {
    min-height: 56px;
  }

  :where(html[data-layout="home"]) .cta-box>.ctas .btn.primary {
    min-height: 56px;
  }
}

:where(html[data-layout="inner"]) .platform .btn {
  width: 100%;
}

@media(max-width:780px) {
  :where(html[data-layout="inner"]) .workflow-intro .btn {
    width: auto;
    margin-top: var(--space-18);
  }

  :where(html[data-layout="inner"]) .tutorial-head .btn {
    width: auto;
    margin-top: var(--space-18);
  }
}

button,
a[href],
summary {
  cursor: pointer;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

a[href]:focus-visible {
  outline: 2px solid var(--color-brand-dark);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
.btn:hover {
    transition: none;
    transform: none;
  }
}