@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; } .scroll-navigation { margin-top: 80px; } .scroll-navigation .list { margin-left: 50px; display: flex; flex-flow:column nowrap; align-items: stretch; transition: all 0.4s;  position:sticky; position: -webkit-sticky; top: calc(var(--navbar-height-big) + 10px); } @media screen and (min-width:1470px) { .scroll-navigation .list { width: auto; } } .scroll-navigation.right {   } .scroll-navigation.right .list { border-left: 1px solid rgba(0,0,0,0.15); } .scroll-navigation.left {   border-left: 1px solid rgba(0,0,0,0.15); } .scroll-navigation.left-flip { left:5%; border-right: 1px solid rgba(0,0,0,0.15); direction: rtl; } .scroll-navigation.small {   } .scroll-show-target { opacity: 0; } .scroll-show-target[active] { opacity: 1; } .scroll-action { border: none; background-color: inherit; padding: 0; font-size: 12px; height: 25px; flex-grow:1; height: 30px;  text-align: left; display:flex; align-items: center; color: #424242; font-weight: lighter; cursor: pointer; } .scroll-action:focus { outline:none; } .scroll-action:hover, .scroll-action[active] { font-weight: bold; } .scroll-action::before { content: ""; width: 4px; height: 30px; background-color: #55a3ff; position: relative; display:inline-block; color: #55a3ff; transition: all 0.4s; opacity: 0; border-radius: 3px; } .right .scroll-action::before { left:-2px; margin-right: 14px; } .left .scroll-action::before { left:-2px; margin-right: 14px; } .left-flip .scroll-action::before { left:2px; margin-right: 14px; } .left-flip .scroll-action.level2::before { left: 27px; } .scroll-action:hover::before { opacity: 0; } .scroll-action[active]:hover::before { opacity: 1; } .scroll-action[active]::before { opacity: 1; } @keyframes unfold-subsections { 0% { height: 0; opacity: 0; display: none; } 80% { height: 0; opacity: 0; display: inherit; } 100% { height: auto; opacity: 1; display: inherit; } } .scroll-group .scroll-group.level2 { opacity: 0; display:none; } .scroll-group.opened .scroll-group.level2 { opacity: 1; height:auto; display: inherit; animation: unfold-subsections 0.3s; } .scroll-action.level2 { font-size: 11px; height: 25px; } .scroll-action.level2::before { margin-right: 24px; } .scroll-top-page { opacity: 0; position: fixed; bottom: 20px; width: 30px; height: 30px; border-radius: 15px;  background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 1px 3px rgb(0 0 0 / 20%); text-align: center; transition: color 0.4s; } .scroll-top-page:hover { box-shadow: 0 1px 3px rgb(0 0 0 / 40%); } .scroll-top-page:active { box-shadow: 0 1px 3px rgb(0 0 0 / 20%); background: rgba(200, 200, 200, 0.5); } .scroll-top-page.right { right: calc(50% - var(--site-width) / 2 - 90px); } .scroll-top-page.left{ left: 50px; } .scroll-top-page.left-flip{ left: calc(50% - var(--site-width) / 2 - 90px); } .scroll-top-page button { margin-top:3px; border: none; background:transparent; width: 25px; height: 25px;  background-image: url("/assets/images/chevron-up.svg?20px"); } .scroll-top-page img { border: none; }  .navigation-buttons { margin-left: 50px;      display:flex; column-gap: 3px; flex-flow:row wrap;   z-index: 3; position:absolute; bottom: 20px; } .navigation-buttons[active] { opacity: 1; } .navigation-buttons > * { width:32px; height:32px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; margin: 5px 0;    background: linear-gradient(to top, rgb(245, 245, 245) 0%, white 20%); transition: all 0.2s; display: block; } .navigation-buttons .up:active, .navigation-buttons .down:active {  box-shadow: inset 0 0 3px rgba(0,0,0, 1); } .navigation-buttons > .up:hover, .navigation-buttons > .down:hover {  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); } .navigation-buttons > .up:active, .navigation-buttons > .down:active {   box-shadow: inset 0 0 3px rgba(0,0,0, 0.15); } .navigation-buttons > *::before { content: ""; width:32px; height:32px; position:relative; display: block; left: 4px; top: 4px; } .navigation-buttons .up::before { background: url("/assets/images/chevron-up.svg") no-repeat; } .navigation-buttons .down::before { background: url("/assets/images/chevron-down.svg") no-repeat; } .navigation-buttons .up.page-start::before { background: url("/assets/images/chevron-up-end.svg") no-repeat; } .navigation-buttons .down.page-end { margin-right: 50px; } .navigation-buttons .down.page-end::before { background: url("/assets/images/chevron-down-end.svg") no-repeat; } .navigation-buttons .up:hover::before, .navigation-buttons .down:hover::before { filter: brightness(50%); } @media screen and (max-width: 1550px) { .navigation-buttons .up.page-start { display: none; } .navigation-buttons .down.page-end { display: none; } } @media screen and (max-width: 1470px) { .navigation-buttons {    } .navigation-buttons > * { background: linear-gradient(to top, rgb(245, 245, 245) 0%, white 20%); } } @media screen and (max-width: 1200px) { .navigation-buttons {  display: none; } } .copy-tooltip { position: relative; display: inline-block; } .copy-tooltiptext { visibility: hidden; min-width: 60px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 2px 5px; position: absolute; z-index: 1;  top: 120%; left: 50%; margin-left: -30px; opacity: 0; transition: opacity 0.3s; transition-delay: 0.5s; } .copy-tooltip[active=true] .copy-tooltiptext { visibility: visible; opacity: 1; } .copy-tooltip:hover .copy-tooltiptext { visibility: visible; opacity: 1; } .downloadContainer, .multiDownloadContainer { border:none; font-family: monospace, proxima-nova, sans-serif; font-size: 14px; transition: 0.3s; padding:3px; padding-left:5px; padding-right:5px; border-radius:4px; text-decoration: none; } .downloadContainer { cursor: pointer; } .downloadContainer:focus, .multiDownloadContainer:focus { border:none; } .multiDownloadContainer { display: inline-flex; line-height: 1.6; padding: 0; padding-left: 5px; } .multiDownloadContainer .file { padding-left: 5px; padding-right: 5px; text-decoration: none; cursor: pointer; transition: all 0.3s; } .downloadContainer .file::after, .multiDownloadContainer .file::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 3px; transform: translateY(2px); }  .geometry.downloadContainer { background-color:#d2dcff; } .geometry.downloadContainer, .geometry.multiDownloadContainer { color:#0432c7; text-decoration: none; white-space: nowrap; } a.geometry.downloadContainer { color:#0432c7; } .page .geometry.downloadContainer:hover, .page .geometry.multiDownloadContainer:hover { text-decoration: none; } .geometry.downloadContainer span { margin-left: 5px; padding-left: 5px; border-left: 1px solid #0432c7; } .geometry.downloadContainer:hover span { border-left: 1px solid white; } .geometry.downloadContainer:hover { background-color:#557ce0; color:white; } .geometry.multiDownloadContainer .file { background-color:#d2dcff; margin: 0 3px; padding: 0 7px; border-radius: 4px; color:#0432c7; } .geometry.downloadContainer .file::after, .geometry.multiDownloadContainer .file::after { content: ""; background: url("/assets/images/geometry-file-download.svg") no-repeat center center; background-size: contain; filter: brightness(0) saturate(100%) invert(35%) sepia(34%) saturate(1120%) hue-rotate(195deg) brightness(94%) contrast(95%); } .geometry.downloadContainer:hover .file::after, .geometry.multiDownloadContainer .file:hover::after { filter: brightness(0) invert(1); } .geometry.multiDownloadContainer .file:hover { background-color:#557ce0; color:white; text-decoration: none!important; }  .page .genericFile.downloadContainer { background-color:#d2dcff; } .page .genericFile.downloadContainer, .page .genericFile.multiDownloadContainer { color:#0432c7; text-decoration: none; white-space: nowrap; } .genericFile.downloadContainer span { margin-left: 5px; padding-left: 5px; border-left: 1px solid #0432c7; } .genericFile.downloadContainer:hover span { border-left: 1px solid white; } .page .genericFile.downloadContainer:hover, .page .genericFile.downloadContainer:hover { background-color:#557ce0; color:white; text-decoration: none!important; } .genericFile.multiDownloadContainer .file { background-color:#d2dcff; margin: 0 3px; padding: 0 7px; border-radius: 4px; color:#0432c7; } .genericFile.downloadContainer .file::after, .genericFile.multiDownloadContainer .file::after { content: ""; background: url("/assets/images/geometry-file-download.svg") no-repeat center center; background-size: contain; filter: brightness(0) saturate(100%) invert(35%) sepia(34%) saturate(1120%) hue-rotate(195deg) brightness(94%) contrast(95%); } .genericFile.downloadContainer:hover .file::after, .genericFile.multiDownloadContainer .file:hover::after { filter: brightness(0) invert(1); } .genericFile.multiDownloadContainer .file:hover { background-color:#557ce0; color:white; } .number-circle { display: inline-block; border-radius: 50%; width: 1.4em; height: 1.4em; line-height: 1.4em; text-align: center; background-color: rgba(99, 121, 253, 1); color: white; } @media screen and (max-width: 920px) { .geometry.downloadContainer, .geometry.multiDownloadContainer, .page .genericFile.downloadContainer, .page .genericFile.multiDownloadContainer { white-space: normal; } .multiDownloadContainer { flex-wrap: wrap; } } :root {    --bg-dot-color: #e2ecf2; --how-normal-text-color: hsl(225deg,3%,30%); --how-dark-text-color: hsl(0deg,0%,0%); --how-a-underline-color: hsl(0deg,0%,40%); --how-bg-blue-color: hsl(205deg 100% 98.6% / 0.6 ); --how-text-blue-color: hsl(205deg, 60%, 30%); --how-border-blue-color: hsl(205deg, 100%, 91.89%); --how-a-underline-blue-color: hsl(205deg, 33%, 45%); } h1, h2 {color:var(--titlecolor);font-family: proxima-nova,sans-serif; display:block; text-align:center;} h3,h4,h5,h6{color:var(--titlecolor);font-family: proxima-nova,sans-serif; text-align:center;}   p { margin-block-start: 0; margin-block-end: 0; } .olist ol p { line-height: 30px; letter-spacing: 0; } div.paragraph p { margin-top: 0.5em; margin-bottom: 0.5em; line-height: 30px; letter-spacing: 0; } .stemblock .content { margin: auto; } ol { padding-inline-start: 1.5em; } #toc.toc2 a:link{color:white;} .olist code, .olist em, em.label { background-color: var(--secondarycolor) !important; color:var(--codecolor); font-family: monospace; font-size: 14px; padding: 3px 6px; border-radius: 5px; } .olist em { font-style: normal; } em { font-style: italic; } .admonitionblock table{ font-size: 14px; } .admonitionblock.tip, .admonition-inline.tip { opacity: 0.5; } .admonitionblock.tip:hover, .admonition-inline.tip:hover { opacity: 1; } .admonition-inline.tip, .admonitionblock.tip > * { color: #0088ffc2; } .admonitionblock.warning table { color: #5bb553; }  th{background-color: var(--tertiarycolor);color:var(--white) !important;} #toc.toc2{background-color:#2C001E;color:white;} #toc.toc2.a{color:white;} #toctitle{color:#E95420;} img { border: 1px solid rgba(0, 0, 0, 0.1); } .frontImage img, .frontImage video { border: none; max-width: 100%; height: auto; } div.frontImage { margin: auto; } .page-content { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; } .tutorial-slide {  margin-bottom: 0px; display: block; }  .slide-content { display: flex; flex-direction: column; align-items: center; margin-bottom: 50px; } .slide-content > div { width: 60%; } li img { width: 100%; height: auto; } .slide-content div.imageblock, .frontImage { width: 100%; padding: 50px 0; } .slide-content div.imageblock, .slide-content div.carousel-wrapper { background-image: linear-gradient(45deg,var(--bg-dot-color) 25%,transparent 25%), linear-gradient(-45deg,var(--bg-dot-color) 25%,transparent 25%), linear-gradient(45deg,transparent 75%,var(--bg-dot-color) 100%), linear-gradient(-45deg,transparent 75%,var(--bg-dot-color) 75%); background-size: 2px 2px; background-position: -2px -2px,0 2px,0 0,2px 0; box-shadow: inset 0 60px 40px -40px white; margin-bottom: -50px; } .slide-content div.imageblock .content { width: auto; max-width: 100%; display: block; text-align: center; margin: auto 20px;  } .slide-content div.imageblock img { max-width: 100%; height: auto; } .tutorial-slide h2 { border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding-bottom: 20px; } span.inputContainer { margin-top:3px; margin-bottom:3px; line-height:2; } span.inputContainer * > i { padding: 3px 7px; background-color: var(--secondarycolor); color:var(--codecolor); font-family: monospace; font-style: normal; font-size: 90%; transition: all 0.2s; border-radius: 3px; } span.inputContainer .inputNameContainer .prefix { margin-right: 5px; } span.inputContainer * > i.inputValue:hover { background-color: #ef4570; color: #fff; } span.inputContainer * > i.inputValue:active { background-color: #d82854; } span.inputNameContainer { margin-right: 10px; display: inline-block; } i.inputValue { border-radius:3px; margin-left:5px; margin-right:5px; cursor: pointer; display: inline; } i.inputName {  }  video { max-width: 100%; }  b.button { font-size: 13px; display: inline-block; font-weight: 400; padding: 3px 10px; margin: 0 2px; line-height: 13px; vertical-align: 1px; font-family: monospace; border-radius: 5px; border:1px solid hsl(0deg 0% 85%); background-color: hsl(0deg 0% 95%); color: hsl(0deg 0% 20%); } .inputName .MathJax { font-size: 10pt; }  body { background-color: var(--sf-body-background); } div.tutorial-slide { border-radius: 7px; background-color: white;  margin-bottom: 50px;  border: 1px solid rgb(211, 211, 211); box-shadow: 0 1px 0 rgb(0 0 0 / 25%); } .tutorial-slide h2 { margin-left:40px; margin-right:40px; } div.frontImage { text-align: center; } .frontImage video { margin: auto; } .page-content { margin-top: 70px; position: relative; z-index: 5;  }  .tutorial-slide .relative-anchor { z-index: 1; }  .tutorial-slide .title-big { color: var(--titlecolor); font-family: var(--sf-font-display); font-weight: 700; letter-spacing: -0.01em; z-index: auto;  margin-top: 15px; padding-bottom: 10px; } .tutorial-slide .title-big span { color: rgba(0, 0, 0, 0.45); font-family: var(--sf-font-body); font-weight: 500; letter-spacing: normal; } .thin.navigation-buttons { display: none; position: fixed; top: 50%; flex-direction: column; right: 5%; height: 88px; } @media screen and (max-width:1300px) { .three-columns-layout { display: grid; grid-template-columns: minmax(0px, 40px) var(--page-width) 1fr;  } .three-columns-layout > *:nth-child(3) { display: none; } .thin.navigation-buttons { display: flex; } } @media screen and (max-width: 1100px) { .three-columns-layout { display: grid; grid-template-columns: minmax(0px, 20px) var(--page-width) 1fr; } } @media screen and (max-width: 1200px) { .page, .index .page, .site-footer, .index .site-footer { max-width: var(--page-width); }  .navigation-buttons { display: inherit; } } @media screen and (max-width: 920px) { .three-columns-layout { grid-template-columns: auto; } div.tutorial-slide { border-radius: 0; border-right: none; border-left: none;   width: 100%; } .page, .index .page, .site-footer, .index .site-footer { max-width: 100%; } } @media screen and (max-width: 920px) { .navigation-buttons { display: none; } .thin.navigation-buttons { background-color: rgba(255, 255, 255, 0.9);  box-shadow: 0 0 15px 10px white; } } @media screen and (max-width: 920px) { .slide-content > div { width: 90%; } .tutorial-slide h2 { margin-left: 15px; margin-right: 15px; } .how-to-new .admonitionblock.tip p, .how-to-new .admonition-inline.tip p { padding-left: 15px; text-align: left; } .page-content { margin-top: 30px; } .slide-content div.imageblock, .frontImage { padding: 20px 0; } .slide-content div.imageblock .content { margin: auto 5px; } } @media screen and (max-width: 500px) { .slide-content > div { width: 95%; } .thin.navigation-buttons { top: auto; bottom: 20px; right: 10px; flex-direction: row; height: auto; gap: 8px; } }  .slide-content ol { list-style: none;    position: relative; z-index: 1; padding-left: 3rem; } .slide-content ol {   } .slide-content ol::before {  } .slide-content li {  margin: 0;  padding: .3rem 0 .3rem .5rem; position: relative; box-sizing: border-box; display: list-item; text-align: -webkit-match-parent; } .slide-content ol > li::before {  content: counter(list-item); background: #6487ff; min-width: 1.8rem; height: 1.8rem; line-height: 1.8rem; border-radius: 50%; color: white; margin-right: 0.5rem;  box-sizing: border-box; font-size: 1rem; font-weight: 400; font-family: 'proxima-nova-thin'; left: -2rem; position: absolute; text-align: center; padding-top: 1px; top: 0.3rem; } .slide-content ol > li::after {  background: rgba(0, 0, 0, 0.08); content: ""; left: -1.125rem;  height: calc(100% - 3.2rem); position: absolute; top: 2.5rem; width: 0.125rem; z-index: -2; box-sizing: border-box;  } .slide-content .internal-list-item { width: 1.8rem; height: 1.8rem; line-height: 1.8rem; background-color: #6487ff; font-family: 'proxima-nova-thin'; font-size: 1rem;  margin-right: 0.5rem; box-sizing: border-box; border-radius: 50%; display: inline-block; text-align: center; color: white; transform: translateY(-1px); } /********** How To Section ***********/ .how-to-new .page .ulist ul:not(:has(ul)) { margin: 0; margin-bottom: 25px; padding: 0; padding-left: 5px; } .how-to-new .ulist .title { margin-top: 20px; margin-bottom: 10px; } .how-to-new .page .ulist li, .how-to-new .page .ulist li:not(:has(ul)) { list-style: none; position: relative; margin: 0 0 0.7em; padding: 2px 0 0 0; padding-inline-start: 1.675em; }  .how-to-new .page .ulist li::before, .how-to-new .page .ulist li:not(:has(ul))::before { content: ""; width: .375em; height: .375em; position: absolute; top: calc(.875em - .1875em); left: .5em; border-radius: 50%; background-color: var(--how-normal-text-color); }  .how-to-new .page .ulist ul:has(ul) { list-style: none; margin: 0 0 20px 5px; padding: 0; } .how-to-new .page .ulist ul:has(ul) li { margin-top: 10px; } .how-to-new .page .ulist ul:has(ul) ul li { margin: 0; } .how-to-new .page .ulist ul:has(ul) ul { margin-left: 5px; padding-left: 5px; position: relative; } .how-to-new .page .ulist ul:has(ul) ul li { list-style: none; position: relative; padding-left: 0.75rem; font-size: 15px; } .how-to-new .page .ulist ul:has(ul) ul::before { content: ""; position: absolute; left: 0; top: 0.2em; bottom: 0.2em; width: 2px; background: hsl(0, 0%, 60%); border-radius: 2px; opacity: 0.4; } .how-to-new .page a, .how-to-new .page a:visited, .how-to-new .page a:focus, .how-to-new .page a:hover { color: var(--how-normal-text-color); text-decoration: none; list-style: none; } .how-to-new .page a, .how-to-new .page .ulist ul li a { padding-bottom: 2px; position: relative; text-decoration: none; background-image: linear-gradient( var(--how-a-underline-color), var(--how-a-underline-color) ); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.4s ease-out; transition: background-size 0.35s cubic-bezier(0.65, 0, 0.35, 1); display: inline-flex; align-items: center; gap: 4px; } .how-to-new .page a:hover, .how-to-new .page .ulist ul li a:hover { background-size: 100% 1px; } .how-to-new .page a::after, .how-to-new .ulist ul li a::after { content: ""; display: inline-block; width: 11px; height: 11px; margin: 0 6px 0 2px; background-image: url("/assets/images/text-link.svg"); background-size: contain; background-repeat: no-repeat; opacity: 0; transform: translateX(-3px) scale(0.9); transition: opacity 0.3s ease, transform 0.3s ease; } .how-to-new .page:hover a::after, .how-to-new .page:hover .ulist ul li a::after { opacity: 1; transform: translateX(0) scale(1); } .how-to-new .page a:hover::after, .how-to-new .page .ulist ul li a:hover::after { transform: translateX(0) scale(1.1); } .how-to-new .page .ulist ul li ul li::before { content: ""; display: none; } .how-to-new, .how-to-new .page p, .how-to-new .page a, .how-to-new .page .ulist ul li a, .how-to-new .page li { color: var(--how-normal-text-color); } .how-to-new .page strong, .how-to-new .page .ulist .title, .how-to-new .page .ulist ul li strong a, .how-to-new .page .ulist ul li strong a:visited, .how-to-new .page .ulist ul li strong a:focus, .how-to-new .page .ulist ul li strong a:hover { color: var(--how-dark-text-color); } .how-to-new .admonitionblock.tip, .how-to-new .admonition-inline.tip { background-color: var(--how-bg-blue-color); opacity: 1; color: var(--how-text-blue-color); border: 1px solid var(--how-border-blue-color); padding: 3px 20px 3px 12px; border-radius: 8px; margin-top: 25px; } .how-to-new .admonitionblock.tip p, .how-to-new .admonition-inline.tip p { color: var(--how-text-blue-color); line-height: 1.6; font-size: 15px; text-align: justify; padding-left: 60px; } .how-to-new .admonitionblock.tip p a, .how-to-new .admonition-inline.tip p a { color: var(--how-text-blue-color); } .how-to-new .page .admonitionblock.tip p a, .how-to-new .page .admonition-inline.tip p a { background-image: linear-gradient( var(--how-a-underline-blue-color), var(--how-a-underline-blue-color) ); } .how-to-new, .how-to-new *, .how-to-new *::before, .how-to-new *::after { box-sizing: border-box; }  .sidebarblock { margin: 30px 0; //font-family: 'Inter', sans-serif; } .sidebarblock details { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 0; margin: 0; overflow: hidden; }  .sidebarblock details:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; }  .sidebarblock details:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }  .sidebarblock details + details { border-top: none; } .sidebarblock summary.title { padding: 12px 20px 12px 40px; cursor: pointer; position: relative; list-style: none; user-select: none; transition: background-color 0.3s ease; //border-radius: 8px; } .sidebarblock details[open] summary.title { background-color: hsl(0 0% 97% / 0.8); } .sidebarblock summary.title:hover { background-color: hsl(0 0% 97% / 0.9); } .sidebarblock summary.title::after { content: '▸'; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease; font-size: 14px; color: #555; } .sidebarblock details[open] summary.title::after { transform: translateY(-50%) rotate(90deg); } .sidebarblock details .content { max-height: 0; opacity: 0; padding: 0 20px; overflow: hidden; //transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease; } .sidebarblock details[open] .content { max-height: 500px; opacity: 1; padding: 14px 20px; overflow: auto; } .sidebarblock .paragraph p { margin: 0; line-height: 1.6; color: #333; font-size: 15px; } .sidebarblock details[open] { //box-shadow: 0 4px 12px rgba(0,0,0,0.12); //transform: translateY(-2px); } .sidebarblock details summary::-webkit-details-marker { display: none; } .how-to-new .listingblock { border: 1px solid hsl(0 0% 90% / 1); padding: 2px 15px; border-radius: 15px; margin: 20px 0 3px 0; } .how-to-new span > img { border: none; vertical-align: middle; display: inline-block;  height: 2em; width: auto; }:root { --primary-color: #0078d4; --text-color: #333; --bg-color: #f9f9f9; --card-bg: #ffffff; --transition-speed: 0.4s; --bg-dot-color: #e2e8f0; } div.carousel-widget {  overflow: visible; display: flex; flex-direction: column; width: 100%; } .carousel-wrapper { position: relative; align-items: center; display: flex; flex-direction: column; }  .carousel-viewport { position: relative; overflow: hidden; max-width: 100%;  } .carousel-track { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; transition: transform var(--transition-speed) ease-in-out; } .carousel-slide { min-width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; } .carousel-slide img {   width: 100%;  height: auto; object-fit: contain; max-width: 100%; max-height: 100%; display: block; border: none; }  .carousel-controls { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 5px 0 0 0;  width: 100%; padding: 10px 0 5px 0;  }  .navigation-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%; }  .center-container { display: flex; flex-direction: column; align-items: center; justify-content: center; }  .carousel-btn {  position: static; transform: none; background: rgba(255, 255, 255, 0.8); border: 1px solid #ddd;  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--primary-color); box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: all 0.2s; user-select: none; } .carousel-btn:hover { background: white; transform: scale(1.1); box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .carousel-btn.disabled, .carousel-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; box-shadow: none; transform: none; }  .carousel-content { padding: 10px 24px 5px 24px;  text-align: center; } .step-indicator {      position: static; transform: none; margin: 0 auto 5px auto; display: inline-block; z-index: 20; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px; color: #555; font-weight: 600; background-color: white; border-radius: 12px; padding: 2px 8px; pointer-events: none; } .step-title { font-size: 1.5rem; margin: 0 0 12px 0; color: var(--text-color); } .step-description { font-size: 1rem; line-height: 1.6; color: #555; margin-bottom: 4px; text-align: left; display: inline-block; } .step-description .number-circle { margin-right: 4px; }  .carousel-dots {  position: static; transform: none; bottom: auto; left: auto; display: flex; justify-content: center; gap: 8px; } .dot { width: 10px; height: 10px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: background-color 0.3s, transform 0.3s; } .dot:hover { background-color: #bbb; transform: scale(1.2); } .dot.active { background-color: var(--primary-color); transform: scale(1.2); }  .img-placeholder { width: 100%; height: 100%; background: #e0e0e0; display: flex; align-items: center; justify-content: center; color: #999; font-size: 1.2rem; } .number-circle { display: inline-block; border-radius: 50%; width: 1.4em; height: 1.4em; line-height: 1.4em; text-align: center; background-color: rgba(99, 121, 253, 1); color: white; } em.label { background-color: var(--secondarycolor); color: var(--codecolor); font-family: monospace; font-size: 14px; padding: 3px 6px; border-radius: 5px; font-style: normal; } b.button { font-size: 13px; display: inline-block; font-weight: 400; padding: 3px 10px; margin: 0 2px; line-height: 13px; vertical-align: 1px; font-family: monospace; border-radius: 5px; border: 1px solid hsl(0deg 0% 85%); background-color: hsl(0deg 0% 95%); color: hsl(0deg 0% 20%); }