.uplot, .uplot *, .uplot *::before, .uplot *::after {box-sizing: border-box;}.uplot {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height: 1.5;width: min-content;}.u-title {text-align: center;font-size: 18px;font-weight: bold;}.u-wrap {position: relative;user-select: none;}.u-over, .u-under {position: absolute;}.u-under {overflow: hidden;}.uplot canvas {display: block;position: relative;width: 100%;height: 100%;}.u-axis {position: absolute;}.u-legend {font-size: 14px;margin: auto;text-align: center;}.u-inline {display: block;}.u-inline * {display: inline-block;}.u-inline tr {margin-right: 16px;}.u-legend th {font-weight: 600;}.u-legend th > * {vertical-align: middle;display: inline-block;}.u-legend .u-marker {width: 1em;height: 1em;margin-right: 4px;background-clip: padding-box !important;}.u-inline.u-live th::after {content: ":";vertical-align: middle;}.u-inline:not(.u-live) .u-value {display: none;}.u-series > * {padding: 4px;}.u-series th {cursor: pointer;}.u-legend .u-off > * {opacity: 0.3;}.u-select {background: rgba(0,0,0,0.07);position: absolute;pointer-events: none;}.u-cursor-x, .u-cursor-y {position: absolute;left: 0;top: 0;pointer-events: none;will-change: transform;}.u-hz .u-cursor-x, .u-vt .u-cursor-y {height: 100%;border-right: 1px dashed #607D8B;}.u-hz .u-cursor-y, .u-vt .u-cursor-x {width: 100%;border-bottom: 1px dashed #607D8B;}.u-cursor-pt {position: absolute;top: 0;left: 0;border-radius: 50%;border: 0 solid;pointer-events: none;will-change: transform;/*this has to be !important since we set inline "background" shorthand */background-clip: padding-box !important;}.u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off {display: none;} /* FuturesBench design system. Tokens on :root; dark mode via prefers-color-scheme AND html[data-theme] override (theme-init script in sets it pre-paint from localStorage). Palette validated (dataviz validator): light categorical set on --bg and dark set on --surface both PASS; amber/teal fills rely on direct text labels (house rule: every value is also printed as a number). */ :root { --bg: #f7f6f1; --surface: #fffefb; --surface2: #f1efe8; --line: #e3e1d6; --ink: #1b1d22; --ink2: #3a3d45; --mut: #5d6068; --brand: #1d3a63; --brand-ink: #1d3a63; --accent: #2a78d6; --s-spec: #2a78d6; /* large specs / managed money */ --s-comm: #eda100; /* commercials */ --s-small: #4a3aa7; /* small traders */ --s-oi: #1baf7a; /* open interest */ --pos: #2a78d6; --neg: #e34948; --pos-text: #1c5cab; --neg-text: #c03530; --grid: #dcdad0; --chart-txt: #6a6d75; --radius: 10px; --radius-s: 6px; --shadow: 0 1px 2px rgba(27, 29, 34, .04); --font-sans: "Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg: #101318; --surface: #161a21; --surface2: #1c212a; --line: #262c37; --ink: #e8e6de; --ink2: #c4c2ba; --mut: #9aa0ab; --brand-ink: #8fb0dd; --accent: #3987e5; --s-spec: #3987e5; --s-comm: #c98500; --s-small: #9085e9; --s-oi: #199e70; --pos: #3987e5; --neg: #e66767; --pos-text: #5d9df0; --neg-text: #ef8585; --grid: #2a3140; --chart-txt: #8a909b; --shadow: none; } } html[data-theme="light"] { --bg: #f7f6f1; --surface: #fffefb; --surface2: #f1efe8; --line: #e3e1d6; --ink: #1b1d22; --ink2: #3a3d45; --mut: #5d6068; --brand-ink: #1d3a63; --accent: #2a78d6; --s-spec: #2a78d6; --s-comm: #eda100; --s-small: #4a3aa7; --s-oi: #1baf7a; --pos: #2a78d6; --neg: #e34948; --pos-text: #1c5cab; --neg-text: #c03530; --grid: #dcdad0; --chart-txt: #6a6d75; --shadow: 0 1px 2px rgba(27, 29, 34, .04); } html[data-theme="dark"] { --bg: #101318; --surface: #161a21; --surface2: #1c212a; --line: #262c37; --ink: #e8e6de; --ink2: #c4c2ba; --mut: #9aa0ab; --brand-ink: #8fb0dd; --accent: #3987e5; --s-spec: #3987e5; --s-comm: #c98500; --s-small: #9085e9; --s-oi: #199e70; --pos: #3987e5; --neg: #e66767; --pos-text: #5d9df0; --neg-text: #ef8585; --grid: #2a3140; --chart-txt: #8a909b; --shadow: none; } @font-face { font-family: "Plex Sans"; src: url("/assets/fonts/plex-sans-400.b5ad7bd3.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Plex Sans"; src: url("/assets/fonts/plex-sans-600.fff0ab3a.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Plex Sans"; src: url("/assets/fonts/plex-sans-700.914f1400.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: 16px/1.55 var(--font-sans); color: var(--ink); background: var(--bg); } a { color: var(--brand-ink); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 28px; line-height: 1.22; letter-spacing: -.015em; margin: .2em 0 .35em; font-weight: 700; } h2 { font-size: 20px; letter-spacing: -.01em; margin: 1.6em 0 .5em; font-weight: 600; } h3 { font-size: 16.5px; margin: 1.2em 0 .4em; font-weight: 600; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; } /* ---------------------------------------------------------------- header */ header.site { border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 20; } header.site .in { max-width: 1120px; margin: 0 auto; padding: 9px 16px; display: flex; gap: 16px; align-items: center; } header.site .logo { font-weight: 700; font-size: 18.5px; letter-spacing: -.02em; color: var(--ink); display: flex; align-items: center; flex-shrink: 0; } header.site .logo svg { margin-right: 8px; } header.site .logo svg { display: block; } header.site .logo span { color: var(--brand-ink); } header.site nav { display: flex; gap: 4px; font-size: 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } header.site nav::-webkit-scrollbar { display: none; } header.site nav a { color: var(--ink2); padding: 5px 10px; border-radius: 7px; white-space: nowrap; } header.site nav a:hover { background: var(--surface2); text-decoration: none; color: var(--ink); } header.site nav a[aria-current="true"] { background: var(--surface2); color: var(--ink); font-weight: 600; } .pill { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mut); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; background: var(--surface2); white-space: nowrap; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--s-oi); flex-shrink: 0; } .themebtn { flex-shrink: 0; border: 1px solid var(--line); background: var(--surface2); color: var(--mut); border-radius: 7px; width: 30px; height: 30px; padding: 0; cursor: pointer; font-size: 15px; line-height: 1; } .themebtn:hover { color: var(--ink); } /* ---------------------------------------------------------------- layout */ main { max-width: 1120px; margin: 0 auto; padding: 20px 16px 48px; } nav.crumb { font-size: 13px; color: var(--mut); margin: 0 0 16px; } nav.crumb a { color: var(--mut); } .sub { color: var(--mut); font-size: 14.5px; margin: 0 0 16px; } .note { font-size: 13px; color: var(--mut); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 16px; box-shadow: var(--shadow); } .card > h2:first-child { margin-top: 0; } /* ---------------------------------------------------------------- answer */ .answer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 16px; box-shadow: var(--shadow); } .answer p { margin: 0 0 12px; } .answer p:last-child { margin-bottom: 0; } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .kpi { background: var(--surface2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; } .kpi .v { font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .kpi .v.pos { color: var(--pos-text); } .kpi .v.neg { color: var(--neg-text); } .kpi .l { font-size: 12px; color: var(--mut); margin-top: 1px; } .kpi svg { margin-top: 6px; display: block; } details.cite { margin-top: 12px; font-size: 13px; color: var(--mut); } details.cite summary { cursor: pointer; } details.cite pre { white-space: pre-wrap; word-break: break-word; background: var(--surface2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 9px 11px; font-size: 12.5px; margin: 6px 0 0; } /* ---------------------------------------------------------------- tables */ .tablewrap { overflow-x: auto; margin: 10px 0; border: 1px solid var(--line); border-radius: var(--radius-s); } table { border-collapse: collapse; width: 100%; font-size: 14px; background: var(--surface); font-variant-numeric: tabular-nums; } th, td { padding: 7px 11px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; } th:first-child, td:first-child { text-align: left; } thead th { background: var(--surface2); font-weight: 600; font-size: 12.5px; color: var(--ink2); position: sticky; top: 0; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--surface2); } td.pos { color: var(--pos-text); } td.neg { color: var(--neg-text); } th[data-sort] { cursor: pointer; user-select: none; } th[data-sort]:hover { color: var(--ink); } th[data-sort].asc::after { content: " ↑"; } th[data-sort].desc::after { content: " ↓"; } /* ---------------------------------------------------------------- charts */ .chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; box-shadow: var(--shadow); } .chart svg { width: 100%; height: auto; display: block; } .chart .ranges { display: flex; gap: 6px; margin-bottom: 10px; font-size: 13px; flex-wrap: wrap; } .chart input { position: absolute; opacity: 0; pointer-events: none; } .chart label, .chart .ranges button { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 3px 12px; cursor: pointer; color: var(--mut); background: var(--surface); font: inherit; font-size: 13px; } .chart label:hover, .chart .ranges button:hover { color: var(--ink); } .chart .p { display: none; } #r1y:checked ~ .p1y, #r5y:checked ~ .p5y, #rmax:checked ~ .pmax { display: block; } #r1y:checked ~ .ranges label[for=r1y], #r5y:checked ~ .ranges label[for=r5y], #rmax:checked ~ .ranges label[for=rmax], .chart .ranges .on { background: var(--brand); color: #fff; border-color: var(--brand); } html[data-theme="dark"] .chart .ranges .on, html[data-theme="dark"] #r1y:checked ~ .ranges label[for=r1y], html[data-theme="dark"] #r5y:checked ~ .ranges label[for=r5y], html[data-theme="dark"] #rmax:checked ~ .ranges label[for=rmax] { background: var(--accent); border-color: var(--accent); color: #0d1117; } /* ------------------------------------------------------------ components */ ul.facts { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 12px 34px; margin: 10px 0; } ul.facts li { margin: 6px 0; } .mesh { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .mesh a { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 13px; font-size: 13.5px; color: var(--ink2); } .mesh a:hover { border-color: var(--brand-ink); color: var(--brand-ink); text-decoration: none; } dl.faq dt { font-weight: 600; margin: 14px 0 3px; } dl.faq dd { margin: 0; color: var(--ink2); } .btn { display: inline-block; background: var(--brand); color: #fff; border: none; border-radius: var(--radius-s); padding: 8px 16px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; } html[data-theme="dark"] .btn { background: var(--accent); color: #0d1117; } input[type="email"], input[type="text"], input[type="number"], select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 10px; } .spark { display: block; } .spark polyline { stroke: var(--s-spec); } /* ------------------------------------------------- screener & heatmap */ .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; } .toolbar input[type="search"] { min-width: 200px; flex: 0 1 240px; } .chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink2); border-radius: 999px; padding: 4px 13px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; } .chip:hover { border-color: var(--brand-ink); color: var(--brand-ink); } .chip.on { background: var(--brand); border-color: var(--brand); color: #fff; } html[data-theme="dark"] .chip.on { background: var(--accent); border-color: var(--accent); color: #0d1117; } td .chip { cursor: default; font-size: 11.5px; padding: 1px 9px; } td .chip:hover { border-color: var(--line); color: var(--ink2); } .reg-crowded-long { border-color: var(--pos-text); color: var(--pos-text); } .reg-crowded-short { border-color: var(--neg-text); color: var(--neg-text); } .reg-flip { border-color: var(--s-comm); color: var(--s-comm); } .reg-div { border-color: var(--s-small); color: var(--s-small); } td.hm { text-align: right; font-variant-numeric: tabular-nums; } .hm-0 { background: color-mix(in srgb, var(--neg) 42%, var(--surface)); } .hm-1 { background: color-mix(in srgb, var(--neg) 34%, var(--surface)); } .hm-2 { background: color-mix(in srgb, var(--neg) 26%, var(--surface)); } .hm-3 { background: color-mix(in srgb, var(--neg) 18%, var(--surface)); } .hm-4 { background: color-mix(in srgb, var(--neg) 9%, var(--surface)); } .hm-5 { background: var(--surface2); } .hm-6 { background: color-mix(in srgb, var(--pos) 9%, var(--surface)); } .hm-7 { background: color-mix(in srgb, var(--pos) 18%, var(--surface)); } .hm-8 { background: color-mix(in srgb, var(--pos) 26%, var(--surface)); } .hm-9 { background: color-mix(in srgb, var(--pos) 34%, var(--surface)); } .hm-10 { background: color-mix(in srgb, var(--pos) 42%, var(--surface)); } tbody tr:hover td.hm { filter: brightness(0.96); background-clip: padding-box; } /* ---------------------------------------------------------- calculators */ form.calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; margin-bottom: 14px; } form.calc label { font-size: 12.5px; color: var(--mut); display: block; margin-bottom: 3px; } form.calc select, form.calc input { width: 100%; } form.calc fieldset.leg { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; } form.calc fieldset.leg legend { font-size: 12.5px; color: var(--mut); padding: 0 6px; } form.calc .btn { grid-column: 1 / -1; justify-self: start; } .result { border-top: 1px solid var(--line); padding-top: 12px; } .result .rline { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 15px; border-bottom: 1px dashed var(--line); } .result .rline:last-of-type { border-bottom: none; } .result .rline strong { font-variant-numeric: tabular-nums; } .result .pos { color: var(--pos-text); } .result .neg { color: var(--neg-text); } /* uPlot panels (fb-chart.js) */ .fb-ptitle { font-size: 13px; font-weight: 600; color: var(--ink2); margin: 12px 0 4px; } .chart .u-legend { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; } .chart .u-legend th { font-weight: 600; color: var(--ink2); } .chart .u-inline tr { margin-right: 10px; } .chart .u-select { background: color-mix(in srgb, var(--accent) 16%, transparent); } /* ---------------------------------------------------------------- footer */ footer.site { border-top: 1px solid var(--line); background: var(--surface); margin-top: 36px; } footer.site .in { max-width: 1120px; margin: 0 auto; padding: 20px 16px 30px; font-size: 13.5px; color: var(--mut); } footer.site nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; } footer.site nav a { color: var(--ink2); } @media (max-width: 720px) { h1 { font-size: 23px; } h2 { font-size: 18px; } main { padding-top: 14px; } .pill { display: none; } }