:root { --back: 251, 251, 251; --front: 0, 0, 0; --backHex: #fbfbfb; --frontHex: #000000; --primary-color: #F7931A; --primary-color-rgb: 247, 147, 26; --primary-color-h: 33; --primary-color-s: 93%; --primary-color-l: 54%; --primary-color-l-darker: 44%; --link-base-color: var(--primary-color); --link-hover-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l-darker)); --link-visited-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l-darker)); }

@media (prefers-contrast: more) { :root { --primary-color: #9c5c19; --primary-color-rgb: 156, 92, 25; --primary-color-h: 31; --primary-color-s: 72%; --primary-color-l: 35%; --primary-color-l-darker: 25%; } :root .guide a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 1px; } }

.theme--dark { --back: 13, 13, 15; --front: 255, 255, 255; --backHex: #0D0D0F; --frontHex: #ffffff; }

.highlight .c { color: #998; font-style: italic; }

.highlight .err { color: #a61717; background-color: #e3d2d2; }

.highlight .k { font-weight: bold; }

.highlight .o { font-weight: bold; }

.highlight .cm { color: #998; font-style: italic; }

.highlight .cp { color: #999; font-weight: bold; }

.highlight .c1 { color: #998; font-style: italic; }

.highlight .cs { color: #999; font-weight: bold; font-style: italic; }

.highlight .gd { color: #000; background-color: #fdd; }

.highlight .gd .x { color: #000; background-color: #faa; }

.highlight .ge { font-style: italic; }

.highlight .gr { color: #a00; }

.highlight .gh { color: #999; }

.highlight .gi { color: #000; background-color: #dfd; }

.highlight .gi .x { color: #000; background-color: #afa; }

.highlight .go { color: #888; }

.highlight .gp { color: #555; }

.highlight .gs { font-weight: bold; }

.highlight .gu { color: #aaa; }

.highlight .gt { color: #a00; }

.highlight .kc { font-weight: bold; }

.highlight .kd { font-weight: bold; }

.highlight .kp { font-weight: bold; }

.highlight .kr { font-weight: bold; }

.highlight .kt { color: #458; font-weight: bold; }

.highlight .m { color: #099; }

.highlight .s { color: #d14; }

.highlight .na { color: #008080; }

.highlight .nb { color: #0086B3; }

.highlight .nc { color: #458; font-weight: bold; }

.highlight .no { color: #008080; }

.highlight .ni { color: #800080; }

.highlight .ne { color: #900; font-weight: bold; }

.highlight .nf { color: #900; font-weight: bold; }

.highlight .nn { color: #555; }

.highlight .nt { color: #000080; }

.highlight .nv { color: #008080; }

.highlight .ow { font-weight: bold; }

.highlight .w { color: #bbb; }

.highlight .mf { color: #099; }

.highlight .mh { color: #099; }

.highlight .mi { color: #099; }

.highlight .mo { color: #099; }

.highlight .sb { color: #d14; }

.highlight .sc { color: #d14; }

.highlight .sd { color: #d14; }

.highlight .s2 { color: #d14; }

.highlight .se { color: #d14; }

.highlight .sh { color: #d14; }

.highlight .si { color: #d14; }

.highlight .sx { color: #d14; }

.highlight .sr { color: #009926; }

.highlight .s1 { color: #d14; }

.highlight .ss { color: #990073; }

.highlight .bp { color: #999; }

.highlight .vc { color: #008080; }

.highlight .vg { color: #008080; }

.highlight .vi { color: #008080; }

.highlight .il { color: #099; }

html { font-size: 18px; }

/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body { font: 400 18px/1.7 "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: rgba(var(--front), 0.72); background-color: #ffffff; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; overflow-wrap: break-word; width: 100%; box-sizing: border-box; }

.small { font-size: 13.5px; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-top: 15px; }

hr { margin-top: 30px; border: 1px solid rgba(var(--front), 0.1); border-width: 1px 0 0; }

hr + p { margin-top: 30px; }

/** `main` element */
main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }

a:focus-visible, button:focus-visible { outline: 4px solid rgba(var(--primary-color-rgb), 0.6); outline-offset: 1px; }

/** Images */
img { max-width: 100%; height: auto; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption { padding-top: 7.5px; font-size: 13.5px; color: #959396; text-align: center; }

figcaption a, figcaption a:visited, figcaption a:hover { color: #959396; text-decoration: underline; }

figcaption a:hover { color: #27262b; }

/** iframes */
iframe { border: 1px solid rgba(0, 0, 0, 0.05); }

/** Lists */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

li ul, li ol { margin-top: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.4; color: var(--frontHex); }

h1 { letter-spacing: -0.03em; }

/** Links */
a { color: var(--link-base-color); text-decoration: none; transition: color 100ms cubic-bezier(0.5, 0, 0.2, 1); }

a:visited { color: var(--link-visited-color); }

a:hover { color: var(--link-hover-color); text-decoration: underline; }

.social-media-list a:hover { text-decoration: none; }

.social-media-list a:hover .username { text-decoration: underline; }

/** Blockquotes */
blockquote { background: #f8f8f8; padding: 24px; text-align: center; border: none; font-style: normal; font-weight: 400; box-sizing: border-box; }

blockquote cite { display: inline-block; font-size: calc(13.5138121547px + 1vw * 0.6629834254); font-style: normal; }

@media only screen and (min-width: 1024px) { blockquote cite { font-size: 22px; } }

blockquote > :last-child { margin-bottom: 0; }

blockquote i, blockquote em { font-style: normal; }

blockquote, blockquote > p { font-size: calc(19.5138121547px + 1vw * 0.6629834254); line-height: 1.4; color: #474747; }

@media only screen and (min-width: 1024px) { blockquote, blockquote > p { font-size: 28px; } }

/** Code formatting */
pre, code { font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace; font-size: 0.9375em; border: 1px solid #f3f3f3; border-radius: 3px; background-color: #f5f6fa; }

code { padding: 1px 5px; }

pre { padding: 8px 12px; overflow-x: auto; }

pre > code { border: 0; padding-right: 0; padding-left: 0; }

.highlight { border-radius: 3px; background: #f5f6fa; }

.highlighter-rouge .highlight { background: #f5f6fa; }

/** Wrapper */
.main:not(.sidebar), .wrapper { width: 100%; box-sizing: border-box; max-width: calc(1340px - (30px)); margin-right: auto; margin-left: auto; }

.main:not(.sidebar):after, .wrapper:after { content: ""; display: table; clear: both; }

@media only screen and (min-width: 1024px) { .main:not(.sidebar), .wrapper { max-width: calc(1340px - (30px * 2)); padding-right: 30px; padding-left: 30px; } }

.sidebar .wrapper { max-width: unset; box-sizing: border-box; }

/** Clearfix */
/** Icons */
.orange { color: #f66a0a; }

.grey { color: #828282; }

.svg-icon { width: 16px; height: 16px; display: inline-block; fill: currentColor; padding: 5px 3px 2px 5px; vertical-align: text-bottom; }

/** Tables */
table { margin-top: 30px; margin-bottom: 30px; width: 100%; text-align: left; color: #2e2e2e; border-collapse: collapse; }

table th, table td { padding: 10px 10px; vertical-align: top; }

table th { border-bottom: 1px solid #f3f3f3; text-transform: uppercase; font-size: 0.8rem; font-weight: 700; }

table td { border-bottom: 1px solid #f3f3f3; }

@media only screen and (min-width: 1024px) { table { overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } }

a.footnote { color: #474747; padding: 0 6px; font-size: 0.7rem; }

ul.task-list { list-style: none inside; }

ul.task-list li { margin-left: 0 !important; }

ul.task-list li input { margin: 0 1rem 0 0; }

.modal-image-container { z-index: 999; display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; align-items: center; opacity: 1.0; transition: opacity .5s; flex-direction: column; justify-content: space-between; }

.modal-image-container.hidden { opacity: 0.0; pointer-events: none; transition: opacity .5s; transform: translateY(0.5); }

.modal-image-container.hidden .modal-image-inner { transform: translateY(50%); }

.modal-image-container.portrait .modal-image-inner .modal-image { max-height: 100%; width: auto; }

.modal-image-container.loading .modal-image-caption { opacity: 0; transition: none; }

.modal-image-container.loading .modal-image { opacity: 0; transition: none; }

.modal-image-container.loading .modal-image-loading { opacity: 0.5; }

.modal-image-top { width: 100%; opacity: 1; position: relative; z-index: 999; display: flex; justify-content: flex-end; flex-direction: row; height: 60px; cursor: pointer; }

.modal-image-bottom { height: 60px; width: 100%; position: relative; z-index: 999; cursor: pointer; }

.modal-image-inner { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; transform: translateY(0%); transition: transform 0.5s ease; }

.modal-image-inner .modal-image-loading { background: url("/assets/loading-spinner.svg") center/50% no-repeat; width: 10rem; height: 10rem; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; position: absolute; top: calc(50% - 5rem); left: calc(50% - 5rem); }

.modal-image-overlay { background: rgba(225, 225, 225, 0.95); position: fixed; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; }

.modal-image { position: relative; transition: opacity 0.5s ease 0.25s; }

.modal-image-close { cursor: pointer; transform: rotateZ(-45deg) scale(1); transition: transform 0.25s ease; width: 40px; height: 40px; border-radius: 30px; position: relative; margin: 10px 10px; }

.modal-image-close:before, .modal-image-close:after { content: ''; background: #27262b; border-radius: 8px; position: absolute; }

.modal-image-close:before { width: 4px; height: 32px; left: 18px; top: 4px; }

.modal-image-close:after { height: 4px; width: 32px; top: 18px; left: 4px; }

.modal-image-close:hover { transform: rotateZ(-45deg) scale(1.15); transition: transform 0.25s ease; }

.modal-image-caption { text-align: center; padding: 1rem; margin: 0; position: relative; transition: opacity 0.5s ease 0.25s; }

.modal-image-caption.hidden { display: none; }

.modal-image-caption p { margin: 0; }

figcaption.modal-indicator, figcaption.animation-controls { display: flex; align-items: center; justify-content: center; }

figcaption.modal-indicator p, figcaption.animation-controls p { max-width: calc(100% - 39.5px); }

figcaption.modal-indicator svg, figcaption.animation-controls svg { flex-basis: 32px; width: 32px; height: 32px; display: inline; color: #959396; margin-top: 15px; margin-left: 7.5px; cursor: pointer; }

figcaption.animation-controls { cursor: pointer; }

figcaption.animation-controls .pause .play { display: none; }

figcaption.animation-controls .play .pause { display: none; }

figcaption.animation-controls.deactivated.default, figcaption.animation-controls.deactivated svg { display: none; }

figcaption.animation-controls button { border: 0; background: none; color: #959396; display: flex; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; }

figcaption.animation-controls button p { margin: 0; }

figcaption.animation-controls button svg { margin-top: 0; }

.sr-only { position: absolute; left: -999rem; }

a.skip-to-content-link { position: absolute; left: 50%; padding: 7px 15px; transform: translate(-50%, -100%); z-index: 12; font-size: 15px; font-weight: 500; color: white; background: #e77e23; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; transition: transform 150ms cubic-bezier(0.5, 0, 0.2, 1); }

a.skip-to-content-link:focus-visible { transform: translate(-50%, 0%); }

/** Page content */
.page-content { flex: 1 0 auto; }

@media only screen and (min-width: 1024px) { .page-content > .page-content-wrapper { display: flex; align-items: stretch; } .page-content > .page-content-wrapper > .side-bar { flex-shrink: 0; flex-basis: 380px; } .page-content > .page-content-wrapper > .main.sidebar { flex-basis: 100%; flex-shrink: 1; border-left: 1px solid rgba(var(--front), 0.1); min-height: 90vh; overflow: hidden; } .page-content > .page-content-wrapper > .main.sidebar .edit-link { max-width: 800px; margin-left: auto; margin-right: auto; } }

.page-heading { max-width: 1000px; margin: 60px 0 15px 0; font-size: 4rem; line-height: 1em; font-weight: 600; }

@media only screen and (max-width: 1023px) { .page-heading { font-size: 3rem; } }

.hero { background-image: url("/assets/images/home/hero.png"); background-size: cover; background-position: center; width: 100%; top: 0; left: 0; z-index: -10; margin-top: -82px; padding-top: 82px; }

@media only screen and (max-width: 639px) { .hero { margin-top: -62px; padding-top: 62px; } }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 3rem 3rem; }

@media only screen and (max-width: 639px) { .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 1rem 1rem; } }

.grid-item { display: block; }

.grid.entry-points .grid-item { background: #f7f7f7; padding: 30px; padding-top: calc(45% - (30px / 2)); }

@media only screen and (max-width: 639px) { .grid.entry-points .grid-item { padding: 10px; padding-top: calc(45% - (30px / 3)); } }

.grid.entry-points h2 { margin: 0; }

.grid.entry-points a:hover { text-decoration: none; }

.post-list-heading { font-size: 1.75rem; }

.post-list { margin-left: 0; list-style: none; margin: 120px 0; }

.post-list > li { margin-bottom: 30px; }

.post-meta { font-size: 13.5px; color: #000000; }

.post-link { display: block; font-size: 1.5rem; }

.edit-link { display: block; font-size: 0.8rem; }

@media only screen and (max-width: 1023px) { .edit-link { margin-top: 15px; margin-left: 15px; margin-right: 15px; } }

@media only screen and (min-width: 1024px) { .edit-link { margin-top: 30px; } }

/** Posts */
@media only screen and (max-width: 639px) { .main.sidebar { padding-bottom: 60px; } }

@media only screen and (min-width: 640px) { .main.sidebar { padding-bottom: 180px; } }

@media only screen and (max-width: 639px) { .main:not(.sidebar) { padding-bottom: 30px; } }

@media only screen and (min-width: 640px) { .main:not(.sidebar) { padding-bottom: 90px; } }

@media only screen and (max-width: 639px) { .main:not(.-no-top-padding) { padding-top: 30px; } }

@media only screen and (min-width: 640px) { .main:not(.-no-top-padding) { padding-top: 120px; } }

.post-title, .post-content h1, article.guide h1, .post-content .h1, article.guide .h1 { font-size: 2.625rem; letter-spacing: -1px; line-height: 1.15; }

@media only screen and (min-width: 1024px) { .post-title, .post-content h1, article.guide h1, .post-content .h1, article.guide .h1 { font-size: 2.625rem; } }

.post-content h1, .post-content .h1, article.guide h1, article.guide .h1 { margin-top: 30px; }

@media only screen and (min-width: 640px) { .post-content h1, .post-content .h1, article.guide h1, article.guide .h1 { margin-top: 60px; } }

.post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6, .post-content .h2, .post-content .h3, .post-content .h4, .post-content .h5, .post-content .h6, article.guide h2, article.guide h3, article.guide h4, article.guide h5, article.guide h6, article.guide .h2, article.guide .h3, article.guide .h4, article.guide .h5, article.guide .h6 { margin-top: 0; }

.post-content h2::before, .post-content h3::before, .post-content h4::before, .post-content h5::before, .post-content h6::before, .post-content .h2::before, .post-content .h3::before, .post-content .h4::before, .post-content .h5::before, .post-content .h6::before, article.guide h2::before, article.guide h3::before, article.guide h4::before, article.guide h5::before, article.guide h6::before, article.guide .h2::before, article.guide .h3::before, article.guide .h4::before, article.guide .h5::before, article.guide .h6::before { display: block; content: ''; width: 0; visibility: hidden; position: relative; z-index: -1; pointer-events: none; }

.post-content h2::before, .post-content h3::before, .post-content .h2::before, .post-content .h3::before, article.guide h2::before, article.guide h3::before, article.guide .h2::before, article.guide .h3::before { height: 90px; margin-top: -60px; }

.post-content h4::before, .post-content h5::before, .post-content h6::before, .post-content .h4::before, .post-content .h5::before, .post-content .h6::before, article.guide h4::before, article.guide h5::before, article.guide h6::before, article.guide .h4::before, article.guide .h5::before, article.guide .h6::before { height: 90px; margin-top: -60px; }

.post-content h2, .post-content .h2, article.guide h2, article.guide .h2 { font-size: 1.75rem; }

@media only screen and (min-width: 1024px) { .post-content h2, .post-content .h2, article.guide h2, article.guide .h2 { font-size: 2rem; } }

.post-content h3, .post-content .h3, article.guide h3, article.guide .h3 { font-size: 1.375rem; }

@media only screen and (min-width: 1024px) { .post-content h3, .post-content .h3, article.guide h3, article.guide .h3 { font-size: 1.625rem; } }

.post-content h4, .post-content .h4, article.guide h4, article.guide .h4 { font-size: 1.25rem; }

.post-content h5, .post-content .h5, article.guide h5, article.guide .h5 { font-size: 1.125rem; }

.post-content h6, .post-content .h6, article.guide h6, article.guide .h6 { font-size: 1.0625rem; }

/** Pagination navbar */
.pagination { margin-bottom: 30px; display: table; margin: 0 auto; }

.pagination li { float: left; margin: 5px 10px 5px 0; }

.pagination li:last-of-type { margin-right: 0; }

.pagination li a { display: block; padding: 7.5px; border: 1px solid #f3f3f3; }

.pagination li a:hover { border-color: gray; }

.pagination li a, .pagination li div { min-width: 41px; text-align: center; box-sizing: border-box; }

.pagination li div { display: block; padding: 7.5px; border: 1px solid transparent; }

.pagination li div.pager-edge { color: #f3f3f3; border: 1px dashed; }

/** Grid helpers */
@media only screen and (min-width: 1024px) { .one-half { width: calc(50% - (30px / 2)); } }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; src: url("/assets/font-files/Inter-Thin.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-Thin.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; src: url("/assets/font-files/Inter-ThinItalic.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-ThinItalic.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; src: url("/assets/font-files/Inter-ExtraLight.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-ExtraLight.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; src: url("/assets/font-files/Inter-ExtraLightItalic.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-ExtraLightItalic.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; src: url("/assets/font-files/Inter-Light.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-Light.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; src: url("/assets/font-files/Inter-LightItalic.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-LightItalic.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url("/assets/font-files/Inter-Regular.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-Regular.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; src: url("/assets/font-files/Inter-Italic.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-Italic.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: url("/assets/font-files/Inter-Medium.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-Medium.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; src: url("/assets/font-files/Inter-MediumItalic.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-MediumItalic.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url("/assets/font-files/Inter-SemiBold.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-SemiBold.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; src: url("/assets/font-files/Inter-SemiBoldItalic.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-SemiBoldItalic.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url("/assets/font-files/Inter-Bold.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-Bold.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; src: url("/assets/font-files/Inter-BoldItalic.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-BoldItalic.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; src: url("/assets/font-files/Inter-ExtraBold.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-ExtraBold.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; src: url("/assets/font-files/Inter-ExtraBoldItalic.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-ExtraBoldItalic.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; src: url("/assets/font-files/Inter-Black.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-Black.woff?3.13") format("woff"); }

@font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; src: url("/assets/font-files/Inter-BlackItalic.woff2?3.13") format("woff2"), url("/assets/font-files/Inter-BlackItalic.woff?3.13") format("woff"); }

/* ------------------------------------------------------- Variable font. Usage: html { font-family: 'Inter', sans-serif; } @supports (font-variation-settings: normal) { html { font-family: 'Inter var', sans-serif; } } */
@font-face { font-family: 'Inter var'; font-weight: 100 900; font-style: normal; font-named-instance: 'Regular'; src: url("/assets/font-files/Inter-roman.var.woff2?3.13") format("woff2"); }

@font-face { font-family: 'Inter var'; font-weight: 100 900; font-style: italic; font-named-instance: 'Italic'; src: url("/assets/font-files/Inter-italic.var.woff2?3.13") format("woff2"); }

/* Legacy naming compatibility */
@font-face { font-family: 'Inter var alt'; font-weight: 100 900; font-style: normal; font-named-instance: 'Regular'; src: url("/assets/font-files/Inter-roman.var.woff2?3.13") format("woff2"); }

@font-face { font-family: 'Inter var alt'; font-weight: 100 900; font-style: italic; font-named-instance: 'Italic'; src: url("/assets/font-files/Inter-italic.var.woff2?3.13") format("woff2"); }

/* --------------------------------------------------------------------------
[EXPERIMENTAL] Multi-axis, single variable font.

Slant axis is not yet widely supported (as of February 2019) and thus this
multi-axis single variable font is opt-in rather than the default.

When using this, you will probably need to set font-variation-settings
explicitly, e.g.

  * { font-variation-settings: "slnt" 0deg }
  .italic { font-variation-settings: "slnt" 10deg }

*/
@font-face { font-family: 'Inter var experimental'; font-weight: 100 900; font-style: oblique 0deg 10deg; src: url("/assets/font-files/Inter.var.woff2?3.13") format("woff2"); }

/** Site header */
.site-header { position: sticky; background-color: #ffffff; border-bottom: 1px solid rgba(var(--front), 0.1); top: 0; z-index: 11; }

.site-header .wrap { position: relative; display: flex; justify-content: space-between; padding-left: 30px; }

.site-header .wrap .wrap-inner { width: 100%; display: flex; background-color: #ffffff; }

.site-header .wrap .site-title { font-size: 25px; font-weight: 500; margin-bottom: 0; line-height: 60px; letter-spacing: -0.5px; color: var(--frontHex); transition: color 100ms cubic-bezier(0.5, 0, 0.2, 1); white-space: nowrap; }

.site-header .wrap .site-title svg { width: 40px; height: 40px; vertical-align: middle; margin-right: 5px; transform: translateY(-2px); transition: color 100ms cubic-bezier(0.5, 0, 0.2, 1); color: black; }

.site-header .wrap .site-title, .site-header .wrap .site-title:visited { color: black; }

.site-header .wrap .site-title:focus-visible { outline: 2px solid var(--primary-color); background-color: rgba(var(--primary-color), 0.05); }

.site-header .wrap .site-title:hover { color: var(--primary-color); text-decoration: none; }

.site-header .wrap .site-title:hover svg { color: var(--primary-color); }

.site-header .wrap .site-nav .page-link { color: var(--frontHex); line-height: 60px; display: block; transition: color 100ms linear; position: relative; font-size: 16px; font-weight: 500; }

.site-header .wrap .site-nav .page-link:hover { color: var(--primary-color); text-decoration: none; }

.site-header .wrap .site-nav .page-link:focus-visible { background-color: rgba(var(--primary-color), 0.1); }

.site-header .wrap .site-nav .page-link.active { color: var(--primary-color); }

.site-header .wrap .site-nav > .page-link > a { line-height: 60px; }

.site-header .wrap .nav-search { display: flex; align-items: center; justify-content: center; border-width: 0; background-color: transparent; padding: 0; width: 60px; }

.site-header .wrap .nav-search svg { width: 44px; height: 44px; color: var(--frontHex); transition: color 100ms linear; }

.site-header .wrap .nav-search:focus-visible { background-color: rgba(var(--primary-color), 0.05); }

.site-header .wrap .nav-search:hover svg { color: var(--primary-color); }

.site-header .wrap .nav-search.-active svg { color: var(--primary-color); }

.site-header .wrap .search-input-wrap { display: none; position: absolute; top: 100%; right: 0; background-color: white; width: 100vw; max-width: 500px; z-index: 10; box-shadow: 0 10px 25px -5px rgba(var(--front), 0.1); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }

.site-header .wrap .search-input-wrap form { position: relative; border: 1px solid rgba(var(--front), 0.1); }

.site-header .wrap .search-input-wrap form input { display: block; box-sizing: border-box; width: 100%; font-size: 18px; height: 60px; border-width: 0; padding-left: 20px; padding-right: 20px; position: relative; background-color: transparent; }

.site-header .wrap .search-input-wrap form input:focus-visible { outline: none; }

.site-header .wrap .search-input-wrap.-active { display: block; z-index: 10; }

.site-header .wrap .search-input-wrap.-active form { border: 1px solid rgba(var(--front), 0.05); }

.site-header .wrap .search-input-wrap #search-results { list-style-type: none; padding: 0; margin: 0; border-right: 1px solid rgba(var(--front), 0.05); border-left: 1px solid rgba(var(--front), 0.05); border-bottom: 1px solid rgba(var(--front), 0.05); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }

.site-header .wrap .search-input-wrap #search-results li h3 { margin-top: 0; margin-bottom: 0; font-size: 15px; line-height: 1.2; color: var(--frontHex); transition: color 100ms cubic-bezier(0.5, 0, 0.2, 1); }

.site-header .wrap .search-input-wrap #search-results li h3 span { margin-left: 5px; vertical-align: middle; display: inline-block; width: 8px; height: 8px; border-radius: 4px; transform: translateY(-1px); }

.site-header .wrap .search-input-wrap #search-results li a { display: block; padding: 15px 20px; transition: background-color 100ms cubic-bezier(0.5, 0, 0.2, 1); }

.site-header .wrap .search-input-wrap #search-results li a p { margin-top: 5px; margin-bottom: 0; font-size: 13px; line-height: 1.4; color: rgba(var(--front), 0.7); }

.site-header .wrap .search-input-wrap #search-results li a:hover { text-decoration: none; background-color: rgba(var(--primary-color), 0.05); }

.site-header .wrap .search-input-wrap #search-results li a:hover h3 { color: var(--primary-color); }

.site-header .wrap .search-input-wrap #search-results li > h3 { padding: 15px 20px; }

.site-header .wrap .search-input-wrap #search-results li + li { border-top: 1px solid #ededed; }

@media only screen and (max-width: 1023px) { .site-header { height: 60px; } .site-header .wrap { display: flex; position: relative; padding-right: 10px; padding-left: 15px; } .site-header .wrap .site-title { line-height: 60px; } .site-header .wrap .nav-trigger { width: 44px; height: 60px; display: flex; align-items: center; justify-content: center; background-color: transparent; padding: 0; border-width: 0; } .site-header .wrap .nav-trigger svg { width: 44px; height: 44px; } .site-header .wrap .nav-trigger:focus-visible { background-color: rgba(var(--primary-color), 0.05); } .site-header .wrap .nav-trigger:hover { color: var(--primary-color); } .site-header .wrap .nav-search { margin-left: auto; width: 44px; } .site-header .wrap .nav-search > svg path { fill: black; } .site-header .wrap .site-nav { position: absolute; top: 61px; left: 0; width: 100%; height: 0; overflow: hidden; transition: height 350ms cubic-bezier(0.5, 0, 0.2, 1); background-color: var(--backHex); } .site-header .wrap .site-nav .page-link { padding: 0 20px; font-size: 22px; position: relative; } .site-header .wrap .site-nav .page-link + .page-link:before, .site-header .wrap .site-nav .nav-list + .page-link:before { content: ''; display: block; background-color: rgba(var(--front), 0.1); width: 100%; height: 1px; } .site-header .wrap .site-nav .nav-list + .page-link { margin-top: 14px; } .site-header .wrap .site-nav .nav-list-expander { width: 34px; height: 34px; } .site-header .wrap .site-nav .nav-list-divider { margin-left: 45px; } .site-header .wrap .site-nav .nav-list-category { padding-left: 45px; } .site-header .wrap .site-nav .nav-list button { margin-left: 10px; } .site-header .wrap .site-nav .nav-list a { line-height: 34px; padding-left: 15px; } .site-header.-active .wrap .site-nav { overflow-y: scroll; height: calc(100vh - 60px); } .site-header.-active .wrap .nav-trigger svg { fill: var(--primary-color); } }

@media only screen and (min-width: 1024px) { .site-header .wrap { padding-right: 20px; } .site-header .wrap .site-title svg { display: none; } .site-header .wrap .site-nav { display: flex; margin-left: auto; gap: 20px; } .site-header .wrap .site-nav .page-link { padding-left: 10px; padding-right: 10px; } .site-header .wrap .site-nav .page-link:after { display: block; content: ''; position: absolute; left: 0; width: 100%; bottom: -1px; height: 1px; opacity: 0; background-color: var(--primary-color); } .site-header .wrap .site-nav .page-link.active:after { opacity: 1; } .site-header .wrap .site-nav .page-link:first-child { margin-left: 0; } .site-header .wrap .site-nav .nav-list { display: none; } .site-header .wrap .nav-trigger { display: none; } }

.site-header, .wrap-inner { transition: all 300ms ease; }

.site-header.scroll-top { background-color: transparent; border-bottom: 1px solid transparent; }

.site-header.scroll-top .wrap .wrap-inner { background-color: transparent; }

/** Site footer */
.site-footer { padding: 15px 15px 60px 15px; }

.site-footer .wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 800px; margin-left: auto; margin-right: auto; border: 1px solid black; padding: 20px; }

.site-footer .wrapper a.-logo { display: block; line-height: 1; }

.site-footer .wrapper a.-logo svg { width: 50px; height: 50px; overflow: visible; color: black; transition: all 100ms cubic-bezier(0.5, 0, 0.2, 1); }

.site-footer .wrapper a.-logo:hover svg { color: var(--primary-color); }

.site-footer .wrapper .edit-license { border-top: 1px solid black; flex-basis: 100%; display: flex; justify-content: space-between; margin-top: 20px; padding-top: 20px; }

.site-footer .wrapper .edit-license a { display: block; color: black; font-size: 16px; }

.site-footer .wrapper .edit-license a:visited { color: #808080; }

.site-footer .wrapper .edit-license a:hover { color: var(--primary-color); }

.site-footer .wrapper nav.social-media-list { display: flex; align-items: center; margin-left: auto; }

.site-footer .wrapper nav.social-media-list a { display: flex; line-height: 1; }

.site-footer .wrapper nav.social-media-list a svg { width: 30px; height: 30px; transition: all 150ms cubic-bezier(0.5, 0, 0.2, 1); }

.site-footer .wrapper nav.social-media-list a:visited svg { fill: #808080 !important; }

.site-footer .wrapper nav.social-media-list a:hover svg { fill: var(--primary-color) !important; }

.site-footer .wrapper nav.social-media-list a + a { margin-left: 20px; }

.site-footer .wrapper nav.footer-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; order: 5; flex-basis: 100%; border-top: 1px solid black; margin-top: 20px; padding-top: 20px; }

.site-footer .wrapper nav.footer-nav a { display: inline-block; color: black; font-size: 16px; }

.site-footer .wrapper nav.footer-nav a:visited { color: #808080; }

.site-footer .wrapper nav.footer-nav a:hover, .site-footer .wrapper nav.footer-nav a.active { color: var(--primary-color); }

.site-footer .wrapper nav.footer-nav:empty { display: none; }

@media only screen and (max-width: 374px) { .site-footer .wrapper .edit-license a { font-size: 13px; } .site-footer .wrapper nav.footer-nav a { font-size: 13px; } }

@media only screen and (max-width: 639px) { .site-footer .wrapper nav.social-media-list a + a { margin-left: 5px; } }

body.sidebar .site-footer { padding-top: 30px; border-top: 1px solid rgba(var(--front), 0.1); }

.side-bar { flex-wrap: nowrap; position: sticky; top: 60px; width: 380px; height: 100%; flex-direction: column; align-items: flex-end; padding: 30px 40px; max-height: calc(100vh - 61px); overflow: hidden; overflow-y: auto; box-sizing: border-box; }

@media only screen and (max-width: 1023px) { .side-bar { display: none; } }

@media only screen and (min-width: 1024px) { .side-bar { width: 228px; } }

.nav-list { padding: 0; margin-top: 0; margin-bottom: 0; margin-left: 0; list-style: none; }

.nav-list .nav-list-divider { height: 1px; margin-left: 30px; margin-top: 10px; margin-bottom: 10px; background-color: #dedede; box-sizing: border-box; }

.nav-list .nav-list-category { padding-left: 30px; font-size: 15px; line-height: 30px; color: #707070; }

.nav-list .nav-list-item { position: relative; margin: 0; }

.nav-list .nav-list-item a.nav-list-link { display: block; font-size: 15px; line-height: 30px; margin-left: 30px; color: black; }

.nav-list .nav-list-item a.nav-list-link:visited { color: black; }

.nav-list .nav-list-item a.nav-list-link.-active { font-weight: 500; color: var(--primary-color); text-decoration: none; }

.nav-list .nav-list-item a.nav-list-link.-active:visited { color: var(--primary-color); }

.nav-list .nav-list-item a.nav-list-link:hover { color: var(--primary-color); }

.nav-list .nav-list-item a.nav-list-link:hover, .nav-list .nav-list-item a.nav-list-link.-active { text-decoration: none; }

.nav-list .nav-list-item .nav-list-expander { position: absolute; left: 0; display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; background-color: transparent; border-width: 0; }

.nav-list .nav-list-item .nav-list-expander svg { width: 15px; height: 15px; color: var(--link-base-color); transition: all 150ms cubic-bezier(0.5, 0, 0.2, 1); }

.nav-list .nav-list-item .nav-list-expander:active, .nav-list .nav-list-item .nav-list-expander:focus-visible { border-width: 0; background-color: rgba(var(--primary-color-rgb), 0.1); }

.nav-list .nav-list-item .nav-list-expander:hover { background-color: rgba(var(--primary-color-rgb), 0.1); }

.nav-list .nav-list-item .nav-list-expander:hover svg { color: var(--primary-color); }

.nav-list .nav-list-item > .nav-list { display: none; list-style: none; padding-left: 15px; }

.nav-list .nav-list-item > .nav-list .nav-list-item { position: relative; cursor: pointer; }

.nav-list .nav-list-item > .nav-list .nav-list-item > .nav-list { display: block; }

.nav-list .nav-list-item > .nav-list .nav-list-item > a.nav-list-link { color: #474747; }

.nav-list .nav-list-item > .nav-list .nav-list-item > a.nav-list-link:hover { color: var(--primary-color); }

.nav-list .nav-list-item.-active > a.nav-list-link { color: var(--primary-color); }

.nav-list .nav-list-item.-active > a.nav-list-link:visited { color: var(--primary-color); }

.nav-list .nav-list-item.-active > .nav-list-expander svg { transform: rotate(90deg); color: var(--primary-color); }

.nav-list .nav-list-item.-active > .nav-list { display: block; }

.next-previous { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; }

.next-previous.--end { justify-content: flex-end; }

.next-previous--feedback { position: relative; }

.next-previous--feedback button { appearance: none; background-color: transparent; border-width: 0; font-size: 18px; color: rgba(0, 0, 0, 0.72); transition: all 150ms cubic-bezier(0.5, 0, 0.2, 1); }

.next-previous--feedback button:hover { color: var(--primary-color); text-decoration: underline; }

.next-previous--feedback__wrap { position: relative; }

.next-previous--feedback__wrap:before { content: ''; display: block; position: absolute; top: 100%; left: 50%; width: 14px; height: 14px; transform: translate(-50%, 8px) rotate(-45deg); border-bottom: 1px solid black; border-left: 1px solid black; background-color: white; }

.next-previous--feedback__options { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -15px); background-color: white; border: 1px solid black; padding: 15px; }

.next-previous--feedback__options a { display: flex; gap: 8px; align-items: center; font-size: 18px; white-space: nowrap; color: rgba(0, 0, 0, 0.72); transition: all 150ms cubic-bezier(0.5, 0, 0.2, 1); }

.next-previous--feedback__options a svg { transition: all 150ms cubic-bezier(0.5, 0, 0.2, 1); }

.next-previous--feedback__options a:hover { color: var(--primary-color); text-decoration: none; }

.next-previous--feedback__options a:hover svg { fill: var(--primary-color) !important; }

.next-previous--feedback__options a + a { margin-top: 5px; }

.next-previous > a { display: flex; border: 1px solid black; color: black; align-items: center; justify-content: center; text-decoration: none; transition: all 100ms cubic-bezier(0.5, 0, 0.2, 1); }

.next-previous > a svg { width: 24px; height: 24px; transition: all 100ms cubic-bezier(0.5, 0, 0.2, 1); }

.next-previous > a + a { margin-left: 15px; }

.next-previous > a.next-previous--previous { padding: 14px 17px; }

.next-previous > a.next-previous--previous svg { transform: rotate(180deg); }

.next-previous > a.next-previous--next { align-self: flex-end; padding: 14px 20px 14px 25px; }

.next-previous > a.next-previous--next svg { margin-left: 2px; }

.next-previous > a:hover { color: var(--primary-color); border-color: var(--primary-color); }

@media only screen and (max-width: 639px) { .next-previous { flex-wrap: wrap; } .next-previous .next-previous--feedback { display: flex; order: 3; flex-basis: 100%; justify-content: center; padding-top: 25px; } .next-previous .next-previous--feedback__options { transform: translate(-50%, 5px); } }

article.guide { position: relative; }

article.guide > figure:first-child { margin-top: 0; }

article.guide figure.-background { padding: 20px; background-color: #f4f4f4; display: flex; flex-direction: column; align-items: center; }

article.guide figure.-shadow img { filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.1)) drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.1)); border-radius: 10px; }

article.guide a.button { display: inline-block; padding: 0 20px; border-radius: 3px; color: white; line-height: 43px; text-decoration: none; background-color: var(--link-base-color); transition: all 150ms cubic-bezier(0.5, 0, 0.2, 1); }

article.guide a.button:hover { background-color: var(--link-hover-color); }

article.guide a.button.-outline { background-color: transparent; color: var(--link-base-color); border: 1px solid var(--link-base-color); }

article.guide a.button.-outline:hover { color: var(--link-hover-color); border-color: var(--link-hover-color); }

article.guide a.video-link, article.guide a.prototype-link { margin-top: 30px; display: block; position: relative; }

article.guide a.video-link > svg, article.guide a.prototype-link > svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; transition: all cubic-bezier(0.5, 0, 0.2, 1) 250ms; }

article.guide a.video-link span, article.guide a.prototype-link span { display: flex; position: absolute; bottom: 20px; left: 50%; transform: translate(-50%, 0); transition: all cubic-bezier(0.5, 0, 0.2, 1) 250ms; background-color: rgba(0, 0, 0, 0.2); border: 2px solid white; border-radius: 100px; color: white; font-size: 18px; padding: 5px 10px; box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.25); }

article.guide a.video-link span > svg, article.guide a.prototype-link span > svg { width: 30px; height: 30px; margin-right: 3px; }

article.guide a.video-link.prototype-link, article.guide a.prototype-link.prototype-link { display: block; }

article.guide .small-video-link { margin-top: 30px; }

article.guide .small-video-link a { display: flex; align-items: center; gap: 20px; }

article.guide .small-video-link .small-video-link__image { flex-shrink: 0; display: block; position: relative; }

article.guide .small-video-link .small-video-link__image img { width: 100%; height: auto; }

article.guide .small-video-link .small-video-link__image > svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 45px; height: 45px; transition: all cubic-bezier(0.5, 0, 0.2, 1) 100ms; }

article.guide .small-video-link .small-video-link__caption { transition: all cubic-bezier(0.5, 0, 0.2, 1) 100ms; color: #606060; line-height: 1.2; }

article.guide .small-video-link .small-video-link__caption p { margin: 0; }

article.guide .small-video-link:hover .small-video-link__caption { color: var(--primary-color); }

article.guide .small-video-link:hover .small-video-link__image svg { transform: translate(-50%, -50%) scale(1.2, 1.2); }

@media only screen and (max-width: 639px) { article.guide .small-video-link .small-video-link__image { flex-basis: 180px; flex-shrink: 1; } }

@media only screen and (min-width: 640px) { article.guide .small-video-link .small-video-link__image { flex-basis: 180px; } }

article.guide .small-video-link-gallery { display: flex; flex-wrap: wrap; margin-top: 30px; }

article.guide .small-video-link-gallery .small-video-link { margin-top: 0; flex-basis: 35%; flex-grow: 1; max-width: calc(50% - 15px); }

@media only screen and (max-width: 639px) { article.guide .small-video-link-gallery { gap: 15px; } article.guide .small-video-link-gallery .small-video-link a { align-items: stretch; flex-direction: column; gap: 10px; } article.guide .small-video-link-gallery .small-video-link__image { flex-basis: 0; } article.guide .small-video-link-gallery .small-video-link__caption { text-align: center; } }

@media only screen and (min-width: 640px) { article.guide .small-video-link-gallery { gap: 30px; } }

article.guide h2 a.header-anchor, article.guide h3 a.header-anchor, article.guide h4 a.header-anchor, article.guide h5 a.header-anchor, article.guide h6 a.header-anchor { font-size: 0.65em; vertical-align: text-top; color: #CCCCCC; }

article.guide h2 a.header-anchor:hover, article.guide h3 a.header-anchor:hover, article.guide h4 a.header-anchor:hover, article.guide h5 a.header-anchor:hover, article.guide h6 a.header-anchor:hover { text-decoration: none; }

@media only screen and (min-width: 1024px) { article.guide h2 a.header-anchor, article.guide h3 a.header-anchor, article.guide h4 a.header-anchor, article.guide h5 a.header-anchor, article.guide h6 a.header-anchor { opacity: 0; transition: all 100ms cubic-bezier(0.5, 0, 0.2, 1); } article.guide h2 a.header-anchor:hover, article.guide h3 a.header-anchor:hover, article.guide h4 a.header-anchor:hover, article.guide h5 a.header-anchor:hover, article.guide h6 a.header-anchor:hover { color: var(--primary-color); } article.guide h2:hover a.header-anchor, article.guide h3:hover a.header-anchor, article.guide h4:hover a.header-anchor, article.guide h5:hover a.header-anchor, article.guide h6:hover a.header-anchor { opacity: 1; } }

article.guide span.-blue { color: #6490E3; }

article.guide span.-green { color: #6FCF97; }

article.guide > iframe { display: block; }

@media only screen and (max-width: 1023px) { article.guide { padding-left: 15px; padding-right: 15px; } }

@media only screen and (min-width: 1024px) { article.guide { padding-left: 30px; padding-right: 30px; } }

article.guide > .center:after { content: ""; display: table; clear: both; }

article.guide > .center.flex { display: flex; flex-direction: column; align-content: flex-start; justify-content: flex-start; }

@media only screen and (max-width: 1023px) { article.guide > .center > figure:not(:first-child), article.guide > .center > figure.-float-left, article.guide > .center > figure.-float-right, article.guide > .center > figure.-float-left-mobile, article.guide > .center > figure.-float-right-mobile { margin-top: 6px; } }

@media only screen and (min-width: 640px) { article.guide > .center.flex { flex-direction: row; } article.guide > .center.flex > .-float-left img { width: 100%; } article.guide > .center.flex > .-float-left + * { flex-shrink: 2; } }

@media only screen and (min-width: 1024px) { article.guide > .center > figure { margin-top: 0; } }

article.guide > .-float-left, article.guide > .center .-float-left { float: left; margin-right: 15px; max-width: 50%; }

article.guide > .-float-right, article.guide > .center .-float-right { float: right; margin-left: 15px; max-width: 50%; }

@media only screen and (min-width: 640px) { article.guide > .-float-left-desktop, article.guide > .center .-float-left-desktop { float: left; margin-right: 15px; max-width: 50%; } article.guide > .-float-right-desktop, article.guide > .center .-float-right-desktop { float: right; margin-left: 15px; max-width: 50%; } }

@media only screen and (min-width: 1024px) { article.guide > .-float-right, article.guide > .center .-float-right { margin-top: 0; margin-bottom: 0; float: right; margin-left: 30px; } }

article.guide > .-full-width { display: flex; flex-direction: column; align-items: center; }

article.guide > .-full-width .lottie { width: 100%; }

@media only screen and (max-width: 1023px) { article.guide > .-full-width { margin-left: -15px; margin-right: -15px; } }

@media only screen and (min-width: 1024px) { article.guide > .-full-width { margin-left: -30px; margin-right: -30px; } }

article.guide figure.-full-width figcaption { margin-left: 15px; margin-right: 15px; }

article.guide > .-wide { display: flex; flex-direction: column; align-items: center; }

@media only screen and (max-width: 1023px) { article.guide > iframe.-full-width { margin-left: 0; margin-right: 0; } }

@media only screen and (min-width: 1024px) { article.guide > iframe.-full-width { margin-left: 0; margin-right: 0; } }

@media only screen and (min-width: 1024px) { article.guide > *:not(.-full-width, .-wide) { max-width: 800px; margin-left: auto; margin-right: auto; } }

article.guide > .-center { text-align: center; }

article.guide li { margin-left: 18px; }

article.guide .figma-embed { overflow: hidden; position: relative; }

article.guide .figma-embed iframe { display: block; position: absolute; left: 50%; top: 50%; box-sizing: border-box; transform-origin: left top; border: 0px solid rgba(0, 0, 0, 0.5); }

@media only screen and (max-width: 1023px) { article.guide figure:not(.-float-left, .-float-right, :first-child), article.guide iframe { margin-top: 30px; margin-bottom: 30px; } }

@media only screen and (min-width: 1024px) { article.guide figure:not(.-float-left, .-float-right, :first-child), article.guide iframe { margin-top: 30px; margin-bottom: 30px; } }

article.guide dl { display: flex; flex-wrap: wrap; align-items: stretch; }

article.guide dl dt, article.guide dl dd { display: flex; padding: 20px 30px; background-color: rgba(100, 144, 227, 0.1); }

article.guide dl dt p, article.guide dl dd p { margin: 0; }

article.guide dl dt.-green, article.guide dl dd.-green { background-color: rgba(111, 207, 151, 0.1); }

article.guide dl dt.-red, article.guide dl dd.-red { background-color: rgba(222, 94, 87, 0.1); }

article.guide dl dt.-blue, article.guide dl dd.-blue { background-color: rgba(100, 144, 227, 0.1); }

article.guide dl dt.-orange, article.guide dl dd.-orange { background-color: rgba(247, 147, 26, 0.1); }

article.guide dl dt.-yellow, article.guide dl dd.-yellow { background-color: rgba(255, 247, 92, 0.1); }

article.guide dl .icon { display: flex; align-items: center; justify-content: center; }

article.guide dl .icon svg { width: 30px; height: 30px; }

@media only screen and (max-width: 639px) { article.guide dl dt, article.guide dl dd, article.guide dl .icon { flex-basis: 100%; } article.guide dl dd + dt { margin-top: 20px; } article.guide dl .icon { height: 60px; } article.guide dl .icon svg { transform: rotate(90deg); } }

@media only screen and (min-width: 640px) { article.guide dl dt, article.guide dl dd { flex-basis: 30%; flex-grow: 1; margin-top: 20px; } article.guide dl dt:first-of-type, article.guide dl dd:first-of-type { margin-top: 0; } article.guide dl .icon { width: 60px; margin-top: 20px; } article.guide dl .icon:first-of-type { margin-top: 0; } }

article.guide .do { margin-top: 30px; display: flex; flex-wrap: wrap; background-color: #f8f8f8; padding: calc(15.8563535912px + 1vw * 1.1049723757); align-items: center; align-content: flex-start; }

@media only screen and (min-width: 1024px) { article.guide .do { padding: 30px; } }

article.guide .do .icon { flex-grow: 0; display: flex; align-items: center; padding-top: 2px; }

article.guide .do .icon.-green svg { background-color: #6FCF97; }

article.guide .do .icon.-red svg { background-color: #DE5E57; }

article.guide .do .icon svg { display: block; background-color: #6490E3; border-radius: 3px; width: 24px; height: 24px; color: white; vertical-align: middle; transform: translateY(-2px); }

article.guide .do h6 { margin: 0 0 0 10px; padding: 0px 0 0 0; font-size: 18px; font-weight: 500; flex-grow: 1; flex-basis: 50%; }

article.guide .do h6:before { display: none; }

article.guide .do .copy p + figure { margin-top: 10px; }

article.guide .do .copy figure:last-child { margin-bottom: 0; }

article.guide .dos { display: flex; }

@media only screen and (max-width: 639px) { article.guide .dos { flex-direction: column; } article.guide .dos .do + .do { margin-top: 20px; } }

@media only screen and (min-width: 640px) { article.guide .dos .do { flex-basis: 30%; flex-grow: 1; } article.guide .dos .do + .do { margin-left: 40px; } }

article.guide .fact { margin-top: 30px; display: flex; border: 1px solid #DEDEDE; align-items: stretch; }

article.guide .fact .icon { padding: 10px 20px; border-right: 1px solid #DEDEDE; flex-grow: 0; display: flex; align-items: center; }

article.guide .fact .icon.-green svg { background-color: #6FCF97; }

article.guide .fact .icon.-red svg { background-color: #DE5E57; }

article.guide .fact .icon svg { display: inline-block; background-color: #6490E3; border-radius: 3px; width: 24px; height: 24px; color: white; vertical-align: middle; transform: translateY(-2px); }

article.guide .fact .copy { padding: 20px; flex-grow: 1; }

article.guide .fact .copy h6 { margin: 0; padding: 0; font-size: 18px; font-weight: 500; }

article.guide .fact .copy h6:before { display: none; }

article.guide .fact .copy ul, article.guide .fact .copy ol { margin-left: 0; }

article.guide .fact .copy ul:first-child, article.guide .fact .copy ol:first-child { margin-top: 5px; }

article.guide .fact .copy p { margin: 5px 0 0 0; }

article.guide .fact + .fact { margin-top: 0; border-top: 0; }

article.guide .footnotes { padding: 30px; font-size: 0.8rem; margin-top: 60px; border: 1px solid rgba(var(--front), 0.05); box-sizing: border-box; background: #FDFDFD; }

article.guide .footnotes::before { content: "REFERENCES"; display: block; margin-bottom: 10px; color: var(--frontHex); letter-spacing: 1px; }

article.guide .footnotes ol { margin: 0; list-style-position: inside; }

article.guide .footnotes ol li { margin-left: 0; }

article.guide .footnotes ol li p { display: inline; }

article.guide .image-gallery { display: flex; margin-top: 30px; background-color: #f8f8f8; justify-content: center; max-width: none !important; }

article.guide .image-gallery figure { margin-top: 0; margin-bottom: 0; float: left; }

article.guide .image-gallery figure img { box-shadow: 0 20px 10px -8px rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.1); }

@media only screen and (max-width: 639px) { article.guide .image-gallery { flex-direction: column; align-items: center; margin-left: -15px; margin-right: -15px; padding: 30px 15px; } article.guide .image-gallery figure { margin: 0; } article.guide .image-gallery figure + figure { margin-top: 30px; } }

@media only screen and (min-width: 640px) { article.guide .image-gallery { margin-left: -30px; margin-right: -30px; padding: 30px; } article.guide .image-gallery figure + figure { margin-left: 40px; } }

article.guide .image-slide-gallery { margin-top: 30px; margin-bottom: 30px; background-color: #f8f8f8; justify-content: left; max-width: none !important; display: flex; overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }

article.guide .image-slide-gallery figure { flex-shrink: 0; margin-top: 0; margin-bottom: 0; width: min-content; }

article.guide .image-slide-gallery figure img { max-width: none; height: auto; }

article.guide .image-slide-gallery figure figcaption p { margin-top: 0; }

article.guide .image-slide-gallery figure figcaption.modal-indicator p, article.guide .image-slide-gallery figure figcaption.animation-controls p { margin-top: 15px; }

article.guide .image-slide-gallery:before, article.guide .image-slide-gallery:after { display: block; content: ''; position: relative; height: 20px; flex-shrink: 0; flex-grow: 1; }

@media only screen and (max-width: 639px) { article.guide .image-slide-gallery { padding: 30px 0; } article.guide .image-slide-gallery figure { flex-basis: calc(100vw - $spacing-unit*6); } article.guide .image-slide-gallery figure + figure { margin-left: 30px; } article.guide .image-slide-gallery:before, article.guide .image-slide-gallery:after { flex-basis: 30px; } }

@media only screen and (max-width: 1023px) { article.guide .image-slide-gallery { margin-left: -15px; margin-right: -15px; } }

@media only screen and (min-width: 640px) { article.guide .image-slide-gallery { padding: 30px 0 30px 0; } article.guide .image-slide-gallery figure + figure { margin-left: 30px; } article.guide .image-slide-gallery:before, article.guide .image-slide-gallery:after { flex-basis: 30px; } }

@media only screen and (min-width: 1024px) { article.guide .image-slide-gallery { margin-left: -30px; margin-right: -30px; } }

@media only screen and (min-width: 1024px) { article.guide > .-float-right, article.guide > .center .-float-right { margin-top: 0; margin-bottom: 0; float: right; margin-left: 30px; } }

article.guide .tip, article.guide .recommendation { margin-top: 30px; padding: 25px 25px 20px 25px; box-sizing: border-box; }

article.guide .tip h6, article.guide .recommendation h6 { margin: 0; padding: 0; font-size: 22px; font-weight: 500; }

article.guide .tip h6:before, article.guide .recommendation h6:before { display: none; }

article.guide .tip h6 svg, article.guide .recommendation h6 svg { display: inline-block; margin-right: 10px; background-color: #6490E3; border-radius: 3px; width: 24px; height: 24px; color: white; vertical-align: middle; transform: translateY(-2px); }

article.guide .tip p, article.guide .recommendation p { margin: 10px 0 0 0; }

article.guide .tip.-red, article.guide .recommendation.-red { background-color: rgba(222, 94, 87, 0.1); }

article.guide .tip.-red h6 svg, article.guide .recommendation.-red h6 svg { background-color: #DE5E57; }

article.guide .tip.-green, article.guide .recommendation.-green { background-color: rgba(111, 207, 151, 0.1); }

article.guide .tip.-green h6 svg, article.guide .recommendation.-green h6 svg { background-color: #6FCF97; }

article.guide .tip.-blue, article.guide .recommendation.-blue { background-color: rgba(100, 144, 227, 0.1); }

article.guide .tip.-blue h6 svg, article.guide .recommendation.-blue h6 svg { background-color: #6490E3; }

article.guide .tip.-orange, article.guide .recommendation.-orange { background-color: rgba(247, 147, 26, 0.1); }

article.guide .tip.-orange h6 svg, article.guide .recommendation.-orange h6 svg { background-color: #F7931A; }

article.guide .tip.-yellow, article.guide .recommendation.-yellow { background-color: rgba(255, 247, 92, 0.1); }

article.guide .tip.-yellow h6 svg, article.guide .recommendation.-yellow h6 svg { background-color: #FFF75C; }

article.guide .tip { background-color: rgba(100, 144, 227, 0.1); }

article.guide .tip h6 svg { background-color: #6490E3; }

article.guide .recommendation { background-color: rgba(247, 147, 26, 0.1); }

article.guide .recommendation h6 svg { background-color: #F7931A; }

article.guide .emoji-box { display: flex; align-items: center; gap: 25px; border: 1px solid #BBBBBB; border-radius: 5px; padding: 15px 25px; }

article.guide .emoji-box__emoji { font-size: 40px; }

article.guide .emoji-box__copy h5 { margin: 0; font-size: 22px; transition: color 100ms cubic-bezier(0.5, 0, 0.2, 1); }

article.guide .emoji-box__copy h5:before { display: none; }

article.guide .emoji-box__copy p { margin: 2px 0 0 0; color: rgba(var(--front), 0.72); }

article.guide a.emoji-box:hover { text-decoration: none; }

article.guide a.emoji-box:hover .emoji-box__copy h5 { color: var(--primary-color); }

article.guide .emoji-boxes { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }

@media only screen and (min-width: 640px) { article.guide .emoji-boxes { max-width: 1024px; } article.guide .emoji-boxes .emoji-box { flex-basis: 35%; flex-grow: 1; } }

.home-page article { padding-top: 30px; }

@media only screen and (max-width: 639px) { .home-page { padding-bottom: 30px; } }

@media only screen and (min-width: 640px) { .home-page { padding-bottom: 60px; } }

.guide-page article.guide figure { margin-bottom: 0; }

.guide-page article.guide figure + h2:before { margin-top: -70px; }

.guide-page article.guide h2 + p { margin-top: 5px; }

.guide-page article.guide .center figure { margin-right: 25px; }

.guide-page article.guide .center h2 { margin-top: 30px; }

.guide-page article.guide .center h2:before { display: none; }

@media only screen and (max-width: 639px) { .guide-page .columns-desktop.-ref { gap: 40px; } .guide-page .columns-desktop.-ref + .columns-desktop.-ref { margin-top: 30px; } .guide-page .columns-desktop { display: flex; flex-direction: column; margin-top: 30px; } .guide-page .columns-desktop .column figure { margin-top: 0; } .guide-page .columns-desktop .column picture { width: 100%; height: auto; } .guide-page .columns-desktop .column picture img { width: 100%; } .guide-page .columns-desktop .column.-blank { display: none; } .guide-page .columns-desktop.-how .column:last-child p { margin-top: 0; } .guide-page hr + .columns-desktop { margin-top: 0; } }

@media only screen and (min-width: 640px) { .guide-page p + .columns-desktop.-ref, .guide-page .columns-desktop.-ref + .columns-desktop.-ref { margin-top: 30px; } .guide-page .columns-desktop { display: flex; } .guide-page .columns-desktop .column picture { width: 100%; height: auto; } .guide-page .columns-desktop.-two { gap: 40px; } .guide-page .columns-desktop.-two .column { flex-basis: 40%; flex-grow: 1; } .guide-page .columns-desktop.-three { gap: 40px; } .guide-page .columns-desktop.-three .column { flex-basis: 30%; flex-grow: 1; } }

.search-page { max-width: 800px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; padding-top: calc(17.5690607735px + 1vw * 3.3149171271); padding-bottom: calc(17.5690607735px + 1vw * 3.3149171271); }

@media only screen and (min-width: 1024px) { .search-page { padding-top: 60px; } }

@media only screen and (min-width: 1024px) { .search-page { padding-bottom: 60px; } }

.search-page form input { display: block; width: 100%; height: 60px; border: 1px solid rgba(var(--front), 0.2); font-size: 27px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

.search-page form input:active, .search-page form input:focus-visible { border-color: var(--primary-color); outline: none; }

.search-page form input::placeholder { color: #cccccc; }

.search-page > ul { list-style-type: none; padding: 0; margin: 20px 0 0 0; }

.search-page > ul li { border-bottom: 1px solid #ededed; }

.search-page > ul li h3 { margin-top: 0; margin-bottom: 0; font-size: 18px; line-height: 1.2; color: var(--frontHex); transition: color 100ms cubic-bezier(0.5, 0, 0.2, 1); }

.search-page > ul li h3 span { margin-left: 5px; vertical-align: middle; display: inline-block; width: 8px; height: 8px; border-radius: 4px; transform: translateY(-1px); }

.search-page > ul li a { display: block; padding: 15px 0; transition: background-color 100ms cubic-bezier(0.5, 0, 0.2, 1); }

.search-page > ul li a p { margin-top: 5px; margin-bottom: 0; font-size: 16px; line-height: 1.4; color: rgba(var(--front), 0.7); }

.search-page > ul li a:hover { text-decoration: none; background-color: rgba(var(--primary-color-rgb), 0.05); }

.search-page > ul li a:hover h3 { color: var(--primary-color); }

.search-page > ul li.no-results { padding: 15px 0; }

.search-page #search-tips { padding: 15px 0; }

.search-page #search-tips button { appearance: none; background-color: transparent; border-width: 0; padding: 0; display: flex; gap: 3px; font-size: 15px; align-items: center; transition: all 150ms cubic-bezier(0.5, 0, 0.2, 1); }

.search-page #search-tips button svg { width: 14px; height: 14px; transition: all 150ms cubic-bezier(0.5, 0, 0.2, 1); }

.search-page #search-tips button:hover { color: var(--primary-color); cursor: pointer; }

.search-page #search-tips button[aria-expanded="true"] svg { transform: rotate(90deg); }

.search-page #search-tips-content p { font-size: 15px; }

.search-page #search-tips-content ul { margin-top: 5px; }

.search-page #search-tips-content ul li { font-size: 15px; }

.search-page #search-tips-content ul li em { font-style: normal; font-weight: 500; color: var(--front); }

.search-page #search-tips-content ul + p { margin-top: 5px; }

.project-grid .project-grid-item { display: block; padding: 30px; border-left: 1px solid #dedede; border-right: 1px solid #dedede; border-bottom: 1px solid #dedede; }

.project-grid .project-grid-item h3 { margin-top: 0; margin-bottom: 0px; }

.project-grid .project-grid-item p { margin-top: 5px; margin-bottom: 0px; }

.project-grid .project-grid-item .links a { display: inline-block; margin-top: 15px; }

.project-grid .project-grid-item .links a + a { margin-left: 15px; }

@media only screen and (max-width: 639px) { .project-grid { margin: 30px 0 0 0; } .project-grid .project-grid-item:first-child { border-top: 1px solid #dedede; } }

@media only screen and (min-width: 640px) { .project-grid { display: flex; flex-wrap: wrap; align-items: stretch; margin: 30px 0 0 0; } .project-grid .project-grid-item { flex-basis: 50%; flex-shrink: 0; display: flex; flex-direction: column; box-sizing: border-box; } .project-grid .project-grid-item p { margin-top: 5px; margin-bottom: 0px; flex-grow: 1; } .project-grid .project-grid-item:first-child, .project-grid .project-grid-item:nth-child(2) { border-top: 1px solid #dedede; } .project-grid .project-grid-item:nth-child(2n) { border-left-width: 0; } }

.image-grid figure { display: block; margin: 0 !important; padding: 30px; border-left: 1px solid #dedede; border-right: 1px solid #dedede; border-bottom: 1px solid #dedede; }

.image-grid figure p { margin-top: 5px; margin-bottom: 0px; }

@media only screen and (max-width: 639px) { .image-grid { margin: 30px 0 0 0; } .image-grid figure:first-child { border-top: 1px solid #dedede; } }

@media only screen and (min-width: 640px) { .image-grid { display: flex; flex-wrap: wrap; align-items: stretch; margin: 30px 0 0 0; } .image-grid figure { flex-basis: 50%; flex-shrink: 0; display: flex; flex-direction: column; box-sizing: border-box; } .image-grid figure p { margin-top: 5px; margin-bottom: 0px; flex-grow: 1; } .image-grid figure:first-child, .image-grid figure:nth-child(2) { border-top: 1px solid #dedede; } .image-grid figure:nth-child(2n) { border-left-width: 0; } }

#units-and-symbols-formatter { background-color: #777777; margin-top: 30px; padding: 30px; max-width: 800px; margin-left: auto; margin-right: auto; box-sizing: border-box; }

#units-and-symbols-formatter .units-and-symbols-formatter-top { display: flex; }

#units-and-symbols-formatter .units-and-symbols-formatter-top label { margin: 0; padding: 0; display: block; font-size: 16px; color: #D2FA7B; }

#units-and-symbols-formatter .units-and-symbols-formatter-top input { display: block; margin: 0; padding: 0; box-sizing: border-box; font-size: 48px; appearance: none; border-width: 0; color: #D2FA7B; width: 100%; background-color: transparent; -moz-appearance: textfield; border-bottom: 1px dashed #D2FA7B; }

#units-and-symbols-formatter .units-and-symbols-formatter-top input::-webkit-outer-spin-button, #units-and-symbols-formatter .units-and-symbols-formatter-top input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

#units-and-symbols-formatter .units-and-symbols-formatter-top input:focus-visible { outline: none; }

#units-and-symbols-formatter #units-and-symbols-formatter-table div { display: flex; padding-top: 5px; padding-bottom: 5px; gap: 10px; }

#units-and-symbols-formatter #units-and-symbols-formatter-table div p { margin: 0; padding: 0; flex-grow: 1; font-size: 16px; flex-basis: 30%; color: #EBEBEB; }

#units-and-symbols-formatter #units-and-symbols-formatter-table div p:first-child { flex-grow: 1; }

#units-and-symbols-formatter #units-and-symbols-formatter-table div p:last-child { color: white; text-align: right; }

#units-and-symbols-formatter #units-and-symbols-formatter-table div + div { border-top: 1px solid #999999; }

@media only screen and (max-width: 639px) { #units-and-symbols-formatter .units-and-symbols-formatter-top { flex-grow: 1; flex-basis: 30%; flex-direction: column; } #units-and-symbols-formatter #units-and-symbols-formatter-table { margin-top: 20px; } #units-and-symbols-formatter #units-and-symbols-formatter-table div p { font-size: 14px; flex-basis: 20%; } #units-and-symbols-formatter #units-and-symbols-formatter-table div p:first-child { flex-basis: 40%; } #units-and-symbols-formatter #units-and-symbols-formatter-table div p:last-child { flex-basis: 40%; } }

@media only screen and (min-width: 640px) { #units-and-symbols-formatter { display: flex; justify-content: space-between; gap: 40px; } #units-and-symbols-formatter .units-and-symbols-formatter-top { flex-grow: 1; flex-basis: 30%; flex-direction: column; } #units-and-symbols-formatter #units-and-symbols-formatter-table { flex-basis: 50%; flex-grow: 1; } }

.glossary-toc { margin-top: 30px; }

.glossary-toc > ul { margin-left: 0; column-count: 3; }

.glossary-toc > ul li { font-size: 13px; color: #bbbbbb; }

.glossary-toc > ul li a { color: rgba(var(--front), 0.72); }

.glossary-toc > ul li a:hover { color: var(--primary-color); text-decoration: none; }

.glossary-toc > ul li + li { margin-top: 5px; }

.glossary-toc > ul li ol, .glossary-toc > ul li ul { display: none; }

@media only screen and (max-width: 639px) { .glossary-toc > ul { column-count: 2; } }

.home-banner { display: flex; flex-direction: column-reverse; max-width: 1680px; margin-left: auto; margin-right: auto; background-color: var(--banner-background-color); background-image: var(--banner-background-path-mobile); background-size: cover; background-repeat: no-repeat; background-position: center top; transition: background-color 150ms cubic-bezier(0.5, 0, 0.2, 1); }

@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .home-banner { background-image: var(--banner-background-path-mobile-retina); } }

.home-banner .home-banner-copy-wrapper { background-color: var(--copy-background-color); transition: background-color 150ms cubic-bezier(0.5, 0, 0.2, 1); padding: 30px 15px; }

.home-banner .home-banner-copy-wrapper h1 { font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-style: normal; font-weight: bold; line-height: 100%; letter-spacing: -0.03em; transition: all 150ms cubic-bezier(0.5, 0, 0.2, 1); font-size: calc(41.3701657459px + 1vw * 1.7679558011); color: black; -webkit-text-fill-color: var(--title-fill-color); /* Will override color (regardless of order) */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--title-outline-color); }

@media only screen and (min-width: 1024px) { .home-banner .home-banner-copy-wrapper h1 { font-size: 64px; } }

.home-banner .home-banner-copy-wrapper p { color: var(--description-fill-color); font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-style: normal; font-weight: 600; font-size: 22px; line-height: 27px; margin-bottom: 30px; transition: color 150ms cubic-bezier(0.5, 0, 0.2, 1); }

.home-banner .home-banner-copy-wrapper a { display: inline-block; padding: 10px 20px; text-decoration: none; box-sizing: border-box; filter: drop-shadow(0px 8px 24px rgba(0, 0, 0, 0.05)); border-radius: 5px; margin: 0 0 12px 0; font-weight: 600; transition: all 150ms cubic-bezier(0.5, 0, 0.2, 1); }

.home-banner .home-banner-copy-wrapper #link-button-1 { background-color: var(--button-1-fill-color); border: 1px solid var(--button-1-outline-color); color: var(--button-1-label-fill-color); }

.home-banner .home-banner-copy-wrapper #link-button-2 { background-color: var(--button-2-fill-color); border: 1px solid var(--button-2-outline-color); color: var(--button-2-label-fill-color); }

.home-banner .home-banner-copy-wrapper .home-banner-copy { max-width: 500px; }

.home-banner .home-banner-copy-wrapper .home-banner-copy .home-banner-logo-wrapper { margin-bottom: 20px; }

.home-banner .home-banner-copy-wrapper .home-banner-copy .home-banner-logo-wrapper svg { overflow: visible; }

.home-banner .home-banner-image { width: 100%; padding-bottom: 100%; background-color: var(--banner-image-color); background-image: var(--banner-image-path-mobile); background-size: cover; background-repeat: no-repeat; background-position: center center; transition: background-color 150ms cubic-bezier(0.5, 0, 0.2, 1); position: relative; }

.home-banner .home-banner-image svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .home-banner .home-banner-image { background-image: var(--banner-image-path-mobile-retina); } }

@media only screen and (max-width: 1023px) { .home-banner.-flip-on-mobile { flex-direction: column; } .home-banner .home-banner-copy-wrapper .home-banner-copy .home-banner-logo-wrapper { display: none; } .home-banner .home-banner-copy-wrapper .home-banner-copy h1 { margin-top: 0; } }

@media only screen and (min-width: 1024px) { .home-banner { display: flex; flex-direction: row; align-items: stretch; background-image: var(--banner-background-path); background-position: center center; } }

@media only screen and (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 1024px) and (min-resolution: 192dpi), only screen and (min-width: 1024px) and (min-resolution: 2dppx) { .home-banner { background-image: var(--banner-background-path-retina); } }

@media only screen and (min-width: 1024px) { .home-banner .home-banner-image { background-image: var(--banner-image-path); } }

@media only screen and (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 1024px) and (min-resolution: 192dpi), only screen and (min-width: 1024px) and (min-resolution: 2dppx) { .home-banner .home-banner-image { background-image: var(--banner-image-path-retina); } }

@media only screen and (min-width: 1024px) { .home-banner .home-banner-copy-wrapper { width: 50%; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .home-banner .home-banner-copy-wrapper a { margin: 0 12px 0 0; } .home-banner .home-banner-buttons-wrapper { display: flex; flex-direction: row; } .home-banner .home-banner-image { width: 50%; padding-bottom: 50%; } }

.home-banner-info { display: flex; justify-content: center; max-width: 1680px; margin-left: auto; margin-right: auto; background-color: #f4f4f4; padding: 5px 15px; position: relative; z-index: 1; box-sizing: border-box; }

.home-banner-info .home-banner-info-wrapper { width: 100%; max-width: 800px; display: flex; justify-content: space-between; align-items: start; }

.home-banner-info .home-banner-info-wrapper > p { font-size: 12px; line-height: 18px; margin: 0; flex-basis: 50%; padding-right: 12px; }

.home-banner-info .home-banner-info-wrapper > p a { color: black; text-decoration: underline; }

.home-banner-info .home-banner-info-wrapper > p a:hover { color: var(--primary-color); }

.home-banner-info .home-banner-info-wrapper .home-banner-info-options { display: flex; align-items: start; flex-basis: 50%; justify-content: flex-end; }

.home-banner-info .home-banner-info-wrapper .home-banner-info-options a, .home-banner-info .home-banner-info-wrapper .home-banner-info-options button { display: block; font-size: 12px; line-height: 18px; color: black; text-decoration: underline; }

.home-banner-info .home-banner-info-wrapper .home-banner-info-options a:hover, .home-banner-info .home-banner-info-wrapper .home-banner-info-options button:hover { color: var(--primary-color); }

.home-banner-info .home-banner-info-wrapper .home-banner-info-options button { appearance: none; background-color: transparent; border-width: 0; margin-top: 0; padding-top: 0; }

.home-banner-info .home-banner-info-wrapper .home-banner-info-options a + button { margin-left: 10px; }

@media only screen and (max-width: 374px) { .home-banner-info .home-banner-info-wrapper > p { font-size: 10px; line-height: 16px; } .home-banner-info .home-banner-info-wrapper .home-banner-info-options a, .home-banner-info .home-banner-info-wrapper .home-banner-info-options button { font-size: 10px; line-height: 16px; } .home-banner-info .home-banner-info-wrapper .home-banner-info-options a + button { margin-left: 5px; } }

.lottie-active .home-banner .home-banner-image.lottie { background-image: none; }

@media only screen and (min-width: 640px) and (max-width: 1023px) { .error-theme .error-box { padding: 36px; } }

.error-theme h1 { padding-top: 22.5px; font-size: 4em; font-weight: 600; line-height: 1.4; }

.error-theme .action-link { color: #fff; text-decoration: none; border-bottom: 2px dashed #fff; }

.error-theme .action-link:hover { text-decoration: none; color: #fff; border-bottom: 2px solid #fff; }

.error-theme .action-link:active { color: #fff; border-bottom: 2px dashed #fff; }

.error-theme .action-button { margin-top: 30px; padding: 8px 20px 10px 20px; display: inline-block; text-decoration: none; color: #fff; border: 4px solid #fff; font-size: 2rem; line-height: 1.2; transition: all 100ms cubic-bezier(0.5, 0, 0.2, 1); }

.error-theme .action-button:hover { text-decoration: none; color: #0f284c; border-color: #0f284c; }

@media only screen and (min-width: 1024px) { .error-theme .action-button { margin-top: 120px; } }

.error-theme .message { position: relative; line-height: 1.4; margin-top: 60px; font-size: 33.75px; font-weight: 600; }

.error-theme .message::before { transform: translateY(-30px); height: 10px; width: 70px; position: absolute; top: -5.5%; content: ''; background-color: #0f284c; }

.error-theme .grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 30px; }

@media only screen and (max-width: 1023px) { .error-theme .grid { grid-template-columns: repeat(1, 1fr); grid-gap: 0; } }

.error-theme .-image-wrapper { max-height: 512px; max-width: 512px; justify-self: end; }

@media only screen and (max-width: 1023px) { .error-theme .-image-wrapper { grid-row: 1; justify-self: center; width: 100%; height: auto; } }

.error-theme h1 { color: #0f284c; }

@media only screen and (max-width: 1023px) { .error-theme h1 { padding-top: 0; } }

.error-theme p { color: #0f284c; }

.error-theme .site-header { background-color: #f7b93f; color: #fff; border-bottom: 1px solid #fff; }

.error-theme .site-header .wrap .nav-trigger:hover { fill: #0f284c; }

.error-theme .site-header .wrap .nav-trigger { fill: #fff; }

.error-theme .site-header .wrap .wrap-inner { background-color: #f7b93f; color: #fff; }

.error-theme .site-header .wrap .site-title { color: #fff; }

.error-theme .site-header .wrap .site-title svg { fill: white; }

.error-theme .site-header .wrap .site-title:hover { color: #0f284c; }

.error-theme .site-header .wrap .nav-search svg { color: #fff; }

.error-theme .site-header .wrap .nav-search svg:hover { color: #0f284c; }

.error-theme .site-header:not(.-active) .wrap .site-nav .page-link { color: #fff; }

.error-theme .site-header:not(.-active) .wrap .site-nav .page-link:hover { color: #0f284c; text-decoration: none; }

.error-theme .site-header:not(.-active) .wrap .site-nav .page-link:active { color: #0f284c; }

.error-theme .site-header.-active .wrap .nav-trigger svg { fill: #fff; }

.error-theme .page-content { background-color: #f7b93f; }

.error-theme .site-footer { background-color: #f7b93f; }

.error-theme .site-footer .wrapper { border-color: #fff; }

.error-theme .site-footer .wrapper a.-logo svg path { fill: transparent; stroke: #fff; }

.error-theme .site-footer .wrapper a.-logo:hover svg path { stroke: #0f284c; }

.error-theme .site-footer .wrapper nav.social-media-list a svg path { fill: #fff; }

.error-theme .site-footer .wrapper nav.social-media-list a:hover svg path { fill: #0f284c; }

.error-theme .site-footer .wrapper .edit-license { border-color: #fff; }

.error-theme .site-footer .wrapper .edit-license a:hover { text-decoration: none; color: #0f284c; }

.error-theme .site-footer .wrapper .footer-nav { border-color: #fff; }

.error-theme .site-footer .wrapper .footer-nav .page-link { color: #fff; }

.error-theme .site-footer .wrapper .footer-col-wrapper, .error-theme .site-footer .wrapper .social-links { font-size: 0.7375rem; color: #fff; }

.error-theme figcaption { color: #0f284c; }

.error-theme a, .error-theme figcaption a, .error-theme .site-footer .wrapper a { color: #fff; text-decoration: none; }

.error-theme a:hover, .error-theme figcaption a:hover, .error-theme .site-footer .wrapper a:hover { color: #fff; text-decoration: underline; }

.error-theme a:active, .error-theme figcaption a:active, .error-theme .site-footer .wrapper a:active { color: #fff; }

.error-theme a:visited, .error-theme figcaption a:visited, .error-theme .site-footer .wrapper a:visited { color: #fff; }

article.guide .principle { margin-top: 60px; margin-bottom: 60px; align-items: center; }

article.guide .principle figure { margin-bottom: 20px; }

@media only screen and (min-width: 640px) { article.guide .principle figure { margin-bottom: 0; } }

article.guide .principle h3:before { display: none; }

.-liquidity-page .nodes { padding: 30px; }

.-liquidity-page .nodes table { max-width: 1400px; }

.-liquidity-page .nodes table tr { margin-bottom: 30px; display: block; }

.-liquidity-page .nodes table th { text-align: center; display: block; }

.-liquidity-page .nodes table td { display: block; }

.-liquidity-page .nodes table td:first-child { font-weight: bold; }

.-liquidity-page .nodes table td:nth-child(2):before { content: 'Rachel'; background-color: #FF9500; }

.-liquidity-page .nodes table td:nth-child(3):before { content: 'Miguel'; background-color: #25B74E; }

.-liquidity-page .nodes table td:nth-child(4):before { content: 'Wagner'; background-color: #24B2EF; }

.-liquidity-page .nodes table td:nth-child(n + 1):before { font-weight: bold; margin-right: 15px; padding: 7.5px; border-radius: 2px; display: inline-block; font-size: 13.5px; }

.-liquidity-page .nodes table td, .-liquidity-page .nodes table th { border-bottom: 1px solid #e5e5e5; }

@media only screen and (min-width: 640px) { .-liquidity-page .nodes thead tr { display: flex; flex-direction: row; } .-liquidity-page .nodes thead th { width: 33.333%; } .-liquidity-page .nodes thead th:first-child { display: none; } }

@media only screen and (min-width: 1440px) { .-liquidity-page .nodes table tr { margin-bottom: auto; display: table-row; } .-liquidity-page .nodes table th { display: table-cell; width: 25%; } .-liquidity-page .nodes table th:first-child { display: table-cell; } .-liquidity-page .nodes table td { display: table-cell; width: 25%; } .-liquidity-page .nodes table td:nth-child(n + 1):before { display: none; } }

article.guide .product-feature { margin-bottom: 30px; margin-top: 30px; }

@media only screen and (min-width: 640px) { article.guide .product-feature { display: flex; flex-direction: row; align-items: center; } }

article.guide .product-feature figure { min-width: 100px; flex-basis: 100px; }

article.guide .product-feature div { width: auto; flex-basis: auto; }

article.guide .product-feature .h4 { margin-bottom: 0; }

article.guide .product-feature .h4:before { margin-top: 0; height: auto; }

article.guide .product-feature p { margin-top: 0; }

.daily-spending-wallet-landing article.guide h2, .daily-spending-wallet-landing article.guide h3 { margin-top: 30px; }

.daily-spending-wallet-landing article.guide h2:before, .daily-spending-wallet-landing article.guide h3:before { display: none; }

.daily-spending-wallet-landing article.guide .-float-left img { border-radius: 8px; }

/*# sourceMappingURL=style.css.map */