@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v16/aFTU7PB1QTsUX8KYhh0.ttf) format('truetype'); } @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v16/aFTR7PB1QTsUX8KYvumzIYQ.ttf) format('truetype'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAopxhTg.ttf) format('truetype'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAkJxhTg.ttf) format('truetype'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/outfit/v15/QGYyz_MVcBeNP4NjuGObqx1XmO1I4TC1C4E.ttf) format('truetype'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/outfit/v15/QGYyz_MVcBeNP4NjuGObqx1XmO1I4QK1C4E.ttf) format('truetype'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/outfit/v15/QGYyz_MVcBeNP4NjuGObqx1XmO1I4e6yC4E.ttf) format('truetype'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/outfit/v15/QGYyz_MVcBeNP4NjuGObqx1XmO1I4deyC4E.ttf) format('truetype'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/outfit/v15/QGYyz_MVcBeNP4NjuGObqx1XmO1I4bCyC4E.ttf) format('truetype'); } :root{ --maincolor:#FFFFFF; --primarycolor:#E95420; --secondarycolor:#fbf1e8; --tertiarycolor: #00004db8;  --sidebarbackground:#CCC; --linkcolor:#b71c1c; --linkcoloralternate:#f44336; --white:#FFFFFF; --black:#000000; --codecolor:#b04200; --titlecolor:#595959; --navbar-height-base: 52px; --navbar-height-big: 96px; --site-width: 960px; --page-width: 800px; --navbar-height-verybig: 278px; --navbar-width-max: 1300px; --sf-light: #2cd4d9; --sf-dark: #00004d; --sf-medium:#5333ED; --sf-blue: #55a3ff; --sf-blue-dark: #3c81dc; --main-blue: rgba(85, 163, 255, 1); --light-blue: rgba(85, 163, 255, 0.4); --dark-blue: rgba(59, 113, 177, 1); --vlgray: rgba(0,0,0,0.05); --lgray: rgba(0,0,0,0.15); --text-gray: rgba(0, 0, 0, 0.5); --responsive-width-min: 850px; --responsive-width-med: 1200px; --responsive-width-max: 1470px; --text-border-padding: 80px; --sf-text:#424242; --sf-body-background: #f5f0e8; --sf-font-display: 'Outfit', sans-serif; --sf-font-body: 'DM Sans', sans-serif; --sf-blue-new: #3fb0ff; --sf-teal: #2cd4d9; --sf-blue-rgb: 63,176,255; --sf-teal-rgb: 44,212,217; --sf-brand-grad: linear-gradient(135deg, #3fb0ff 0%, #2cd4d9 100%); --sf-on-dark: #fff; --sf-on-dark-high: rgba(255,255,255,.88); --sf-on-dark-mid: rgba(255,255,255,.65); --sf-on-dark-low: rgba(255,255,255,.45); --sf-on-dark-muted: rgba(255,255,255,.3); --sf-on-dark-border: rgba(255,255,255,.12); --sf-on-dark-surface: rgba(255,255,255,.06); --sf-footer-bg: #060620; --sf-navy: #00004d; --sf-navy-deep: #080830; --sf-header-glass: rgba(6,6,32,0.92); --sf-container-max: 1240px; --sf-grid-color: rgba(11,26,58,.0175); } @font-face { font-family: "proxima-nova"; src: url("/assets/css/proxima-nova.woff2") format('woff2'), url("/assets/css/proxima-nova.woff") format('woff'); } @font-face { font-family: "proxima-nova-thin"; src: url("/assets/css/proxima-nova-thin.woff2") format('woff2'), url("/assets/css/proxima-nova-thin.woff") format('woff'); } .sf-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: white; } .sf-logo-icon { width: 30px; height: 30px; flex-shrink: 0; } .sf-logo-text { font-family: var(--sf-font-display); font-size: 20px; font-weight: 600; color: white; letter-spacing: -0.02em; } body { font-family: 'DM Sans', proxima-nova-thin, Open Sans, sans-serif; margin: 0; height: auto;  width: 100%;  padding-top: calc(var(--navbar-height-base) + 12px); background-color: var(--sf-body-background);  background-image: linear-gradient(var(--sf-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--sf-grid-color) 1px, transparent 1px); background-size: 48px 48px; position: relative; }  body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50vh; background: linear-gradient( to bottom, var(--sf-body-background) 40%, transparent 100% ); z-index: 3;  pointer-events: none; } body * { scroll-margin-top: calc(var(--navbar-height-big) + 10px);  } .page { margin:auto; max-width: var(--page-width); line-height: 1.6; box-sizing: border-box; min-height: calc(100vh - 55px); position: relative; z-index: 5;  } .three-columns-layout { position: relative; z-index: 5;  } .site-footer { margin:auto; max-width: var(--site-width); width: var(--site-width); padding-left: 20px; padding-right: 20px; box-sizing: border-box; background: transparent; text-align: center;  background-image: -webkit-linear-gradient(-0deg,#00004d 0%,#5333ed 49%,#2cd4d9 100%); background-repeat: no-repeat; background-attachment: fixed; padding-top: 10px; } html, body {  margin: 0; } .footer-wrap {  background-image: -webkit-linear-gradient(-0deg,#00004d 0%,#5333ed 49%,#2cd4d9 100%); background-repeat: no-repeat; background-attachment: fixed;  width: 100%; height: 234px;  z-index: 2; position: absolute; } .page {   } .push {  height: 1px; } .small {  } .site-footer p { color: white;  } .site-footer a {   color: #b7cbff; text-decoration: none; }  .site-footer a:hover { text-decoration: underline; } @media screen and (max-width: 1470px) { .page, .site-footer { margin-right: 0; max-width: calc(100% - 300px);  } .index .page, .index .site-footer { margin-left: auto; margin-right: auto;  max-width: var(--page-width); } } @media screen and (max-width: 1200px) { .page, .index .page, .site-footer, .index .site-footer { max-width: 100%; width: auto; } } .listingblock { overflow-x: auto; } p, .paragraph, caption, .imageblock .title, .videoblock .title, li, li::marker, .stemblock, .ulist .title { color: #424242; font-family: proxima-nova-thin, Open Sans, sans-serif; letter-spacing: 0.3px; line-height: 24px; font-size: 16px; } .ulist.no-bullet ul,.ulist.none ul { list-style-type: none; } caption, .imageblock .title, .videoblock .title { font-size: 14px; font-style: italic; }  .btn-tooltip { position: relative; opacity:0; z-index: 10; color:white; background-color:rgba(0,0,0, 0.5); text-align: center; padding: 5px 5px; border-radius: 6px; max-width:300px; white-space: nowrap;  left:0%; margin-left: -50%; transition: all 0.3s; transition-delay: 1s; visibility:hidden; } .btn-tooltip[active] { opacity:1; visibility:visible; transition-delay: 0s; } .btn-tooltip.right { top:-100%; left:200%; }  kbd {  font-size: 13px; display: inline-block; font-weight: 400; padding: 3px 8px; padding-top: 4px; margin: 0 2px; line-height: 12px; vertical-align: 1px; border-radius: 4px; border:1px solid #d1d5da; box-shadow: inset 0px -1px 0px #d1d5da; background-color: #fafbfc !important; color: rgb(68, 77, 86);; } .admonitionblock.tip kbd, .admonition-inline.tip kbd { color: #0088ffc2; border-color: #0088ffc2; box-shadow: inset 0px -1px 0px #0088ff47; }  code.cmd, .listingblock.cmd {  border-radius: 4px; display: inline-flex; padding: 3px 10px 3px 0; margin:0; line-height: 1.4; color: rgba(255, 255, 255, 0.7); background-color: rgba(0,0,0,0.7); background-color: var(--secondarycolor); color:var(--codecolor); } code.cmd { color: hsl(205deg 3% 30%); background-color: hsl(0deg 0% 100%); border: 1px solid hsl(0deg 0% 90%); padding: 15px 25px 15px 15px; border-radius: 15px; width: 100%; box-sizing: border-box; cursor: text; } code.cmd a, code.cmd a:hover, code.cmd a:visited, code.cmd a:focus { color: hsl(205deg 3% 30%); text-decoration: none; } .listingblock.cmd { display: flex; border: none; padding: 1px 20px 1px 20px; } code.cmd > span { background-color: transparent; }  code.cmd .command { cursor: text; margin: 0 0 0 10px; overflow-wrap: anywhere; } .cmd-wrapper { display: flex; justify-content: center; margin: 0.3em 0 1.7em; }  table.file-content { padding: 0; border: 1px solid black; border-collapse: collapse; background-color: #FBE6C2; } table.file-content td { border: 1px solid #F48B29; padding: 10px 10px; } .text-button { border: none; background: inherit; color: var(--text-gray); transition: color 0.2s; font-size: 14px; cursor: pointer; } .text-button:hover { text-decoration: underline; color: var(--main-blue); } .right-align { display: block; width: 100%; text-align: right; } .borderless img { border:none; } .bordered img, .bordered video { border: 1px solid rgba(0, 0, 0, 0.1); } .copy-content { opacity: 0.7; } .copy-content:hover { opacity: 1; } .listingblock { position: relative; } .listingblock .copy-content { position: absolute; right: 0; margin-right: 15px; margin-top: 8px; visibility: hidden; } .copy-content:hover { opacity: 1; } .listingblock .copy-content .copy-confirmation { position: relative; right: 40px; bottom: 5px;  } .copy-content button { background: white; border: 1px solid rgb(174 77 19 / 50%); border-radius: 5px; width: 30px; height: 30px; color: rgb(174 77 19 / 70%); } .cmd-wrapper .copy-content button { margin: 0; padding: 0; width: 20px; height: 20px; } .cmd-wrapper .copy-content { visibility: hidden; margin-left: 10px; display: inline-flex; justify-content: center; } .cmd-wrapper:hover .copy-content { visibility: visible; } .cmd-wrapper .copy-content .copy-confirmation { position: static; margin-left: 5px;  } .cmd-wrapper .copy-content .copy-confirmation[active=false] { display: block; } .cmd-wrapper .copy-content .copy-confirmation[active=true] { display: inline; } .copy-content button:active { filter: brightness(0.95); } .listingblock:hover .copy-content { visibility: visible; } .article .page a:not([class]), .article .page a[class=""] { padding-bottom: 0; position: relative; text-decoration: none; background-image: linear-gradient( hsl(0deg,0%,40%), hsl(0deg,0%,40%) ); background-size: 92% 1px; background-position: 50% 100%; background-repeat: no-repeat; display: inline-flex; transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1); align-items: center; gap: 4px; } .article .page a:not([class]), .article .page a[class=""], .article .page a:not([class]):hover, .article .page a[class=""]:hover, .article .page a:not([class]):visited, .article .page a[class=""]:visited { color: hsl(225deg,3%,30%); } .article .page a:not([class]):hover, .article .page a[class=""]:hover { background-size: 100% 1px; }  button.contact { border: none; min-height: 30px; cursor: pointer; } button.contact, a.contact, .page a.contact, .page a.contact:visited { background-color: var(--sf-blue); border-radius: 3px; color: white; padding-left: 10px; padding-right: 10px; text-decoration: none; transition: background-color .3s ease; white-space: pre; } button.contact:hover, a.contact:hover, .page a.contact:hover { background-color: var(--sf-blue-dark); text-decoration: none; } .relative-anchor { position: relative; width: 0; height: 0; top: 0; left: 0; } .back-to-collection { text-decoration: none;  color: var(--sf-blue-dark); display: flex; flex-direction: row; align-items: center;  justify-content: center; gap: 10px; font-size: 11px;   position: absolute;  width: 40px; height: 40px; top:25px; left: 25px;  background: transparent; border-radius: 20px; transition: background-color 0.4s; } .back-to-collection svg { transform: translateY(3px); color: var(--titlecolor); width: 36px; height: 36px;  } .back-to-collection:hover {   background-color: rgba(0,0,0,0.1); } .btn-tooltip.back { transition-delay: 0.7s; font-weight: normal; font-size: 12px; }  @media screen and (max-width: 900px) { .back-to-collection { position: static; width: auto; height: auto; margin: 10px auto 0; justify-content: flex-start; padding-left: 20px; } .relative-anchor { position: relative; width: auto; height: auto; } } .input.copy-confirmation { padding: 5px 10px; font-family: 'proxima-nova-thin', Open Sans; font-size: 11pt; font-weight: normal;  color: white; background-color: #3e497e; border-radius: 3px; transition: opacity 0.3s; z-index: 99; } .input.copy-confirmation::before { content: " "; width: 0; height: 0; border-style: solid; border-width: 6px 6px 0 6px; border-color: #3e497e transparent transparent transparent; position: absolute; transform: translate(15px, 22px); }  .three-columns-layout { display: grid; grid-template-columns: 1fr 800px 1fr; } .three-columns-layout .page { margin: 0; } @media screen and (max-width:1500px) { .three-columns-layout { grid-template-columns: 1fr 800px 1fr; } } @media screen and (max-width:1300px) { .three-columns-layout { grid-template-columns: 1fr auto; } .three-columns-layout > *:nth-child(3) { display: none; } } @media screen and (max-width:1100px) { .three-columns-layout { grid-template-columns: 100%; margin-right: 0; } }  .sf-hero-gradient { position: absolute; top: 0; left: 0; right: 0; height: 262px; background: linear-gradient(120deg, rgb(6,16,64) 0%, rgb(26,93,184) 49%, rgb(42,175,196) 100%); z-index: 4; pointer-events: none; } .sf-hero-gradient::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; -webkit-mask-image: radial-gradient(600px 200px at 50% 150px, black 15%, transparent 75%); mask-image: radial-gradient(600px 200px at 50% 150px, black 15%, transparent 75%); }  .docs-page .sf-hero-gradient { height: calc(var(--navbar-height-big) + 12px); } .docs-page .title-big { color: var(--titlecolor); } .docs-page .page-spacer { background-color: var(--sf-body-background); }  body { padding-top: calc(var(--navbar-height-base) + 12px); } body * { scroll-margin-top: calc(var(--navbar-height-big) + 10px); }  .title-big { color: white; position: relative; z-index: 5; text-align: center; font-size: 32px; line-height: 1.2; padding-bottom: 38px; margin-top: 40px; } .article .title-big { margin-bottom: 30px; }  .title-big span { display: block; text-align: center; margin-top: 8px; font-size: 20px; color: rgba(255,255,255,0.75); }  .navbar-background { position: fixed; height: var(--navbar-height-base); width: 100%; background-color: transparent; z-index: 10; top: 0; left: 0; padding: 6px 0; transition: box-shadow 0.35s ease, height 0.3s ease, border-color 0.35s ease; overflow: visible; border-bottom: none; } .navbar-background.scrolled { background-color: var(--sf-header-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: none; border-bottom: none; padding: 0; }  .compact-title { display: none; font-family: var(--sf-font-display); font-size: 15px; font-weight: 600; color: white; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 500px; opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s ease; cursor: pointer; } .compact-title:hover { opacity: 0.75; } .navbar { margin: auto; } .navbar.row-primary { height: var(--navbar-height-base); }  .navbar-background.compact { height: 36px; padding: 0; } .navbar-background.compact .sf-logo { transform: scale(0.75); transform-origin: left center; } .navbar-background.compact .menu-bar-list.level1 { display: grid; align-items: center; } .navbar-background.compact .level1 .menu-bar { grid-row: 1; grid-column: 1; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .navbar-background.compact .compact-title { grid-row: 1; grid-column: 1; display: block; opacity: 1; transform: translateY(0); align-self: center; justify-self: end; margin-right: 10px; } .navbar-background.compact ~ .row-secondary.scrolled { top: 36px; }  .navbar.row-secondary { height: calc(var(--navbar-height-big) - var(--navbar-height-base)); background-color: transparent; z-index: 8; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: none; } .navbar.row-secondary .navbar-panel { border-bottom: 1px solid rgba(255,255,255,0.12); transition: border-color 0.35s ease; } .navbar.row-secondary.scrolled { background-color: rgba(255,255,255,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 0 0 rgba(0,0,0,0.1); } .navbar.row-secondary.scrolled .navbar-panel { border-color: transparent; } .navbar-panel { margin: auto; display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 100%; max-width: var(--navbar-width-max); padding: 0 40px; } @media screen and (min-width:950px) and (max-width: 1300px) { .navbar-panel {    max-width: 950px; margin-left: auto; margin-right: auto; } } @media screen and (min-width: 1400px) { .navbar-panel {  } } .sf-logo-mobile { display: none; } .sf-logo { margin-top: auto; margin-bottom: auto; transition: transform 0.3s ease; } .menu-bar-list { display:flex; flex-flow: row wrap; align-items: center; } .menu-bar { display: flex; justify-content: flex-end; align-items: center; box-sizing: border-box; margin: 16px auto; } .menu-bar li { color: var(--sf-on-dark-high); } .menu-item { padding: 5px 2px; list-style-type: none; display: inline-block; box-sizing: border-box; margin: auto 2px; } .nav-separator { display: flex; align-items: center; list-style: none; padding: 0 4px; } .nav-separator::before { content: ''; width: 1px; height: 16px; background: var(--sf-on-dark-muted); }  .nav-external-icon { width: 8px; height: 8px; margin-left: 3px; opacity: 0.5; vertical-align: baseline; position: relative; top: -2px; } .level1 .menu-item:hover > *, .level1 .menu-item.active > * { background: rgba(255,255,255,0.12); color: white; border-radius: 100px; }  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .menu-item > * { transition: all .3s; box-sizing: border-box; font-family: var(--sf-font-body); text-transform: none; font-size: 14px; font-weight: 500; letter-spacing: normal; line-height: 1.6; color: inherit; text-decoration: none; padding: 6px 14px; border-radius: 100px; }   .level2 .menu-item > * { padding: 3px 6px; margin: 0; color: rgba(255,255,255,0.65); text-transform: uppercase; font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 1.1px; transition: color 0.35s ease; }  .row-secondary.scrolled .level2 .menu-item > * { color: rgba(0,0,0,0.45); } .row-secondary.scrolled .level2 .menu-item:hover > * { color: #55a3ff; } .row-secondary.scrolled .level2 .menu-item.active { background: rgba(85, 163, 255, 0.1); } .row-secondary.scrolled .level2 .menu-item.active a { color: #55a3ff; } .menu-bar-list.level2 { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;  -ms-overflow-style: none;  } .menu-bar-list.level2::-webkit-scrollbar { display: none;  } .level2 .menu-bar { display: flex; margin: 0; padding-left: 0; align-items: flex-end; flex-shrink: 0; margin-left: auto;  } .level2 .menu-bar[active] { display: flex; } .level2 .menu-item { text-transform:none; display: flex; align-items: center; border-radius: 100px; background: transparent; transition: background-color 0.35s ease; padding: 3px 2px; }   .level2 .menu-item::before { content: '·'; color: var(--sf-on-dark-muted); font-size: 16px; pointer-events: none; display: flex; align-items: center; justify-content: center; width: 6px; margin: 0 6px; flex-shrink: 0; } .level2 .menu-item:first-child::before { content: ''; visibility: hidden; } .row-secondary.scrolled .level2 .menu-item::before { color: rgba(0,0,0,0.25); }  .level2 .menu-item.active::before { content: ''; height: 6px; border-radius: 50%; font-size: 0; background-color: var(--sf-teal); box-shadow: 0 0 8px rgba(44, 212, 217, 0.12); animation: blink 2s infinite; visibility: visible; }  .row-secondary.scrolled .level2 .menu-item.active::before { background-color: #55a3ff; box-shadow: 0 0 8px rgba(85, 163, 255, 0.2); animation: none; color: transparent; } .minimized .level2 .menu-item::before { display: none; }  .level2 .menu-item.active { background: rgba(255,255,255,0.12); } .level2 .menu-item.active a { color: var(--sf-teal); }  .scrolled .level2 .menu-item:hover a { color: #55a3ff; } .level2 .menu-item:hover > * { color: #55a3ff; }  .row-secondary { position: -webkit-sticky; position: sticky; top: calc(var(--navbar-height-base) + 12px); } .row-secondary .navbar-panel { display: flex; padding-left: 0; padding-right: 0; } .row-secondary .navbar-panel .docs-home { flex-grow: 1; } .row-secondary .navbar-panel .search { max-width: 250px; flex-grow: 2; } .row-secondary .navbar-panel > * { flex-grow: 6; }  .rewind-top { max-width:24px; width: 0; height:24px; border-radius: 4px; margin: 5px 0; background: transparent; display: none; opacity: 0;     position: relative; left: 24px;  transition: all 0.3s; border: 1px solid rgba(255, 255, 255, 0.1); } .rewind-top.scrolled {  display: block; opacity: 1; } .rewind-top::before { content: ""; width:24px; height:24px; display: block; background: url("/assets/images/chevron-up.svg") no-repeat; } .rewind-top:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } .rewind-top:active { box-shadow: 0 0 0px rgba(0, 0, 0, 0.15); background: rgba(0,0,0,0.005); }   .page-stats { margin:auto; transform: translate(0, -26px); text-align:center; opacity: 0.6; display:flex; justify-content: stretch; width:40%; } .page-stats .date { margin: 0 auto; display: inline-flex; } .page-stats .date .text {  font-weight:bold; font-size: 12px; } .page-stats .date .icon {  margin-right:5px; height: 20px; width:auto; border:none; } .scrolled .page-stats { visibility:hidden; }  .navbar .aa-InputWrapper, .navbar .aa-InputWrapperPrefix, .navbar .aa-Input { max-height:24px; } .navbar form { max-height: 30px; } :root { --aa-search-input-height: 24px; } .search { background: none; position: relative; display: inline-block;   font-family: proxima-nova-thin, Helvetica; } .searchbox form { border-radius: 5px; margin: 0; }  .searchbox input, .searchbox form { background-color: transparent; box-shadow: none; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, font-family 0.25s ease, font-size 0.25s ease, letter-spacing 0.25s ease; } .searchbox input { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.65); font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 1.1px; text-transform: uppercase; } .searchbox input::placeholder { color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1.1px; font-size: 11px; } .searchbox form::before { filter: brightness(3); opacity: 0.5; } .searchbox input:focus { background-color: white; box-shadow: inset 0 1px 4px 0 rgb(119 122 175 / 30%); border-color: #0075ff; color: rgba(0,0,0,0.8); font-family: var(--sf-font-body); font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; } .searchbox input:focus::placeholder { color: rgba(0,0,0,0.4); } .searchbox:has(input:focus) form::before { filter: none; opacity: 0.5; }  .row-secondary.scrolled .searchbox input { border-color: rgba(0,0,0,0.15); color: rgba(0,0,0,0.5); } .row-secondary.scrolled .searchbox input::placeholder { color: rgba(0,0,0,0.35); } .row-secondary.scrolled .searchbox form::before { filter: none; opacity: 0.6; } .row-secondary.scrolled .searchbox input:focus { background-color: white; border-color: #0075ff; font-family: var(--sf-font-body); font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; } .search-results { position: absolute;  margin: 0; padding: 0; min-width: 243px; }  .page-load { display: none; margin: 0 10px; max-width: 20px; max-height: 20px; width: 20px; height: 20px; transform: scale(0.4); } .page-load.active { display: inline-block; } .items-list { display: flex; flex-direction: column; background: white; box-shadow: 0 0 5px rgba(0,0,0,0.1); border-radius: 5px; padding: 10px; border: 1px solid rgba(0, 0, 0, 0.1); } .items-list .item { text-decoration: none; padding: 5px; display: flex; flex-direction: row; justify-content: flex-start; align-items: baseline; } .items-list .item .title { font-size: 14px; color:black; max-width: 30em; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .items-list .item .groups { font-size: 12px; color:gray;  } .items-list .item .groups .divider::after { content: "/"; margin-left: 3px; margin-right: 3px; } .items-list .item .groups::before { content: " in ";    margin-left: 0.3em; } .items-list .item:hover { background: rgba(0,0,0,0.1); } .items-list svg { color:gray; opacity: 0; } .items-list .item:hover svg { opacity: 1; } .docs-home { text-decoration: none; color:inherit; } .minimized { display: none; transition: all 0.2s; z-index: 99; position: sticky; top: 44px; width: 100%; background-color: var(--sf-header-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--sf-on-dark-border); }      .minimized.unfolded {     } .minimized .menu-bar { display: flex; flex-flow: column wrap; justify-content: center; background: transparent; margin: 0 auto; padding-top: 10px; padding-bottom: 10px; } .minimized .level2 .menu-item > * { color: var(--sf-on-dark-mid); } .minimized .level2 .menu-item.active > * { color: var(--sf-blue-new); } .minimized .level2 .menu-item.active a::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background-color: var(--sf-blue-new); margin-right: 10px; vertical-align: middle; } .minimized .level1 .menu-item > * { color: var(--sf-on-dark-high); }  .minimized .menu-bar.level2 > * { border-bottom: 1px solid rgba(100, 100, 100, 0.25); width: 100%; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; } .minimized .menu-bar.level2 :last-child { border: none; } .minimized .menu-bar.level1 { display: none; background: rgba(255,255,255,0.04); } .minimized .menu-bar.level2 { background: transparent; color: var(--sf-on-dark-mid); padding-inline-start: 0; } .hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; background: transparent; border: 1px solid var(--sf-on-dark-border); border-radius: 8px; cursor: pointer; padding: 0; margin: auto 10px; } .hamburger-line { display: block; width: 18px; height: 2px; background: white; border-radius: 1px; transition: transform 0.3s, opacity 0.3s; } .hamburger.unfolded .line1 { transform: translateY(7px) rotate(45deg); } .hamburger.unfolded .line2 { opacity: 0; } .hamburger.unfolded .line3 { transform: translateY(-7px) rotate(-45deg); } @media screen and (max-width:980px) { .row-secondary .navbar-panel .search, .sf-logo { margin-left: 10px; } } @media screen and (max-width: 900px) { html { overflow-x: hidden; } body { padding-top: var(--navbar-height-base); overflow-x: hidden; } img, video, iframe, table { max-width: 100%; } .row-primary { display: none; } .row-secondary, .navbar.row-secondary.scrolled { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .row-secondary .navbar-panel .search { max-width: 100%; }  .sf-logo-mobile { display: flex; align-items: center; flex-shrink: 0; margin-left: 12px; color: white; } .sf-logo-mobile .sf-logo-icon { width: 26px; height: 26px; } /* do not take a share of the free space (.navbar-panel > * grows), it belongs to the search box */ .row-secondary .navbar-panel > .sf-logo-mobile { flex: 0 0 auto; } .sf-logo-mobile + .search { margin-left: 10px !important; }  .row-secondary .navbar-panel > .search { flex: 0 1 460px; min-width: 0; } .row-secondary .navbar-panel > .menu-bar-list.level2 { flex: 1 1 0; min-width: 0; } .row-secondary .navbar-panel > .hamburger { flex: 0 0 auto; width: 44px; } .hamburger { display: flex; } .menu-bar-list.level2 .menu-bar { display: none; } .minimized.unfolded { display: inherit; } .minimized .menu-bar { display: flex; flex-direction: column; padding: 0; margin: 0; list-style: none; } .minimized .menu-bar.level1 { display: flex; flex-direction: column; border-bottom: 1px solid rgba(255,255,255,0.08); } .minimized .menu-bar.level1 > * { border-bottom: 1px solid var(--sf-on-dark-border); width: 100%; padding: 0; } .minimized .menu-bar.level1 :last-child { border-bottom: none; } .minimized .menu-bar.level1 a { display: block; padding: 14px 24px; font-size: 15px; font-weight: 500; color: var(--sf-on-dark-high); text-decoration: none; } .minimized .menu-bar.level1 li:hover a, .minimized .menu-bar.level1 li a:hover { background: rgba(255,255,255,0.06); } .minimized .menu-bar.level2 { padding-top: 4px; } .minimized .menu-bar.level2 > * { border-bottom: 1px solid var(--sf-on-dark-border); width: 100%; padding: 0; } .minimized .menu-bar.level2 :last-child { border-bottom: none; } .minimized .menu-bar.level2 a { display: block; padding: 12px 24px; font-size: 14px; color: var(--sf-on-dark-mid); text-decoration: none; } .minimized .menu-bar.level2 li:hover a, .minimized .menu-bar.level2 li a:hover { background: rgba(255,255,255,0.06); color: var(--sf-on-dark-high); }  .navbar.row-secondary { background-color: var(--sf-header-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--sf-on-dark-border); } .searchbox input { border-color: var(--sf-on-dark-border); color: var(--sf-on-dark-mid); } .searchbox input:focus { color: rgba(0, 0, 0, 0.8); background-color: white; } .searchbox input::placeholder { color: var(--sf-on-dark-low); } .searchbox form::before { filter: brightness(1.5); } .rewind-top { position: fixed; left: auto; right: 34px; top: 100%; } .three-columns-layout.unfolded { filter: blur(10px); }  body * { scroll-margin-top: calc(var(--navbar-height-base) + 10px); }  .minimized { position: fixed; top: var(--navbar-height-base); left: 0; right: 0; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }  .compact-title { max-width: 60vw; }  .search-results { min-width: auto; width: 100%; left: 0; right: 0; }  .sf-hero-gradient { height: 165px; } }  /* ================================================================ * Footer — Dark theme matching sim-flow.com * ================================================================ */ .footer { position: relative; z-index: 5; color: var(--sf-on-dark); overflow: hidden; background: radial-gradient(ellipse 60% 50% at 85% 0%, rgba(20,12,50,.65) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 50% 50%, rgba(8,18,55,.5) 0%, transparent 70%), var(--sf-footer-bg); margin-top: 0; padding: 0; }  .footer-streamlines { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .fsl { fill: none; stroke-linecap: round; stroke-width: 1.5; stroke-dasharray: 800; stroke-dashoffset: 800; animation: flowDash 14s ease-in-out infinite; } .fsl-1 { stroke: rgba(var(--sf-blue-rgb), 0.1); } .fsl-2 { stroke: rgba(var(--sf-teal-rgb), 0.07); animation-delay: 4s; animation-duration: 16s; } .fsl-3 { stroke: rgba(var(--sf-blue-rgb), 0.06); animation-delay: 7s; animation-duration: 18s; } @keyframes flowDash { 0% { stroke-dashoffset: 800; } 100% { stroke-dashoffset: -800; } }  .footer-card { position: relative; z-index: 2; border-top: 1px solid var(--sf-on-dark-border); } .footer-card-content { position: relative; z-index: 3; padding: 100px 40px 86px; max-width: var(--sf-container-max); margin: 0 auto; }  .footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .footer-headline { font-family: var(--sf-font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; color: var(--sf-on-dark-mid); margin: 0; } .footer-headline em { font-style: italic; font-weight: 400; background: var(--sf-brand-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }  .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-self: start; padding-top: 8px; } .footer-col h3 { font-family: var(--sf-font-display); font-size: 11px; font-weight: 600; color: var(--sf-on-dark-low); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0; margin-bottom: 20px; text-align: left; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 10px; letter-spacing: normal; font-family: var(--sf-font-body); line-height: 1.6; } .footer-col a { font-family: var(--sf-font-body); font-size: 14px; font-weight: 400; color: var(--sf-on-dark-mid); text-decoration: none; letter-spacing: normal; line-height: 1.6; transition: color .25s, transform .25s; position: relative; display: inline-block; } .footer-col a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: linear-gradient(90deg, var(--sf-blue-new), var(--sf-teal)); transition: width .3s cubic-bezier(.23,1,.32,1); } .footer-col a:hover { color: var(--sf-on-dark); transform: translateX(3px); } .footer-col a:hover::after { width: 100%; }  .footer-disclaimer { position: relative; z-index: 2; max-width: var(--sf-container-max); margin: 0 auto; padding: 16px 40px 0; } .footer-disclaimer p { font-family: var(--sf-font-body); font-size: 11px; color: var(--sf-on-dark-muted); text-align: center; line-height: 1.5; margin: 0; opacity: 0.7; }  .footer-bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 28px 40px; max-width: var(--sf-container-max); margin: 0 auto; border-top: 1px solid var(--sf-on-dark-surface); gap: 24px; } .footer-bottom-left { display: flex; align-items: center; gap: 16px; } .footer-logo-sm { display: flex; align-items: center; gap: 8px; font-family: var(--sf-font-display); font-size: 16px; font-weight: 600; color: var(--sf-on-dark-mid); letter-spacing: -0.01em; text-decoration: none; transition: color .3s; } .footer-logo-sm:hover { color: var(--sf-on-dark); } .footer-social { display: flex; gap: 8px; } .footer-social a { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--sf-on-dark-low); background: rgba(255,255,255,0.03); border: 1px solid var(--sf-on-dark-surface); text-decoration: none; transition: .3s cubic-bezier(.23,1,.32,1); transition-property: color, background, border-color, transform, box-shadow; } .footer-social a:hover { color: var(--sf-on-dark); background: rgba(var(--sf-blue-rgb), 0.1); border-color: rgba(var(--sf-blue-rgb), 0.25); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--sf-blue-rgb), .15); } .footer-social svg { width: 14px; height: 14px; } .footer-bottom-right { display: flex; align-items: center; gap: 16px; } .footer-copy { font-family: var(--sf-font-body); font-size: 12px; color: var(--sf-on-dark-muted); white-space: nowrap; }  @media (max-width: 900px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } .footer-top { grid-template-columns: 1fr; gap: 28px; } }  @media (max-width: 640px) { .footer-card-content { padding: 40px 20px 28px; } .footer-top { grid-template-columns: 1fr; gap: 28px; } .footer-headline { font-size: 28px; } .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 20px; } .footer-disclaimer { padding: 16px 20px 0; } .footer-bottom { flex-direction: column; gap: 14px; align-items: flex-start; padding: 28px 20px; } .footer-bottom-right { justify-content: flex-start; gap: 12px; } }  @media (max-width: 640px) { .title-big { font-size: 24px; margin-top: 20px; padding-bottom: 40px; } .title-big span { font-size: 16px; } }  @media (min-width: 641px) and (max-width: 900px) { .sf-hero-gradient { height: 200px; } }  .ais-SearchBox, .ais-SearchBox * { box-sizing: border-box; } .ais-SearchBox-form { position: relative; display: flex; width: 100%; height: 2.5rem; font-size: .875rem; line-height: 1.25rem; background-color: #fff; } .ais-SearchBox-form::before { content: ""; position: absolute; top: 50%; left: 1rem; width: 1rem; height: 1rem; margin-top: -.5rem; background: transparent url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235a5e9a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%3E%3C%2Fline%3E%3C%2Fsvg%3E") repeat scroll 0 0; } .ais-SearchBox-input { -webkit-appearance: none; appearance: none; flex: 1 1 0%; max-width: 100%; padding-left: 2.5rem; font: inherit; color: #23263b; caret-color: #5a5e9a; background-color: #fff; border: 1px solid #d6d6e7; border-radius: 3px; box-shadow: inset 0 1px 4px 0 rgba(119,122,175,.3); } .ais-SearchBox-input::placeholder { color: #5a5e9a; } .ais-SearchBox-input:focus { border-color: #3c4fe0; box-shadow: 0 1px 0 0 rgba(35,38,59,.05); outline: none; } .ais-SearchBox-input::-webkit-search-cancel-button, .ais-SearchBox-input::-webkit-search-decoration, .ais-SearchBox-input::-webkit-search-results-button, .ais-SearchBox-input::-webkit-search-results-decoration { display: none; } .ais-SearchBox-submit { display: none; } @media (max-width: 767px) { .ais-SearchBox-input { font-size: 1rem; } }  .search-root { position: relative; } .search-root .ais-SearchBox-form { position: relative; } .searchbox input { padding-right: 34px; } .searchbox input::-webkit-search-cancel-button { display: none; }  .searchbox input:not(:placeholder-shown) { font-family: var(--sf-font-body); font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; } .search-shortcut { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 500 10px/1 'DM Mono', monospace; color: var(--sf-on-dark-low);  background: transparent !important; margin: 0; box-shadow: none; border: 1px solid var(--sf-on-dark-border); border-radius: 4px; padding: 3px 6px; pointer-events: none; } .search-root:focus-within .search-shortcut { display: none; } .row-secondary.scrolled .search-shortcut { color: rgba(0,0,0,0.35); border-color: rgba(0,0,0,0.15); } .search-clear { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 2px 7px; border-radius: 4px; font-size: 18px; line-height: 1; color: rgba(0,0,0,0.45); cursor: pointer; } .search-clear:hover { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.75); } .search-root:not(:focus-within) .search-clear { color: var(--sf-on-dark-mid); } .row-secondary.scrolled .search-root:not(:focus-within) .search-clear { color: rgba(0,0,0,0.45); }  .search-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: min(680px, calc(100vw - 32px)); max-height: min(72vh, 680px); display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(11,26,58,0.08); border-radius: 12px; box-shadow: 0 24px 48px -12px rgba(0,0,77,0.28), 0 4px 12px rgba(0,0,77,0.08); overflow: hidden; font-family: var(--sf-font-body); color: var(--sf-text); text-align: left; animation: search-panel-in 0.12s ease-out; } @keyframes search-panel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .search-panel-body { overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 8px; } .search-group + .search-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(11,26,58,0.06); } .search-group-title { padding: 10px 10px 6px; font: 500 10.5px/1 'DM Mono', monospace; letter-spacing: 1.1px; text-transform: uppercase; color: rgba(11,26,58,0.45); } .search-item { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; } .search-item:hover, .search-item:focus { color: inherit; text-decoration: none; } .search-item.active { background: rgba(var(--sf-blue-rgb), 0.10); } .search-tutorials { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; } .search-tutorial { gap: 6px; padding: 6px; } .search-thumb { display: block; aspect-ratio: 16 / 10; background: #f4f6fa; border-radius: 6px; overflow: hidden; } .search-thumb img { width: 100%; height: 100%; object-fit: contain; } .search-tutorial-title { font: 600 13px/1.3 var(--sf-font-display); color: var(--titlecolor); } .search-tutorial-step { font-size: 12px; line-height: 1.35; color: rgba(66,66,66,0.8); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .search-tutorial-step::before { content: "Step: "; color: rgba(11,26,58,0.45); } .search-document { padding: 2px 0; } .search-breadcrumb { font: 500 10px/1.2 'DM Mono', monospace; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(11,26,58,0.45); } .search-breadcrumb:empty { display: none; } .search-title { font: 600 15px/1.3 var(--sf-font-display); color: var(--titlecolor); } .search-snippet { font-size: 13px; line-height: 1.5; color: rgba(66,66,66,0.85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .search-section { margin-left: 12px; padding-left: 14px; border-left: 2px solid rgba(11,26,58,0.08); border-radius: 0 8px 8px 0; } .search-section.active { border-left-color: var(--sf-blue-new); } .search-section-title { font-size: 13.5px; font-weight: 500; color: var(--titlecolor); } .search-more { margin-left: 28px; padding: 2px 0 6px; font-size: 12px; color: rgba(11,26,58,0.45); } .search-panel mark {  background-color: rgba(var(--sf-teal-rgb), 0.22) !important; box-shadow: inset 0 -1.5px 0 rgba(var(--sf-teal-rgb), 0.9); border-radius: 2px; padding: 0 1px; color: inherit;  font: inherit; letter-spacing: inherit; border: 0; } .search-math { font-family: 'Times New Roman', serif; } .search-empty, .search-status { padding: 18px 12px; font-size: 14px; } .search-empty p { margin: 0; } .search-hint { margin-top: 6px !important; font-size: 13px; color: rgba(66,66,66,0.75); } .search-hint a { color: var(--sf-blue-dark); } .search-status { color: rgba(66,66,66,0.7); } .search-panel-footer { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid rgba(11,26,58,0.06); background: #fafbfd; font-size: 11.5px; color: rgba(11,26,58,0.5); } .search-panel-footer kbd { box-shadow: none; margin-right: 3px; padding: 2px 5px; font: 500 10px/1 'DM Mono', monospace; color: rgba(11,26,58,0.6); background: #fff; border: 1px solid rgba(11,26,58,0.15); border-bottom-width: 2px; border-radius: 4px; }  @media (hover: none) { .search-shortcut, .search-panel-footer { display: none; } }  @media screen and (max-width: 900px) { .search-panel { position: fixed; top: 50px; left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 60px); } .search-tutorials { grid-template-columns: repeat(2, 1fr); } }  @media screen and (max-width: 600px) { .search-tutorials { grid-template-columns: 1fr; gap: 2px; } .search-tutorial { display: grid; grid-template-columns: 76px 1fr; column-gap: 12px; align-items: center; padding: 6px 8px; } .search-tutorial .search-thumb { grid-row: span 2; } .search-tutorial-title, .search-tutorial-step { align-self: end; } .search-tutorial-step { align-self: start; -webkit-line-clamp: 1; } } .section .copy-link, .sect2 h3 .copy-link { display: inline-block;   margin-left: 0px;   transform: translateY(2px); padding: 1px;  opacity: 0; transition: opacity 0.3s; } .section h2:hover .copy-link, .sect2 h3:hover .copy-link {   opacity: 1; } .copy-link:hover {  border-radius: 3px;   background-color: rgba(0, 0, 0, 0.1); } @keyframes dissmiss { from {opacity: 1;} to {opacity: 0;} } .copy-confirmation[active=true]::after { content: "Copied!"; font-size: 12px; display: inline-block; animation-name: dissmiss; animation-duration: 0.5s; opacity: 0; position: relative; width: 0; max-width: 0; } :root { --page-width: var(--site-width); } body { background-color: var(--sf-body-background); } .page { padding-top: 0; }  .index .title-big { text-align: center; margin-top: 40px; margin-bottom: 0; padding-bottom: 38px; font-family: var(--sf-font-display); font-size: 42px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; } .index .title-big span { display: block; font-weight: 400; font-style: italic; font-size: 28px; background: linear-gradient(90deg, var(--sf-blue-new), var(--sf-teal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @media screen and (max-width: 900px) { .index .title-big { font-size: 28px; margin-top: 20px; padding-bottom: 40px; } .index .title-big span { font-size: 20px; } } @media screen and (max-width: 500px) { .index .title-big { font-size: 24px; } .index .title-big span { font-size: 17px; } }  .wellcome-screen .section:first-child { margin-top: 20px; } .page-header { color: white; } .main-titles { margin: 0; margin-top: 40px; margin-bottom: 20px; padding: 0; } .main-titles h1, .main-titles h3 { text-align: center; font-family: proxima-nova-thin, Helvetica; margin: 0; padding: 0; font-weight: 400; } .main-titles h1 { font-weight: 400; font-size: 48px; line-height: 1; } .main-titles h3 {  } .wellcome-screen { margin: auto; color: var(--sf-text); } .contentGroup { display: flex; flex-direction: row; } .contentGroup a { color: white; text-decoration: none; opacity: 0.6; transition: opacity 0.3s; font-weight:bold; } .contentGroup a:hover { opacity: 1; }  .search-results { margin:20px; margin-top: 29px; border-radius: 3px; padding: 0; position: inherit; } .section-title { color: rgba(0, 0, 0, 0.5); background: rgba(255, 255, 255, 0.8); padding: 7px; padding-left: 20px; margin: 0; } .search-results p, .search-results div { color: var(--sf-text); } .tutorial-card { text-decoration: none; background-color: white; box-shadow: none; border: 1px solid rgba(0,0,0,0.15); border-radius: 5px; display: block; margin: 5px; min-width: 150px; text-align: center; transition: all 0.2s; } .tutorial-card:hover { box-shadow: 0px 0px 10px #d1d5da; } .tutorial-card:active { box-shadow: 0px 0px 3px #d1d5da; } .tutorial-card .preview { margin: auto; max-height: 80px; width: auto; } a.link { display: flex; flex-direction: row; justify-content: center; align-items: start; } a .icon.external-link { opacity: 0; transition: opacity 0.2s; } a:hover .icon.external-link { opacity: 1; } .hor-section .list { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; } .hor-section .title { text-align: center; color: gray; } .hor-section .list svg { color: darkgray; visibility: visible; margin-top: 20px; opacity: 1; } div.tutorials { margin-bottom: 2em; } .hor-section .title h2 { margin: 0; } .hor-section .directory { width: 33%; padding: 0; margin: 0; } .ver-section.list { display: flex; flex-direction: column; align-items: left; margin: 0; } .directory .title { margin: 0; } .directory .list a h4 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .directory .list a:hover h4 { text-decoration: underline; } .directory .list a > * { padding: 10px 5px; margin: 0; } .titledlink { display: flex; flex-direction: row; color: var(--titlecolor); text-decoration: none; font-size: 14px; text-overflow: ellipsis; overflow: hidden; } .titledlink .icon.external-link { color: var(--titlecolor); opacity: 0; } .titledlink:hover .icon.external-link { opacity: 1; } .transparent { background-color: inherit; border: none; box-shadow: none; } .search-container { display: flex; flex-direction: column; align-items: stretch; } .read-more { text-decoration: none; color: #557ce0; cursor: pointer; } .read-more:hover { text-decoration: underline; } .read-more::after { border-style: solid; border-width: 0.2em 0.2em 0 0; content: ''; display: inline-block; height: 0.45em; left: 0.15em; position: relative; top: 0.15em; transform: rotate(45deg) translateY(0.4em) scale(0.8); vertical-align: top; width: 0.45em; margin-left: 5px; } .hor-list { display: flex; flex-flow: row wrap; justify-content: center; gap: 20px; width: 100%; margin: 30px auto; } @media screen and (max-width: 740px) { .search-results { margin-left: 0; margin-right: 0; } .hor-list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; justify-content: flex-start; gap: 12px; padding: 0; scroll-padding-inline-start: 16px; } .hor-list::before, .hor-list::after { content: ''; flex-shrink: 0; width: 4px;  } .hor-list .item { margin: 10px 0; flex-shrink: 0; scroll-snap-align: start; } } .hor-list .item { width: 250px; min-height: 220px; height: auto; text-decoration: none; color: rgba(0, 0, 0, 0.5); font-family: proxima-nova, Helvetica; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border-radius: 7px; border: 1px solid rgba(0, 0, 0, 0.2); background: white; transition: all 0.3s; box-shadow: 0px 2px 15px -9px var(--dark-blue); overflow: hidden; } .hor-list .item.placeholder { min-width: 250px; min-height: 220px; } .item h4 { margin: 0; } .hor-list .item:hover { box-shadow: none; border-color: rgba(0, 0, 0, 0.1); } .item.tutorial img, .item.tutorial video { max-width: 225px; height: auto; max-height: 190px; border-top-left-radius: 5px; border-top-right-radius: 5px; transform: scale(1.05); transition: all 0.3s; margin: auto; } .item.tutorial:hover img, .item.tutorial:hover video { transform: none; } .section { display: flex; flex-direction: column; align-items: center; padding-bottom: 30px; margin: 30px auto; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .section .titles { margin: 0; padding: 0; } .section .titles > * { font-weight: 200; margin: 0; padding: 0; line-height: 1.3; text-align: center; } .section .titles h2 { font-family: proxima-nova-thin; font-size: 24px; } .section .titles h3 { font-family: proxima-nova; text-transform: uppercase; font-size: 14px; } .section .card.item { padding-top: 10px; background-color: white; border-radius: 7px; max-width: none; width: 280px; height: auto; max-height: 280px; margin: 10px auto; } .section .card.item .titles { margin-bottom: 15px; } .section .titles h3 { color: rgba(0, 0, 0, 0.6); } .section .card.item img, .section .card.item:hover img { min-width: 280px; filter: brightness(1.1); transform:scale(1.1); transition: all 0.3s; } .section .card.item:hover img { transform: none; } .section.two-column { display: flex; flex-flow: row nowrap; padding-top: 20px; align-items: center; justify-content: space-between; } .section.two-column { margin: 20px auto; } .section.two-column .image-col { margin-right: 20px; } .section.two-column .image-col img { min-width: 0; width: 300px; max-width: 100%; border-radius: 10px; } @media screen and (max-width: 740px) { .section.two-column { flex-flow: column nowrap; padding-left: 16px; padding-right: 16px; } .section.two-column .image-col { margin-right: 0; margin-bottom: 15px; } } .section .read-more { float: right; } .section.contact { padding-top: 100px; border: none; } a.contact-ref { text-decoration: none; border: 2px solid #55a3ff; padding: 8px 45px; color: #55a3ff; border-radius: 4px; margin: 18px; font-size: 20px; } a.contact-ref:hover { border-color: #3c81dc; color: #3c81dc; } .contact h3, .contact h2 { margin: 0; padding: 0; } .contact h3 { line-height: 1; } .contact h2 { font-size: 48px; line-height: 1.2; margin-bottom: 20px; } @media screen and (max-width: 740px) { .section.contact { padding-top: 40px; padding-left: 16px; padding-right: 16px; } .contact h2 { font-size: 28px; } a.contact-ref { padding: 8px 30px; font-size: 16px; } }  @media (min-width: 641px) and (max-width: 900px) { .sf-hero-gradient { height: 165px; } } .loader { margin: 100px auto; font-size: 7px; width: 1em; height: 1em; border-radius: 50%; position: relative; text-indent: -9999em; -webkit-animation: load5 1.1s infinite ease; animation: load5 1.1s infinite ease; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } @-webkit-keyframes load5 { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #3daae1, 1.8em -1.8em 0 0em rgba(61,170,225, 0.2), 2.5em 0em 0 0em rgba(61,170,225, 0.2), 1.75em 1.75em 0 0em rgba(61,170,225, 0.2), 0em 2.5em 0 0em rgba(61,170,225, 0.2), -1.8em 1.8em 0 0em rgba(61,170,225, 0.2), -2.6em 0em 0 0em rgba(61,170,225, 0.5), -1.8em -1.8em 0 0em rgba(61,170,225, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(61,170,225, 0.7), 1.8em -1.8em 0 0em #3daae1, 2.5em 0em 0 0em rgba(61,170,225, 0.2), 1.75em 1.75em 0 0em rgba(61,170,225, 0.2), 0em 2.5em 0 0em rgba(61,170,225, 0.2), -1.8em 1.8em 0 0em rgba(61,170,225, 0.2), -2.6em 0em 0 0em rgba(61,170,225, 0.2), -1.8em -1.8em 0 0em rgba(61,170,225, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(61,170,225, 0.5), 1.8em -1.8em 0 0em rgba(61,170,225, 0.7), 2.5em 0em 0 0em #3daae1, 1.75em 1.75em 0 0em rgba(61,170,225, 0.2), 0em 2.5em 0 0em rgba(61,170,225, 0.2), -1.8em 1.8em 0 0em rgba(61,170,225, 0.2), -2.6em 0em 0 0em rgba(61,170,225, 0.2), -1.8em -1.8em 0 0em rgba(61,170,225, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(61,170,225, 0.2), 1.8em -1.8em 0 0em rgba(61,170,225, 0.5), 2.5em 0em 0 0em rgba(61,170,225, 0.7), 1.75em 1.75em 0 0em #3daae1, 0em 2.5em 0 0em rgba(61,170,225, 0.2), -1.8em 1.8em 0 0em rgba(61,170,225, 0.2), -2.6em 0em 0 0em rgba(61,170,225, 0.2), -1.8em -1.8em 0 0em rgba(61,170,225, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(61,170,225, 0.2), 1.8em -1.8em 0 0em rgba(61,170,225, 0.2), 2.5em 0em 0 0em rgba(61,170,225, 0.5), 1.75em 1.75em 0 0em rgba(61,170,225, 0.7), 0em 2.5em 0 0em #3daae1, -1.8em 1.8em 0 0em rgba(61,170,225, 0.2), -2.6em 0em 0 0em rgba(61,170,225, 0.2), -1.8em -1.8em 0 0em rgba(61,170,225, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(61,170,225, 0.2), 1.8em -1.8em 0 0em rgba(61,170,225, 0.2), 2.5em 0em 0 0em rgba(61,170,225, 0.2), 1.75em 1.75em 0 0em rgba(61,170,225, 0.5), 0em 2.5em 0 0em rgba(61,170,225, 0.7), -1.8em 1.8em 0 0em #3daae1, -2.6em 0em 0 0em rgba(61,170,225, 0.2), -1.8em -1.8em 0 0em rgba(61,170,225, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(61,170,225, 0.2), 1.8em -1.8em 0 0em rgba(61,170,225, 0.2), 2.5em 0em 0 0em rgba(61,170,225, 0.2), 1.75em 1.75em 0 0em rgba(61,170,225, 0.2), 0em 2.5em 0 0em rgba(61,170,225, 0.5), -1.8em 1.8em 0 0em rgba(61,170,225, 0.7), -2.6em 0em 0 0em #3daae1, -1.8em -1.8em 0 0em rgba(61,170,225, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(61,170,225, 0.2), 1.8em -1.8em 0 0em rgba(61,170,225, 0.2), 2.5em 0em 0 0em rgba(61,170,225, 0.2), 1.75em 1.75em 0 0em rgba(61,170,225, 0.2), 0em 2.5em 0 0em rgba(61,170,225, 0.2), -1.8em 1.8em 0 0em rgba(61,170,225, 0.5), -2.6em 0em 0 0em rgba(61,170,225, 0.7), -1.8em -1.8em 0 0em #3daae1; } } @keyframes load5 { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #3daae1, 1.8em -1.8em 0 0em rgba(61,170,225, 0.2), 2.5em 0em 0 0em rgba(61,170,225, 0.2), 1.75em 1.75em 0 0em rgba(61,170,225, 0.2), 0em 2.5em 0 0em rgba(61,170,225, 0.2), -1.8em 1.8em 0 0em rgba(61,170,225, 0.2), -2.6em 0em 0 0em rgba(61,170,225, 0.5), -1.8em -1.8em 0 0em rgba(61,170,225, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(61,170,225, 0.7), 1.8em -1.8em 0 0em #3daae1, 2.5em 0em 0 0em rgba(61,170,225, 0.2), 1.75em 1.75em 0 0em rgba(61,170,225, 0.2), 0em 2.5em 0 0em rgba(61,170,225, 0.2), -1.8em 1.8em 0 0em rgba(61,170,225, 0.2), -2.6em 0em 0 0em rgba(61,170,225, 0.2), -1.8em -1.8em 0 0em rgba(61,170,225, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(61,170,225, 0.5), 1.8em -1.8em 0 0em rgba(61,170,225, 0.7), 2.5em 0em 0 0em #3daae1, 1.75em 1.75em 0 0em rgba(61,170,225, 0.2), 0em 2.5em 0 0em rgba(61,170,225, 0.2), -1.8em 1.8em 0 0em rgba(61,170,225, 0.2), -2.6em 0em 0 0em rgba(61,170,225, 0.2), -1.8em -1.8em 0 0em rgba(61,170,225, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(61,170,225, 0.2), 1.8em -1.8em 0 0em rgba(61,170,225, 0.5), 2.5em 0em 0 0em rgba(61,170,225, 0.7), 1.75em 1.75em 0 0em #3daae1, 0em 2.5em 0 0em rgba(61,170,225, 0.2), -1.8em 1.8em 0 0em rgba(61,170,225, 0.2), -2.6em 0em 0 0em rgba(61,170,225, 0.2), -1.8em -1.8em 0 0em rgba(61,170,225, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(61,170,225, 0.2), 1.8em -1.8em 0 0em rgba(61,170,225, 0.2), 2.5em 0em 0 0em rgba(61,170,225, 0.5), 1.75em 1.75em 0 0em rgba(61,170,225, 0.7), 0em 2.5em 0 0em #3daae1, -1.8em 1.8em 0 0em rgba(61,170,225, 0.2), -2.6em 0em 0 0em rgba(61,170,225, 0.2), -1.8em -1.8em 0 0em rgba(61,170,225, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(61,170,225, 0.2), 1.8em -1.8em 0 0em rgba(61,170,225, 0.2), 2.5em 0em 0 0em rgba(61,170,225, 0.2), 1.75em 1.75em 0 0em rgba(61,170,225, 0.5), 0em 2.5em 0 0em rgba(61,170,225, 0.7), -1.8em 1.8em 0 0em #3daae1, -2.6em 0em 0 0em rgba(61,170,225, 0.2), -1.8em -1.8em 0 0em rgba(61,170,225, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(61,170,225, 0.2), 1.8em -1.8em 0 0em rgba(61,170,225, 0.2), 2.5em 0em 0 0em rgba(61,170,225, 0.2), 1.75em 1.75em 0 0em rgba(61,170,225, 0.2), 0em 2.5em 0 0em rgba(61,170,225, 0.5), -1.8em 1.8em 0 0em rgba(61,170,225, 0.7), -2.6em 0em 0 0em #3daae1, -1.8em -1.8em 0 0em rgba(61,170,225, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(61,170,225, 0.2), 1.8em -1.8em 0 0em rgba(61,170,225, 0.2), 2.5em 0em 0 0em rgba(61,170,225, 0.2), 1.75em 1.75em 0 0em rgba(61,170,225, 0.2), 0em 2.5em 0 0em rgba(61,170,225, 0.2), -1.8em 1.8em 0 0em rgba(61,170,225, 0.5), -2.6em 0em 0 0em rgba(61,170,225, 0.7), -1.8em -1.8em 0 0em #3daae1; } }