Something went wrong. Try again.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101.bottom-view { --bo-bg: #1e1e28; --bo-cream: #d8cfad; --bo-gold: #a89c7b; --bo-teal: #88a79e; background: var(--bo-bg); color: var(--bo-cream); font: 13px/1.35 "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace; width: 100%; min-height: 100dvh; height: 100dvh; padding: 15px 10px 7px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; color-scheme: dark;}.bottom-view *, .bottom-view *::before, .bottom-view *::after { box-sizing: border-box; }.bottom-view button, .bottom-view input, .bottom-view table, .bottom-view thead, .bottom-view tbody, .bottom-view th, .bottom-view td { font: inherit; letter-spacing: normal; text-transform: none; }.bottom-view button { padding: 0 3px; border: 0; border-radius: 0; background: transparent; color: inherit; cursor: pointer; }.bottom-view a { color: inherit; text-decoration: none; }.bottom-view button:hover, .bottom-view a:hover { color: #f2e6c3; text-decoration: underline; }.bottom-view :focus-visible { outline: 1px solid var(--bo-teal); outline-offset: 2px; }.bottom-view .bo-top { display: grid; grid-template-columns: minmax(0, 1fr) 166px; gap: 7px; flex: 0 0 28%; min-height: 155px; }.bottom-view .bo-middle, .bottom-view .bo-bottom { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 7px; min-height: 0; }.bottom-view .bo-middle { flex: 1.05; }.bottom-view .bo-bottom { flex: 1; }.bottom-view .bo-panel { position: relative; border: 1px solid var(--bo-gold); min-width: 0; min-height: 0; padding: 12px 5px 4px; display: flex; flex-direction: column; }.bottom-view .bo-panel.bo-focused { border-color: #c6a367; }.bottom-view .bo-panel-title { position: absolute; top: -10px; left: 6px; right: 7px; display: flex; align-items: center; gap: 12px; pointer-events: none; }.bottom-view .bo-panel-title h2 { margin: 0; padding: 0 4px; background: var(--bo-bg); color: var(--bo-cream); font: inherit; white-space: nowrap; }.bottom-view .bo-panel-title > :last-child:not(h2) { margin-left: auto; background: var(--bo-bg); padding: 0 4px; font-size: 11px; pointer-events: auto; }.bottom-view .bo-window { display: flex; gap: 8px; }.bottom-view .bo-window button[aria-pressed="true"] { color: var(--bo-cream); text-decoration: underline; }.bottom-view .bo-muted { color: #92917f; }.bottom-view .bo-error { color: #d48c72; }.bottom-view .bo-chart { flex: 1; min-height: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 19px; position: relative; gap: 2px 4px; }.bottom-view .bo-y-labels { display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: 11px; }.bottom-view .bo-plot { min-width: 0; min-height: 0; position: relative; overflow: hidden; }.bottom-view .bo-plot svg { display: block; width: 100%; height: 100%; overflow: hidden; }.bottom-view .bo-axis { fill: none; stroke: #aaa083; stroke-width: 1; vector-effect: non-scaling-stroke; }.bottom-view .bo-x-labels { grid-column: 2; display: flex; justify-content: space-between; font-size: 11px; }.bottom-view .bo-chart-empty { position: absolute; top: 50%; left: 5%; color: #92917f; }.bottom-view .bo-inset { position: absolute; top: 3px; right: 4px; padding: 4px 7px; border: 1px solid var(--bo-gold); background: var(--bo-bg); max-width: calc(100% - 8px); font-size: 11px; }.bottom-view .bo-network-inset { color: #d6bb69; }.bottom-view .bo-rate-legend { border: 1px solid var(--bo-gold); padding: 4px; min-width: 0; overflow: auto; }.bottom-view .bo-legend-heading, .bottom-view .bo-rate-legend button { display: flex; justify-content: space-between; gap: 6px; width: 100%; text-align: left; }.bottom-view .bo-legend-heading { color: var(--bo-teal); margin-bottom: 10px; }.bottom-view .bo-rate-legend .bo-show-all { justify-content: center; margin-bottom: 10px; border: 1px solid var(--bo-gold); padding: 2px; font-size: 11px; }.bottom-view .bo-legend-note { display: block; margin-top: 5px; font-size: 11px; }.bottom-view .bo-selected, .bottom-view .bo-selected button { background: var(--bo-cream); color: var(--bo-bg); }.bottom-view .bo-selected button:hover, .bottom-view button.bo-selected:hover { color: #31313d; }.bottom-view .bo-stacked { display: grid; grid-template-rows: 1fr 1fr; gap: 13px; min-width: 0; min-height: 0; }.bottom-view .bo-table-scroll { min-width: 0; min-height: 0; overflow: auto; flex: 1; scrollbar-width: thin; }.bottom-view table { width: 100%; border-collapse: collapse; table-layout: auto; margin: 0; }.bottom-view thead { color: var(--bo-teal); background: var(--bo-bg); position: sticky; top: 0; }.bottom-view th, .bottom-view td { border: 0; padding: 0 4px; height: 19px; text-align: right; white-space: nowrap; font-weight: 400; }.bottom-view th:first-child, .bottom-view td:first-child { text-align: left; }.bottom-view th button { text-align: inherit; padding: 0; }.bottom-view tbody tr:hover { background: #2a2a34; }.bottom-view tbody tr.bo-selected:hover { background: var(--bo-cream); }.bottom-view .bo-collection-table { table-layout: fixed; }.bottom-view .bo-collection-table th:first-child { width: 46%; }.bottom-view .bo-collection-table:has(th:nth-child(2):last-child) th:first-child { width: 75%; }.bottom-view .bo-collection-table td:first-child button { display: block; width: 100%; padding: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.bottom-view .bo-filter { display: flex; align-items: center; gap: 7px; padding: 0 3px 4px; font-size: 11px; }.bottom-view .bo-categories { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 3px 6px; }.bottom-view .bo-categories button[aria-pressed="true"] { background: var(--bo-cream); color: var(--bo-bg); }.bottom-view .bo-data-note { font-size: 11px; color: #aaa58e; margin: 5px 3px 0; }.bottom-view .bo-filter input { color: var(--bo-cream); background: transparent; border: 0; border-bottom: 1px solid #58564d; border-radius: 0; min-width: 0; width: 100%; flex: 1; padding: 0 3px; }.bottom-view .bo-filter span { white-space: nowrap; }.bottom-view .bo-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 14px; flex: 0 0 auto; font-size: 11px; }.bottom-view .bo-footer nav, .bottom-view .bo-footer > div { display: flex; gap: 10px; flex-wrap: wrap; }.bottom-view .bo-help { color: var(--bo-cream); background: var(--bo-bg); border: 1px solid var(--bo-gold); border-radius: 0; max-width: min(650px, calc(100vw - 30px)); max-height: 85dvh; padding: 16px; font: inherit; }.bottom-view .bo-help::backdrop { background: #0009; }.bottom-view .bo-help-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--bo-teal); }.bottom-view .bo-help p { margin: 12px 0 0; }@media (max-width: 850px) { .bottom-view { font-size: 12px; } .bottom-view .bo-top { grid-template-columns: minmax(0, 1fr) 132px; } .bottom-view .bo-panel-title > :last-child:not(h2) { font-size: 10px; } .bottom-view .bo-collection-table { min-width: 400px; }}@media (max-width: 650px), (max-height: 520px) { .bottom-view { height: auto; min-height: 100dvh; overflow: visible; gap: 14px; } .bottom-view .bo-top { min-height: 220px; flex-basis: auto; } .bottom-view .bo-middle, .bottom-view .bo-bottom { display: flex; flex-direction: column; gap: 14px; } .bottom-view .bo-proportions, .bottom-view .bo-network { min-height: 230px; } .bottom-view .bo-stacked { grid-template-rows: auto auto; gap: 14px; } .bottom-view .bo-stacked .bo-panel { min-height: 125px; } .bottom-view .bo-activity { min-height: 235px; max-height: 400px; } .bottom-view .bo-footer { gap: 8px; } .bottom-view .bo-panel-title { gap: 4px; }}@media (max-width: 380px) { .bottom-view .bo-top { grid-template-columns: minmax(0, 1fr) 105px; } .bottom-view .bo-rate-legend { font-size: 11px; } .bottom-view .bo-panel-title > .bo-muted { display: none; }}