:root {
  --bg-base: #0c0c0c;
  --bg-panel: #131313;
  --bg-panel-2: #171717;
  --bg-border: #1e1e1e;
  --accent: #bf5700;
  --accent-dim: #7a3800;
  --text-primary: #f0ede4;
  --text-secondary: #908c84;
  --text-muted: #4c4a46;
  --up: #6b9e5c;
  --down: #b84b3e;
  --chart-s1: #bf5700;
  --chart-s2: #4d8fb5;
  --chart-s3: #d4b896;
  --chart-s4: #8b7252;
  --chart-band: rgba(191, 87, 0, 0.12);
  --chart-green-band: rgba(107, 158, 92, 0.12);
  --chart-red-band: rgba(184, 75, 62, 0.12);
  --chart-grid: rgba(240, 237, 228, 0.07);
  --font-mono: "JetBrains Mono", "IBM Plex Mono", "Courier New", monospace;
  --font-ui: "Inter", "IBM Plex Sans", system-ui, sans-serif;
  --font-hdr: "Roboto Slab", "Georgia", serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 16px;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg-base);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.top-rule {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 3px;
  background: var(--accent);
}

.shell {
  width: min(1840px, calc(100vw - 32px));
  margin: 0 auto;
}

@media (max-width: 760px) {
  .shell {
    width: min(100vw - 20px, 720px);
  }
}