:root {
  color-scheme: dark;
}

html, body {
  background: #0F172A;
  color: #F8FAFC;
  -webkit-tap-highlight-color: transparent;
}
body {
  overflow-x: hidden;
}

#three-hero {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#three-hero canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.signal-tab {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #CBD5E1;
  border-radius: 9999px;
  border: 1px solid #334155;
  background: transparent;
  transition: all 150ms ease;
  cursor: pointer;
}
.signal-tab:hover {
  color: #F8FAFC;
  border-color: #475569;
}
.signal-tab-active {
  color: #0F172A;
  background: #F59E0B;
  border-color: #F59E0B;
}

.chart-frame {
  border: 1px solid #334155;
  border-radius: 1rem;
  background: #1E293B;
  padding: 0.75rem;
  min-height: 360px;
}
.chart-frame .plotly-graph-div {
  width: 100% !important;
  min-height: 340px;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0F172A; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

::selection {
  background: #F59E0B;
  color: #0F172A;
}

@media (max-width: 640px) {
  .chart-frame { min-height: 300px; padding: 0.5rem; }
  .chart-frame .plotly-graph-div { min-height: 280px; }
}

body { min-height: 100vh; }