/* Sello docs styles.
   Inter 400/500/600 and Inter Tight 800 are self-hosted woff2 files.
   They are not loaded from a CDN. */

@font-face {
  font-family: Inter;
  src: url("fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --sello-bg: #09090b;
  --sello-border: #27272a;
  --sello-text: #fffffff0;
  --button-text: 15px;
  --font-size--h1-desktop: 56px;
  --font-size--h1-phone-portrait: 28px;
  --line-heights--h1: 1.15em;
  --font-size--text-large: 20px;
  --line-heights--text-large: 1.7em;
}

* {
  box-sizing: border-box;
}

body.home {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(880px 420px at 12% -8%, rgba(193, 124, 227, 0.35), transparent 62%),
    var(--sello-bg);
  color: var(--sello-text);
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: var(--button-text);
  line-height: 1.5;
}

.site-header {
  background: var(--sello-bg);
  border-bottom: 1px solid var(--sello-border);
  font-family: Inter, sans-serif;
}

.column {
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

.header-inner {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo-link {
  display: inline-flex;
  line-height: 0;
}

.logo-link img {
  display: block;
  height: 28px;
  width: auto;
}

.home-main {
  padding-top: 72px;
  padding-bottom: 96px;
}

.home-main h1 {
  margin: 0 0 18px;
  color: #fff;
  font-family: "Inter Tight", sans-serif;
  font-weight: 800;
  font-size: var(--font-size--h1-desktop);
  line-height: var(--line-heights--h1);
  letter-spacing: -0.03em;
  word-spacing: 0.06em;
}

.lead {
  margin: 0 0 36px;
  max-width: 34em;
  color: var(--sello-text);
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: var(--font-size--text-large);
  line-height: var(--line-heights--text-large);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: var(--sello-bg);
  text-align: center;
  border: 0;
  border-radius: 500px;
  margin: 0;
  padding: 10px 22px;
  font-family: Inter, sans-serif;
  font-size: var(--button-text);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.button:hover,
.button:focus-visible {
  background-color: #e4e4e7;
  color: var(--sello-bg);
}

.header-link {
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: var(--button-text);
  font-weight: 500;
  text-decoration: none;
}

.header-link:hover,
.header-link:focus-visible {
  color: #e4e4e7;
}

body.reference-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  --scalar-font: "Inter", sans-serif;
  --scalar-font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body.reference-page .site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px 14px 12px;
}

body.reference-page #app {
  flex: 1;
  min-height: 0;
}

/* Scalar injects its theme after this file. These variables use !important
   so the zinc scale, Inter, and the accent win over that theme. */
body.reference-page,
body.reference-page .light-mode,
body.reference-page .scalar-app,
body.reference-page .t-doc__sidebar {
  --scalar-font: "Inter", sans-serif !important;
  --scalar-color-1: #3f3f46 !important;
  --scalar-color-2: #71717a !important;
  --scalar-color-3: #71717a !important;
  --scalar-color-accent: #7e3aa6 !important;
  --scalar-background-1: #fff !important;
  --scalar-background-2: #fafafa !important;
  --scalar-background-3: #f4f4f5 !important;
  --scalar-background-accent: #7e3aa61a !important;
  --scalar-border-color: #e4e4e7 !important;
  --scalar-sidebar-background-1: #fafafa !important;
  --scalar-sidebar-color-1: #3f3f46 !important;
  --scalar-sidebar-color-2: #3f3f46 !important;
  --scalar-sidebar-color-active: #7e3aa6 !important;
  --scalar-sidebar-border-color: #e4e4e7 !important;
  --scalar-sidebar-item-hover-background: #f4f4f5 !important;
  --scalar-sidebar-item-active-background: #f4f4f5 !important;
  --scalar-sidebar-search-border-color: #e4e4e7 !important;
  --scalar-sidebar-search-color: #71717a !important;
  --scalar-link-color: #7e3aa6 !important;
  --scalar-link-color-hover: #7e3aa6 !important;
  --scalar-focus-color: #7e3aa6 !important;
  --scalar-color-blue: #1d4ed8 !important;
  --scalar-color-green: #15803d !important;
  --scalar-color-orange: #b45309 !important;
  --scalar-color-red: #b91c1c !important;
}

body.reference-page .scalar-app {
  font-family: Inter, sans-serif !important;
  font-weight: 400;
  color: #3f3f46;
}

body.reference-page .scalar-app p,
body.reference-page .scalar-app .markdown,
body.reference-page .scalar-app .introduction-description,
body.reference-page .scalar-app .introduction-description-heading,
body.reference-page .scalar-app .operation-description,
body.reference-page .scalar-app .property-description,
body.reference-page .description .markdown,
body.reference-page .scalar-app .markdown .font-medium,
body.reference-page .scalar-app .markdown .font-semibold,
body.reference-page .scalar-app .markdown .font-bold {
  --scalar-semibold: 400;
  --scalar-font-weight: 400;
  --scalar-regular: 400;
  font-family: Inter, sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none;
  color: #3f3f46;
}

/* Sidebar item color is a CSS variable in Scalar (.text-sidebar-c-2).
   Chrome ignores var() colors on :visited and paints the default blue-purple.
   A literal color on every link state is what actually sticks. */
body.reference-page .scalar-app a.text-sidebar-c-1,
body.reference-page .scalar-app a.text-sidebar-c-1:link,
body.reference-page .scalar-app a.text-sidebar-c-1:visited,
body.reference-page .scalar-app a.text-sidebar-c-1:hover,
body.reference-page .scalar-app a.text-sidebar-c-1:focus,
body.reference-page .scalar-app a.text-sidebar-c-1:focus-visible,
body.reference-page .scalar-app a.text-sidebar-c-2,
body.reference-page .scalar-app a.text-sidebar-c-2:link,
body.reference-page .scalar-app a.text-sidebar-c-2:visited,
body.reference-page .scalar-app a.text-sidebar-c-2:hover,
body.reference-page .scalar-app a.text-sidebar-c-2:focus,
body.reference-page .scalar-app a.text-sidebar-c-2:focus-visible,
body.reference-page .scalar-app button.text-sidebar-c-1,
body.reference-page .scalar-app button.text-sidebar-c-2 {
  color: #3f3f46 !important;
}

body.reference-page .scalar-app a.text-sidebar-c-active,
body.reference-page .scalar-app a.text-sidebar-c-active:link,
body.reference-page .scalar-app a.text-sidebar-c-active:visited,
body.reference-page .scalar-app a.text-sidebar-c-active:hover,
body.reference-page .scalar-app a.text-sidebar-c-active:focus,
body.reference-page .scalar-app a.text-sidebar-c-active:focus-visible {
  color: #3f3f46 !important;
}

body.reference-page .scalar-app a[aria-current="page"],
body.reference-page .scalar-app a[aria-current="page"]:link,
body.reference-page .scalar-app a[aria-current="page"]:visited,
body.reference-page .scalar-app a[aria-current="page"]:hover,
body.reference-page .scalar-app a[aria-current="page"]:focus,
body.reference-page .scalar-app a[aria-current="page"]:focus-visible {
  color: #7e3aa6 !important;
}

body.reference-page .scalar-app h1,
body.reference-page .scalar-app h2,
body.reference-page .scalar-app h3,
body.reference-page .scalar-app h4,
body.reference-page .scalar-app h5,
body.reference-page .scalar-app h6,
body.reference-page .scalar-app .markdown h1,
body.reference-page .scalar-app .markdown h2,
body.reference-page .scalar-app .markdown h3,
body.reference-page .scalar-app .markdown h4,
body.reference-page .scalar-app .markdown h5,
body.reference-page .scalar-app .markdown h6 {
  font-family: "Inter Tight", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  word-spacing: 0.06em;
  color: #09090b;
}

@media (max-width: 700px) {
  .column {
    padding-left: 18px;
    padding-right: 18px;
  }

  .home-main {
    padding-top: 48px;
    padding-bottom: 72px;
  }

  .home-main h1 {
    font-size: var(--font-size--h1-phone-portrait);
  }
}