body {
    background-color: var(--wtb-plane);
}

app {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--wtb-ink);
    text-wrap: balance;
    letter-spacing: -0.022em;
    font-weight: 700;
    margin-bottom: 0;
}

h1 {
    font-size: 1.75rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

h2 {
    font-size: 1.375rem;
    line-height: 1.2;
}

h3 {
    font-size: 1.1875rem;
    line-height: 1.25;
}

h4 {
    font-size: 1.0625rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

h5,
h6 {
    font-size: 1rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.wtb-stat-tile {
    display: flex;
    flex-direction: column;
}

h1 small,
h2 small {
    font-size: 0.5em;
    font-weight: 600;
    letter-spacing: normal;
}

.wtb-label-caps {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wtb-ink-muted);
    margin: 0;
}

.wtb-tabular {
    font-variant-numeric: tabular-nums;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--wtb-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

.wtb-on-ink {
    color: var(--wtb-on-brand-rest);
}

.wtb-on-ink :where(a, button, summary, [tabindex]):focus-visible {
    outline-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.mud-button-root:not(.mud-nav-link):not(.mud-icon-button),
.mud-chip,
.mud-avatar,
.mud-badge {
    border-radius: var(--wtb-radius-node);
}

.mud-icon-button.mud-button {
    border-radius: var(--wtb-radius-field);
}

.mud-table-cell .mud-icon-button.mud-button {
    padding: 5px;
    font-size: 1.25rem;
}

.mud-theme-primary,
.mud-button-filled-primary,
.mud-fab-primary {
    background-color: var(--wtb-accent-solid) !important;
    color: var(--wtb-on-accent-solid) !important;
}

.mud-input-outlined-border,
.mud-input.mud-input-outlined,
.mud-select-input {
    border-radius: var(--wtb-radius-field);
}

.mud-select-input .mud-input-slot,
.mud-select-input input.mud-input-root {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mud-paper,
.mud-card,
.mud-table {
    border-radius: var(--wtb-radius-panel);
}

.mud-elevation-1,
.mud-elevation-2,
.mud-elevation-3 {
    box-shadow: var(--wtb-shadow-panel);
}

.mud-elevation-4,
.mud-elevation-6,
.mud-elevation-8,
.mud-elevation-12,
.mud-elevation-16,
.mud-elevation-24,
.mud-elevation-25 {
    box-shadow: var(--wtb-shadow-raised);
}

.mud-table-root .mud-table-head .mud-table-cell,
.mud-table-root .mud-table-head .mud-table-cell .mud-table-sort-label,
.mud-table-root .mud-table-head .mud-table-cell .mud-button-root,
.mud-simple-table table * tr > th {
    font-weight: 700;
    color: var(--wtb-ink);
}

.mud-tab {
    font-weight: 600;
}

.mud-tab.mud-tab-active {
    font-weight: 700;
}

.mud-appbar {
    box-shadow: var(--wtb-shadow-panel);
    border-radius: 0;
}

.mud-drawer {
    border-radius: 0;
    border: none;
}

.mud-drawer .mud-nav-link {
    border-radius: 11px;
    margin: 1px 12px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    font-size: 0.9375rem;
    transition: background-color 120ms ease, color 120ms ease;
}

.mud-drawer .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.045);
    color: var(--wtb-on-brand);
}

.mud-drawer .mud-nav-link.active {
    background-color: rgba(255, 255, 255, 0.075);
    color: var(--wtb-on-brand);
    font-weight: 600;
}

.mud-drawer .mud-nav-link .mud-nav-link-icon {
    color: var(--wtb-on-brand-muted);
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: var(--wtb-accent);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--wtb-accent) 45%, transparent));
}

.wtb-nav-section {
    padding: 1.25rem 1.5rem 0.5rem;
    color: var(--wtb-on-brand-muted);
}

.wtb-nav-section:first-of-type {
    padding-top: 0.5rem;
}

.wtb-rail-header {
    padding: 1.5rem 1.5rem 1rem;
    height: auto;
}

.wtb-rail-logo {
    width: 100%;
    max-width: 170px;
    height: auto;
}

.wtb-rail-menu {
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 0.5rem;
}

.wtb-rail-foot {
    padding: 0.75rem 1.5rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.wtb-rail-version {
    font-size: 0.8125rem;
    color: var(--wtb-on-brand-muted);
    text-decoration: none;
}

.wtb-rail-version:hover {
    color: var(--wtb-on-brand);
    text-decoration: none;
}

.wtb-backdrop {
    pointer-events: none;
    inset: 0;
    overflow: hidden;
    position: absolute;
}

.wtb-backdrop svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mud-charts-line-series circle {
    fill: var(--wtb-surface);
    stroke-width: 2.5px;
    opacity: 1;
}

.wtb-lockup-light {
    display: block;
}

.wtb-lockup-dark {
    display: none;
}

:root[data-theme="dark"] .wtb-lockup-light {
    display: none;
}

:root[data-theme="dark"] .wtb-lockup-dark {
    display: block;
}

.wtb-main {
    position: relative;
    min-height: 100vh;
}

.wtb-content {
    position: relative;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@media (min-width: 600px) {
    .wtb-content {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }
}