@font-face { font-family: "RB Figtree"; src: url("/vendor/figtree/figtree-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 300 900; font-style: normal; font-display: block; }

/* editor shell */
#rbStage { position: relative; width: 100%; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px rgb(255 255 255 / .10), 0 12px 40px rgb(0 0 0 / .45); }
#rbStage > .rb { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.rb-seg { display: flex; height: 30px; align-items: center; border-radius: 999px; background: rgb(107 114 128 / .15); padding: 3px; }
.rb-seg button { display: flex; height: 100%; flex: 1; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; font-size: 12px; font-weight: 500; color: rgb(200 201 209); transition: all .125s; }
.rb-seg button.on { background: rgb(252 252 252); color: #06070b; }
.rb-sub { font-size: 11px; line-height: 14px; color: rgb(119 122 140); }
.rb-file { display: flex; height: 32px; align-items: center; gap: 8px; }
.rb-file img { height: 32px; width: 32px; border-radius: 6px; object-fit: cover; background: rgb(50 53 66); }
.rb-range { width: 160px; accent-color: #526fff; }
.rb-plat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rb-plat label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: rgb(119 122 140); }
.rb-plat .field { width: 100%; }
.shape-btn { height: 30px; border-radius: 4px; font-size: 12px; font-weight: 500; color: rgb(255 255 255 / .8); background: rgb(107 114 128 / .15); transition: all .125s; }
.shape-btn:hover { background: rgb(107 114 128 / .22); }
.shape-btn.on { background: rgb(82 111 255 / .25); color: #fff; box-shadow: inset 0 0 0 1px rgb(82 111 255 / .6); }
.calc .warn { color: #f5a524; }
.rb-probe { position: absolute; left: -9999px; top: 0; font: 500 12px "RB Figtree", sans-serif; letter-spacing: -.35px; font-variant-numeric: tabular-nums; white-space: nowrap; visibility: hidden; }


/* the recreated dashboard: 1440x900, positions measured from real screenshots */
.rb { position: relative; width: 1440px; height: 900px; overflow: hidden; background: #121215; color: #f7f7f8; font-family: "RB Figtree", sans-serif; font-size: 14px; line-height: 1.2; -webkit-font-smoothing: antialiased; text-align: left; font-feature-settings: "lnum" 1; }
.rb *, .rb *::before, .rb *::after { box-sizing: border-box; }
.rb .a { position: absolute; white-space: nowrap; }
.rb i { font-style: normal; }
.rb .ic { position: absolute; display: block; line-height: 1; text-align: center; }
.rb .ell { overflow: hidden; text-overflow: ellipsis; }
/* Figtree sits a pixel higher than the original face at these sizes */
.rb .n1, .rb .n2, .rb .crumbs, .rb .lab, .rb .sel span, .rb .fbtn, .rb .xl, .rb .ax, .rb .legend, .rb .stat .sl, .rb .card h3 { translate: 0 1px; }

.rb .scroller { position: absolute; left: 452px; top: 72px; width: 988px; height: 828px; overflow: hidden; }
.rb .page { position: absolute; left: -452px; width: 1440px; }
.rb .sb-arrow { position: absolute; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; }
.rb .sb-arrow.up { border-bottom: 4px solid #808080; }
.rb .sb-arrow.dn { border-top: 4px solid #808080; }
.rb .sb-thumb { position: absolute; width: 4px; border-radius: 2px; background: #7b7b7b; }

/* left navs */
.rb .nav1 { position: absolute; left: 0; top: 0; width: 217px; height: 900px; border-right: 1px solid #292a31; background: #121215; }
.rb .nav2 { position: absolute; left: 217px; top: 0; width: 235px; height: 900px; border-right: 1px solid #292a31; background: #121215; overflow: hidden; }
.rb .n1 { position: absolute; white-space: nowrap; left: 66px; font-size: 14px; font-weight: 700; color: #e5e5e6; letter-spacing: .1px; }
.rb .n1i { position: absolute; left: 25px; width: 22px; height: 22px; font-size: 21px; line-height: 22px; color: #e5e5e6; text-align: center; }
.rb .n1sel { position: absolute; left: 18px; top: 168px; width: 180px; height: 40px; border-radius: 8px; background: #212227; }
.rb .hr1 { position: absolute; left: 16px; width: 184px; height: 1px; background: #292a31; }
.rb .n2 { position: absolute; white-space: nowrap; left: 245px; font-size: 14px; font-weight: 600; color: #f7f7f8; }
.rb .n2.sub { left: 261px; font-weight: 400; }
.rb .n2sel { position: absolute; left: 233px; width: 192px; height: 40px; border-radius: 8px; background: #212227; }
.rb .tri { position: absolute; left: 399px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #f7f7f8; }
.rb .tri.up { border-top: 0; border-bottom: 4px solid #f7f7f8; }
.rb .newpill { position: absolute; left: 354px; width: 45px; height: 24px; border-radius: 12px; background: #335fff; color: #fff; font-size: 14px; font-weight: 600; line-height: 24px; text-align: center; }

/* header */
.rb .crumbs { position: absolute; left: 520px; top: 26px; display: flex; font-size: 16px; color: #d5d7dd; white-space: nowrap; }
.rb .crumbs s { text-decoration: none; margin: 0 8px; }
.rb .crumbs b { font-weight: 600; color: #f7f7f8; letter-spacing: -.25px; }

/* page content */
.rb h1 { position: absolute; left: 484px; margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; color: #fff; white-space: nowrap; letter-spacing: .1px; }
.rb .desc { position: absolute; left: 484px; width: 902px; font-size: 16px; line-height: 22px; color: #fff; white-space: normal; letter-spacing: .03px; }
.rb .desc u { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rb .promo { position: absolute; left: 484px; width: 914px; border-radius: 12px; background: #202227; overflow: hidden; }
.rb .promo h2 { position: absolute; left: 32px; margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; color: #f7f7f8; white-space: nowrap; }
.rb .promo p { position: absolute; left: 32px; width: 540px; margin: 0; font-size: 16px; line-height: 23px; color: #f7f7f8; white-space: normal; letter-spacing: .1px; }
.rb .pbtn { position: absolute; height: 40px; border-radius: 8px; padding: 0 12px; font-size: 14px; font-weight: 700; line-height: 41px; color: #f7f7f8; }
.rb .tile { position: absolute; width: 297px; height: 103px; border-radius: 12px; background: #202227; }
.rb .tile i { position: absolute; left: 0; right: 0; top: 24px; font-size: 18px; line-height: 20px; color: #bcbec8; text-align: center; }
.rb .tile span { position: absolute; left: 0; right: 0; top: 72px; font-size: 14px; font-weight: 600; color: #f7f7f8; text-align: center; letter-spacing: -.1px; }
.rb .rule { position: absolute; left: 484px; width: 914px; height: 2px; border-top: 1px solid #9a9a9a; background: #eeeeee; }
.rb .lab { position: absolute; white-space: nowrap; font-size: 14px; font-weight: 700; color: #f7f7f8; letter-spacing: .2px; }
.rb .sel { position: absolute; width: 220px; height: 40px; border: 1px solid #5e6271; border-radius: 8px; }
.rb .sel span { position: absolute; left: 13px; top: 10px; font-size: 14px; color: #d5d7dd; }
.rb .sel svg { position: absolute; right: 15px; top: 16px; }
.rb .fbtn { position: absolute; height: 40px; border-radius: 8px; background: #26272d; padding: 0 12px; font-size: 14px; font-weight: 700; line-height: 40px; color: #f7f7f8; }

/* chart cards */
.rb .card { position: absolute; left: 484px; width: 914px; height: 524px; border: 1px solid #292a31; border-radius: 8px; background: #131316; }
.rb .card h3 { position: absolute; left: 24px; top: 28px; margin: 0; display: flex; align-items: center; gap: 3px; font-size: 20px; font-weight: 700; line-height: 1.2; color: #f7f7f8; white-space: nowrap; }
.rb .card h3 i { font-size: 22px; line-height: 20px; font-weight: 400; }
.rb .explore { position: absolute; left: 790px; top: 24px; width: 58px; height: 32px; border-radius: 8px; background: #2a2b32; font-size: 12px; font-weight: 700; line-height: 32px; text-align: center; color: #f7f7f8; }
.rb .kebab { position: absolute; left: 856px; top: 24px; width: 32px; height: 32px; border-radius: 8px; background: #292a31; font-size: 16px; line-height: 32px; text-align: center; color: #f7f7f8; }
.rb .stats { position: absolute; left: 24px; top: 70px; display: flex; gap: 16px; }
.rb .stats.tight { gap: 10px; }
.rb .stats.tight .num { font-size: 22px; letter-spacing: -1px; }
.rb .stats.tight .pill { margin-left: 6px; padding: 0 6px; gap: 5px; }
.rb .stat .sl { font-size: 14px; line-height: 17px; color: #d5d7dd; white-space: nowrap; letter-spacing: .05px; }
.rb .stat .sv { display: flex; align-items: center; height: 31px; margin-top: 4px; white-space: nowrap; }
.rb .stat .num { font-size: 26px; font-weight: 700; line-height: 31px; letter-spacing: -1.2px; color: #f7f7f8; }
.rb .coin { display: block; flex: none; width: 16px; height: 18px; margin: 0 5px 0 2px; }
.rb .pill { display: flex; align-items: center; height: 24px; margin-left: 8px; border-radius: 4px; padding: 0 9px 0 10px; gap: 9px; font-size: 12px; font-weight: 700; color: #f7f7f8; }
.rb .pill.up { background: #193429; }
.rb .pill.dn { background: #202126; }
.rb .pill svg { display: block; }
.rb .chart { position: absolute; left: 0; top: 0; overflow: visible; }
.rb .ax { position: absolute; font-size: 12px; font-weight: 500; color: #d5d7dd; white-space: nowrap; letter-spacing: -.35px; font-variant-numeric: tabular-nums; }
.rb .xl { position: absolute; font-size: 12px; font-weight: 500; line-height: 16px; color: #d5d7dd; white-space: nowrap; text-align: center; }
.rb .legend { position: absolute; left: 4px; width: 912px; display: flex; justify-content: center; gap: 20px; font-size: 12px; color: #e3e3e4; white-space: nowrap; }
.rb .legend span { display: flex; align-items: center; gap: 5px; letter-spacing: -.15px; }

/* performance */
.rb .live { position: absolute; left: 484px; top: 203px; width: 914px; height: 111px; border-radius: 12px; background: #191a1f; }
.rb .live .t { position: absolute; top: 18px; font-size: 14px; font-weight: 500; color: #fff; white-space: nowrap; letter-spacing: .12px; }
.rb .live .big { position: absolute; left: 15px; top: 43px; font-size: 48px; font-weight: 700; line-height: 1.2; color: #fff; }
.rb .live .v { position: absolute; top: 68px; font-size: 24px; font-weight: 300; line-height: 1.2; color: #fff; }
.rb .grow { position: absolute; white-space: nowrap; left: 484px; font-size: 16px; font-weight: 500; color: #fff; }
.rb .foot { position: absolute; left: 484px; font-size: 14px; line-height: 20px; color: #d5d7dd; white-space: normal; }
.rb .foot a { color: #d5d7dd; text-decoration: none; }
.rb .lang { position: absolute; left: 1296px; width: 102px; height: 40px; border: 1px solid #292a31; border-radius: 20px; font-size: 14px; font-weight: 700; line-height: 38px; color: #f7f7f8; }
