/*
 * QuantScope — Institutional Dark Workspace
 * Full-width, data-first, restrained dark visual system.
 * Source of truth: design-system/quantscope/MASTER.md
 */

:root {
  --qt-bg: #070b0f;
  --qt-bg-raised: #0a1016;
  --qt-panel: #0d141b;
  --qt-panel-strong: #111a22;
  --qt-panel-hover: #14202a;
  --qt-line: #24313b;
  --qt-line-strong: #3a4a56;
  --qt-text: #f0f4f7;
  --qt-text-soft: #bdc8cf;
  --qt-muted: #8999a4;
  --qt-faint: #687983;
  --qt-cyan: #62c3d9;
  --qt-cyan-dim: #17333d;
  --qt-green: #57d38b;
  --qt-red: #ff6b73;
  --qt-amber: #e8b45f;
  --qt-focus: #8bd7e8;
  --qt-shadow: 0 10px 32px rgb(0 0 0 / 18%);
  --qt-radius-sm: 6px;
  --qt-radius-md: 8px;
  --qt-radius-lg: 10px;
  --qt-motion-fast: 160ms;
  --qt-motion-standard: 210ms;
  --qt-ease-out: cubic-bezier(.16, 1, .3, 1);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  background: var(--qt-bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--qt-text);
  background: var(--qt-bg) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: #061015;
  background: var(--qt-cyan);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--qt-bg);
}

::-webkit-scrollbar-thumb {
  background: #2b3944;
  border: 2px solid var(--qt-bg);
  border-radius: 0;
}

a,
[sc-camel-on-click],
[onclick],
input,
select,
textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
[sc-camel-on-click]:focus-visible,
[onclick]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--qt-focus) !important;
  outline-offset: 2px !important;
}

.qs-skip {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  color: #061015;
  background: var(--qt-cyan);
  border-radius: 6px;
  font: 700 12px Inter, "Segoe UI", sans-serif;
  transform: translateY(-150%);
}

.qs-skip:focus {
  transform: translateY(0);
}

/* -------------------------------------------------------------------------- */
/* Signed-in workspace                                                        */
/* -------------------------------------------------------------------------- */

:is(div,button)[style*="--panel-pad:"] {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh;
  color: var(--qt-text) !important;
  background: var(--qt-bg) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: 14px;
  --accent: var(--qt-cyan);
}

:is(div,button)[style*="--panel-pad"] [style*="background:oklch(12% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="background:oklch(12% 0.012 240"],
:is(div,button)[style*="--panel-pad"] [style*="background:oklch(13% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="background:oklch(14% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="background:oklch(14% 0.012 240"],
:is(div,button)[style*="--panel-pad"] [style*="background:oklch(15.5% 0.012 240"],
:is(div,button)[style*="--panel-pad"] [style*="background:oklch(16% 0.012 240"],
:is(div,button)[style*="--panel-pad"] [style*="background:oklch(17% 0.012 240"],
:is(div,button)[style*="--panel-pad"] [style*="background:oklch(17% 0.014 240"],
:is(div,button)[style*="--panel-pad"] [style*="background:oklch(18% 0.012 240"] {
  background: var(--qt-panel) !important;
}

:is(div,button)[style*="--panel-pad"] [style*="background:linear-gradient"][style*="oklch"] {
  background: var(--qt-panel) !important;
}

:is(div,button)[style*="--panel-pad"] [style*="border:1px solid oklch(2"],
:is(div,button)[style*="--panel-pad"] [style*="border: 1px solid oklch(2"],
:is(div,button)[style*="--panel-pad"] [style*="border-bottom:1px solid oklch(2"],
:is(div,button)[style*="--panel-pad"] [style*="border-top:1px solid oklch(2"],
:is(div,button)[style*="--panel-pad"] [style*="border-left:1px solid oklch(2"],
:is(div,button)[style*="--panel-pad"] [style*="border-right:1px solid oklch(2"] {
  border-color: var(--qt-line) !important;
}

:is(div,button)[style*="--panel-pad"] [style*="color:oklch(98% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(93% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(92% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(91% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(90% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(88% 0.01 240"] {
  color: var(--qt-text) !important;
  text-shadow: none !important;
}

:is(div,button)[style*="--panel-pad"] [style*="color:oklch(76% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(72% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(68% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(67% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(65% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(62% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(60% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(59% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(58% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(57% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(56% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(55% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(54% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(53% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(52% 0.01 240"],
:is(div,button)[style*="--panel-pad"] [style*="color:oklch(51% 0.01 240"] {
  color: var(--qt-muted) !important;
}

:is(div,button)[style*="--panel-pad"] [style*="border-radius:16px"],
:is(div,button)[style*="--panel-pad"] [style*="border-radius:14px"],
:is(div,button)[style*="--panel-pad"] [style*="border-radius:13px"],
:is(div,button)[style*="--panel-pad"] [style*="border-radius:12px"],
:is(div,button)[style*="--panel-pad"] [style*="border-radius:11px"],
:is(div,button)[style*="--panel-pad"] [style*="border-radius:10px"],
:is(div,button)[style*="--panel-pad"] [style*="border-radius:9px"] {
  border-radius: 8px !important;
}

:is(div,button)[style*="--panel-pad"] input,
:is(div,button)[style*="--panel-pad"] select,
:is(div,button)[style*="--panel-pad"] textarea {
  min-height: 42px;
  color: var(--qt-text) !important;
  background: #080e13 !important;
  border: 1px solid var(--qt-line-strong) !important;
  border-radius: 6px !important;
  font-size: 13px !important;
}

:is(div,button)[style*="--panel-pad"] input::placeholder,
:is(div,button)[style*="--panel-pad"] textarea::placeholder {
  color: var(--qt-faint);
}

.qs-topbar {
  min-height: 64px;
  padding: 10px 28px !important;
  color: var(--qt-text) !important;
  background: rgb(9 14 19 / 96%) !important;
  border-bottom: 1px solid var(--qt-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.qs-topbar > :is(div,button):first-child > :is(div,button):first-child {
  width: 36px !important;
  height: 36px !important;
  color: var(--qt-cyan) !important;
  background: var(--qt-cyan-dim) !important;
  border: 1px solid #315764 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.qs-topbar [style*="font-size:14px"] {
  font-size: 15px !important;
}

.qs-account-menu {
  color: var(--qt-text) !important;
  background: var(--qt-panel) !important;
  border: 1px solid var(--qt-line-strong) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 60px rgb(0 0 0 / 45%) !important;
}

.qs-pulse {
  height: 40px !important;
  padding: 0 22px !important;
  color: var(--qt-text-soft) !important;
  background: #080d12 !important;
  border-bottom: 1px solid var(--qt-line) !important;
}

.qs-pulse .qs-ticker-track strong {
  color: var(--qt-text) !important;
}

.qs-ticker-editor {
  color: var(--qt-text) !important;
  background: #0c1319 !important;
  border-bottom: 1px solid var(--qt-line) !important;
}

.qs-dashboard-switch {
  justify-content: flex-start !important;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px 28px 0 !important;
}

.qs-dashboard-switch > :is(div,button) {
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--qt-line) !important;
  border-radius: 0 !important;
}

.qs-dashboard-switch > :is(div,button) > :is(div,button),
.qs-dashboard-switch > :is(div,button) > button {
  min-width: 118px;
  min-height: 44px;
  padding: 10px 18px !important;
  color: var(--qt-muted);
  font: inherit;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 700;
  text-align: center;
}

.qs-dashboard-switch > :is(div,button) > :is(div,button):hover,
.qs-dashboard-switch > :is(div,button) > button:hover {
  color: var(--qt-text) !important;
  background: #101920 !important;
}

.qs-hero,
.qs-overview-equity,
.qs-insights,
.qs-card-grid,
.qs-focus-shell {
  width: auto !important;
  max-width: none !important;
  margin-left: 28px !important;
  margin-right: 28px !important;
}

.qs-hero {
  min-height: 220px !important;
  margin-top: 22px !important;
  padding: 30px 32px !important;
  background: var(--qt-panel) !important;
  border: 1px solid var(--qt-line) !important;
  border-left: 3px solid var(--qt-cyan) !important;
  border-radius: 10px !important;
  box-shadow: var(--qt-shadow) !important;
}

.qs-hero > svg {
  opacity: .14 !important;
}

.qs-intelligence {
  margin: 18px 28px 0;
}

.qs-section-head,
.qs-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.qs-section-head {
  margin-bottom: 12px;
}

.qs-section-head h2 {
  margin: 4px 0 0;
  color: var(--qt-text);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.025em;
}

.qs-section-eyebrow,
.qs-section-source {
  color: var(--qt-muted);
  font: 700 10px/1.3 "IBM Plex Mono", monospace;
  letter-spacing: .1em;
}

.qs-section-eyebrow {
  color: var(--qt-cyan);
}

.qs-section-source {
  padding-top: 5px;
  text-align: right;
}

.qs-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  background: #080e13;
  border: 1px solid var(--qt-line);
  border-radius: var(--qt-radius-lg);
  box-shadow: var(--qt-shadow);
}

.qs-kpi {
  min-width: 0;
  min-height: 118px;
  padding: 20px 22px;
}

.qs-kpi + .qs-kpi {
  border-left: 1px solid var(--qt-line);
}

.qs-kpi-label,
.qs-card-title,
.qs-benchmark-symbol,
.qs-activity-kind {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
}

.qs-kpi-label {
  margin-bottom: 11px;
  color: var(--qt-muted);
  font-size: 9px;
  letter-spacing: .1em;
}

.qs-kpi-value {
  overflow: hidden;
  color: var(--qt-text);
  font: 650 24px/1.1 "IBM Plex Mono", monospace;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qs-kpi-value--text {
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 22px;
  letter-spacing: -.02em;
}

.qs-kpi-value--split {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.qs-kpi-meta {
  margin-top: 8px;
  overflow: hidden;
  color: var(--qt-muted);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qs-intelligence-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 12px;
  margin-top: 12px;
}

.qs-intelligence-card {
  min-width: 0;
  padding: 20px;
  background: var(--qt-panel);
  border: 1px solid var(--qt-line);
  border-radius: var(--qt-radius-lg);
  box-shadow: var(--qt-shadow);
}

.qs-intelligence-card--wide {
  grid-column: 1 / -1;
}

.qs-card-title {
  color: var(--qt-text-soft);
  font-size: 11px;
  letter-spacing: .04em;
}

.qs-card-subtitle {
  margin-top: 5px;
  color: var(--qt-muted);
  font-size: 11px;
  line-height: 1.45;
}

.qs-source-badge,
.qs-text-action {
  min-height: 30px;
  padding: 7px 9px;
  color: var(--qt-cyan);
  background: transparent;
  border: 1px solid #315764;
  border-radius: var(--qt-radius-sm);
  font: 700 9px/1 "IBM Plex Mono", monospace;
  letter-spacing: .07em;
}

.qs-text-action {
  cursor: pointer;
  transition: color var(--qt-motion-fast) ease, background var(--qt-motion-fast) ease, border-color var(--qt-motion-fast) ease;
}

.qs-text-action:hover {
  color: #071015;
  background: var(--qt-cyan);
  border-color: var(--qt-cyan);
}

.qs-benchmark-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 17px;
}

.qs-benchmark-tile {
  min-width: 0;
  padding: 15px;
  background: #080e13;
  border: 1px solid var(--qt-line);
  border-radius: var(--qt-radius-md);
}

.qs-benchmark-symbol {
  color: var(--qt-text-soft);
  font-size: 10px;
  letter-spacing: .08em;
}

.qs-benchmark-price {
  margin-top: 10px;
  color: var(--qt-text);
  font: 650 20px/1 "IBM Plex Mono", monospace;
}

.qs-benchmark-change {
  margin-top: 8px;
  font: 700 12px/1 "IBM Plex Mono", monospace;
}

.qs-alert-list {
  display: grid;
  gap: 4px;
  margin-top: 13px;
}

.qs-alert-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 48px;
  padding: 8px 0;
  border-top: 1px solid var(--qt-line);
}

.qs-alert-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid;
  border-radius: 50%;
  font: 800 8px/1 "IBM Plex Mono", monospace;
}

.qs-alert-mark--ok {
  color: var(--qt-green);
  border-color: #285840;
}

.qs-alert-title {
  color: var(--qt-text-soft);
  font-size: 12px;
  font-weight: 650;
}

.qs-alert-note,
.qs-inline-empty {
  color: var(--qt-muted);
  font-size: 11px;
  line-height: 1.45;
}

.qs-alert-note {
  margin-top: 3px;
}

.qs-inline-empty {
  margin-top: 14px;
  padding: 14px;
  background: #080e13;
  border: 1px dashed var(--qt-line-strong);
  border-radius: var(--qt-radius-md);
}

.qs-activity-table {
  margin-top: 16px;
}

.qs-activity-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) minmax(140px, .8fr) minmax(180px, 1fr) 108px;
  gap: 16px;
  align-items: center;
  min-height: 48px;
  padding: 9px 4px;
  color: var(--qt-text-soft);
  font-size: 11px;
  border-top: 1px solid var(--qt-line);
}

.qs-activity-row--head {
  min-height: 34px;
  color: var(--qt-muted);
  font: 700 9px/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  border-top: 0;
}

.qs-activity-kind {
  display: inline-block;
  min-width: 38px;
  margin-right: 8px;
  padding: 4px 5px;
  color: var(--qt-cyan);
  background: var(--qt-cyan-dim);
  border-radius: 4px;
  font-size: 8px;
  letter-spacing: .05em;
  text-align: center;
}

.qs-activity-detail {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* No permanent will-change here.
   This used to be `[data-qs-motion] { will-change: transform, opacity; }`,
   which pinned every panel to its own compositor layer for the whole session.
   A promoted layer whose layout offset is fractional — the returns calendar
   lands on y=136.15625 — has its text rasterized into the layer and then
   composited at a subpixel offset, which reads as permanently fuzzy type.
   will-change is a short-lived hint, so Motion applies it for the duration of
   the reveal and quantscope-motion.js clears the residual transform afterwards,
   dropping the layer and restoring normal subpixel antialiasing. */

.qs-hero [style*="font-size:clamp"] {
  color: var(--qt-text) !important;
  font-family: Inter, "Segoe UI", sans-serif !important;
  font-size: clamp(48px, 5vw, 76px) !important;
  font-weight: 650 !important;
  letter-spacing: -.045em !important;
  text-shadow: none !important;
}

.qs-overview-equity {
  margin-top: 16px !important;
  background: #0c1319 !important;
  border: 1px solid var(--qt-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--qt-shadow) !important;
}

.qs-insights {
  margin-top: 24px !important;
}

.qs-insights > :is(div,button):nth-child(n + 3),
.qs-card-grid > :is(div,button) {
  background: var(--qt-panel) !important;
  border: 1px solid var(--qt-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--qt-shadow) !important;
}

.qs-card-grid {
  margin-top: 16px !important;
  margin-bottom: 36px !important;
  gap: 14px !important;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
}

.qs-card-grid > :is(div,button) {
  transition: background-color 160ms ease, border-color 160ms ease !important;
}

.qs-card-grid > :is(div,button):hover {
  background: var(--qt-panel-hover) !important;
  border-color: var(--qt-line-strong) !important;
  transform: none !important;
}

/* Focus view: prioritize the wide analysis canvas shown in the review image. */
.qs-focus-shell {
  max-width: 1680px !important;
  margin-top: 24px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 44px !important;
  padding: 0 28px;
}

.qs-focus-picker {
  min-height: 48px;
  margin-bottom: 12px !important;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--qt-line);
}

.qs-focus-picker select {
  min-width: 260px !important;
}

.qs-focus-card {
  width: 100% !important;
  padding: 0 !important;
  color: var(--qt-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.qs-focus-card [style*="font-size:9px"] {
  font-size: 10.5px !important;
}

.qs-focus-card [style*="font-size:10px"] {
  font-size: 11.5px !important;
}

.qs-focus-card [style*="font-size:11px"] {
  font-size: 12px !important;
}

.qs-focus-card [style*="font-size:12px"] {
  font-size: 13px !important;
}

.qs-focus-card [style*="font-size:16px"] {
  font-size: 19px !important;
}

.qs-focus-card > [style*="border-bottom"],
.qs-focus-card > [style*="border-top"] {
  border-color: var(--qt-line-strong) !important;
}

.qs-focus-card [style*="background:oklch(13%"],
.qs-focus-card [style*="background:oklch(14%"],
.qs-focus-card [style*="background:oklch(15%"] {
  background: #080e13 !important;
}

.qs-focus-head {
  align-items: center !important;
  margin: 0 0 16px !important;
  padding: 24px 26px !important;
  background: var(--qt-panel);
  border: 1px solid var(--qt-line);
  border-radius: 10px;
  box-shadow: var(--qt-shadow);
}

.qs-focus-head [style*="font-size:22px"] {
  color: var(--qt-text) !important;
  font-size: 24px !important;
  letter-spacing: -.025em;
}

.qs-focus-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--qt-muted) !important;
}

.qs-data-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  color: #9be3ba;
  background: #112a20;
  border: 1px solid #285840;
  border-radius: 999px;
  font: 700 9px/1 Inter, "Segoe UI", sans-serif;
  letter-spacing: .07em;
}

.qs-focus-toolbar {
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  background: var(--qt-panel);
  border: 1px solid var(--qt-line);
  border-radius: 8px;
}

.qs-focus-toolbar > :is(div,button):first-child,
.qs-advanced-panel [style*="width:max-content"] {
  background: #080e13 !important;
  border-color: var(--qt-line) !important;
  border-radius: 6px !important;
}

.qs-performance-summary {
  gap: 0 !important;
  margin-bottom: 26px !important;
  padding: 0 !important;
  background: #080e13 !important;
  border-color: var(--qt-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--qt-shadow);
}

.qs-performance-summary > :is(div,button) {
  min-height: 118px;
  padding: 24px 26px;
}

.qs-performance-summary > :is(div,button) + :is(div,button) {
  border-left: 1px solid var(--qt-line);
}

.qs-performance-summary [style*="font-size:32px"] {
  font-size: 36px !important;
  font-weight: 650 !important;
  letter-spacing: -.04em;
}

.qs-chart-toolbar {
  justify-content: space-between;
  margin: 0 !important;
  padding: 16px 20px 12px;
  background: var(--qt-panel);
  border: 1px solid var(--qt-line);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.qs-chart-toolbar + :is(div,button) {
  margin: 0 !important;
  padding: 2px 20px 12px;
  color: var(--qt-muted) !important;
  background: var(--qt-panel);
  border-right: 1px solid var(--qt-line);
  border-left: 1px solid var(--qt-line);
}

.qs-performance-chart {
  height: 360px !important;
  margin: 0 !important;
  padding: 0 18px;
  background: var(--qt-panel);
  border-right: 1px solid var(--qt-line);
  border-left: 1px solid var(--qt-line);
}

.qs-performance-chart line[stroke^="oklch"] {
  stroke: #24313b;
}

.qs-performance-chart + :is(div,button) {
  margin: 0 !important;
  padding: 10px 18px 14px;
  color: var(--qt-muted) !important;
  background: var(--qt-panel);
  border: 1px solid var(--qt-line);
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

.qs-allocation-grid {
  gap: 16px !important;
  margin-top: 24px;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.qs-allocation-grid > :is(div,button) {
  background: var(--qt-panel) !important;
  border-color: var(--qt-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--qt-shadow);
}

.qs-advanced-toggle {
  min-height: 48px;
  margin-top: 20px;
  padding: 0 4px !important;
  color: var(--qt-text-soft);
  border-color: var(--qt-line) !important;
}

.qs-advanced-toggle:hover {
  color: var(--qt-cyan);
}

.qs-advanced-panel {
  padding: 22px 0 0;
}

.qs-section-kicker {
  color: var(--qt-text-soft) !important;
  font-weight: 700;
}

.qs-advanced-panel [style*="background:oklch(14%"] {
  background: #080e13 !important;
  border-color: var(--qt-line) !important;
  border-radius: 8px !important;
  box-shadow: none;
}

.qs-monthly-panel {
  margin-bottom: 24px;
  padding: 18px;
  background: var(--qt-panel);
  border: 1px solid var(--qt-line);
  border-radius: var(--qt-radius-md);
}

.qs-monthly-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(74px, 1fr));
  gap: 5px;
  margin-top: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

/* Returns calendar --------------------------------------------------------
   Day grid for the month in view, plus a twelve-cell strip for its year. Both
   heatmaps share the .qs-heat-* legend swatches above them. */

.qs-cal-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

.qs-cal-nav {
  display: flex;
  gap: 6px;
  align-items: center;
}

.qs-cal-step {
  min-width: 38px;
  min-height: 38px;
  padding: 0 10px;
  color: var(--qt-text-soft);
  background: var(--qt-panel-strong);
  border: 1px solid var(--qt-line);
  border-radius: var(--qt-radius-sm);
  font: 700 15px/1 "IBM Plex Mono", monospace;
  cursor: pointer;
  transition: background var(--qt-motion-fast) var(--qt-ease-out),
    border-color var(--qt-motion-fast) var(--qt-ease-out);
}

.qs-cal-step:hover {
  color: var(--qt-text);
  background: var(--qt-panel-hover);
  border-color: var(--qt-line-strong);
}

.qs-cal-title {
  min-width: 190px;
  padding: 0 8px;
  color: var(--qt-text);
  font: 700 16px/1 "IBM Plex Mono", monospace;
  letter-spacing: .09em;
  text-align: center;
}

.qs-cal-latest {
  min-height: 38px;
  padding: 10px 15px;
  color: var(--qt-cyan);
  background: transparent;
  border: 1px solid #315764;
  border-radius: var(--qt-radius-sm);
  font: 700 10.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .09em;
  cursor: pointer;
}

.qs-cal-latest:hover {
  background: var(--qt-cyan-dim);
}

.qs-cal-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.qs-cal-chip {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 14px;
  background: var(--qt-panel-strong);
  border: 1px solid var(--qt-line);
  border-radius: var(--qt-radius-sm);
}

.qs-cal-chip-label {
  color: var(--qt-muted);
  font: 700 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
}

.qs-cal-chip-value {
  font: 700 15px/1 "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* Seven readable columns need roughly 336px. Below that the grid scrolls inside
   its own track rather than clipping the return in every cell, which is what
   happened when the columns were simply allowed to compress. */
.qs-cal-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.qs-cal-weekdays,
.qs-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  min-width: 336px;
}

.qs-cal-weekdays {
  margin-top: 18px;
}

.qs-cal-weekday {
  padding-bottom: 5px;
  color: var(--qt-muted);
  font: 700 10.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .09em;
  text-align: center;
}

.qs-cal-grid {
  margin-top: 6px;
}

.qs-cal-day {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-height: 86px;
  padding: 10px 11px;
  color: var(--qt-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--qt-radius-sm);
  font: inherit;
  text-align: left;
  transition: border-color var(--qt-motion-fast) var(--qt-ease-out);
}

.qs-cal-day[aria-disabled="false"]:hover {
  border-color: var(--qt-line-strong);
}

.qs-cal-daynum {
  color: rgb(255 255 255 / 72%);
  font: 600 13px/1 "IBM Plex Mono", monospace;
}

/* Reserve the value row's height so empty weekend cells keep the same box as
   trading days and the grid rows stay flush. */
.qs-cal-dayvalue {
  min-height: 15px;
  font: 700 15px/1 "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.qs-cal-detail {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--qt-panel-strong);
  border: 1px solid #315764;
  border-radius: var(--qt-radius-md);
}

.qs-cal-detail-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--qt-line);
}

.qs-cal-detail-title {
  color: var(--qt-text);
  font: 700 13px/1.3 "IBM Plex Mono", monospace;
  letter-spacing: .07em;
}

.qs-cal-detail-close {
  min-height: 30px;
  padding: 8px 12px;
  color: var(--qt-muted);
  background: transparent;
  border: 1px solid var(--qt-line);
  border-radius: var(--qt-radius-sm);
  font: 700 9.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .09em;
  cursor: pointer;
}

.qs-cal-detail-close:hover {
  color: var(--qt-text);
  border-color: var(--qt-line-strong);
}

.qs-cal-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 18px;
  margin-top: 15px;
}

.qs-cal-metric-label {
  color: var(--qt-muted);
  font: 700 9.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
}

.qs-cal-metric-value {
  margin-top: 7px;
  font: 700 19px/1 "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.qs-cal-metric-note {
  margin-top: 5px;
  color: var(--qt-faint);
  font-size: 11px;
  line-height: 1.35;
}

.qs-cal-hint {
  margin-top: 16px;
  padding: 13px 16px;
  color: var(--qt-muted);
  background: var(--qt-panel-strong);
  border: 1px solid var(--qt-line);
  border-radius: var(--qt-radius-md);
  font-size: 12px;
  line-height: 1.45;
}

.qs-cal-yearhead {
  margin-top: 20px;
  color: var(--qt-muted);
  font: 700 10.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .1em;
}

.qs-cal-year {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.qs-cal-monthbtn {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-start;
  padding: 11px 10px;
  color: var(--qt-text);
  background: transparent;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: var(--qt-radius-sm);
  text-align: left;
  cursor: pointer;
}

.qs-cal-monthbtn:hover {
  border-color: var(--qt-line-strong);
}

.qs-cal-monthname {
  color: rgb(255 255 255 / 68%);
  font: 700 10.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .06em;
}

.qs-cal-monthvalue {
  font: 700 12.5px/1 "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.qs-month-cell {
  min-width: 74px;
  min-height: 72px;
  padding: 10px;
  color: var(--qt-text);
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: var(--qt-radius-sm);
}

.qs-month-label {
  font: 700 9px/1.2 "IBM Plex Mono", monospace;
  letter-spacing: .05em;
}

.qs-month-label :is(span,button) {
  color: rgb(255 255 255 / 58%);
  font-weight: 500;
}

.qs-month-value {
  margin-top: 18px;
  font: 700 12px/1 "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.qs-heat-legend {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--qt-muted);
  font: 700 8px/1 "IBM Plex Mono", monospace;
  letter-spacing: .06em;
}

.qs-heat-legend i {
  width: 22px;
  height: 8px;
  border: 1px solid rgb(255 255 255 / 8%);
}

.qs-heat-negative {
  background: rgb(139 45 52 / 72%);
}

.qs-heat-neutral {
  background: var(--qt-panel-strong);
}

.qs-heat-positive {
  background: rgb(38 112 75 / 72%);
}

.qs-focus-card svg {
  overflow: visible;
}

.qs-positions-table {
  overflow-x: auto;
  border-top: 1px solid var(--qt-line);
}

.qs-positions-table > :is(div,button) {
  min-height: 42px;
  border-color: var(--qt-line) !important;
}

.qs-detail-panel {
  color: var(--qt-text) !important;
  background: #0c1319 !important;
  border-left: 1px solid var(--qt-line-strong) !important;
  box-shadow: -20px 0 60px rgb(0 0 0 / 35%) !important;
}

/* Backtester */
.qs-bt-shell {
  width: auto !important;
  max-width: none !important;
  margin: 22px 28px 42px !important;
}

.qs-bt-panel,
.qs-bt-folds {
  color: var(--qt-text) !important;
  background: var(--qt-panel) !important;
  border-color: var(--qt-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--qt-shadow) !important;
}

.qs-bt-input {
  color: var(--qt-text) !important;
  background: #080e13 !important;
  border-color: var(--qt-line-strong) !important;
}

.qs-bt-code {
  min-height: 390px !important;
  color: #d8e5ec !important;
  background: #071018 !important;
  line-height: 1.65 !important;
}

.qs-bt-run {
  color: #061015 !important;
  background: var(--qt-cyan) !important;
  border-color: var(--qt-cyan) !important;
  border-radius: 6px !important;
}

.qs-bt-fold-row {
  border-color: var(--qt-line) !important;
}

/* Settings */
.qs-settings-overlay {
  background: rgb(2 5 8 / 82%) !important;
  backdrop-filter: blur(3px);
}

.qs-settings-shell {
  color: var(--qt-text) !important;
  background: #0c1319 !important;
  border: 1px solid var(--qt-line-strong) !important;
  border-radius: 12px !important;
  box-shadow: 0 30px 90px rgb(0 0 0 / 55%) !important;
}

.qs-settings-nav {
  background: #091016 !important;
  border-color: var(--qt-line) !important;
}

.qs-settings-main {
  background: #0c1319 !important;
}

.qs-setting-row {
  background: var(--qt-panel) !important;
  border-color: var(--qt-line) !important;
}

/* -------------------------------------------------------------------------- */
/* Public site and account flows                                              */
/* -------------------------------------------------------------------------- */

.qs-public-root {
  min-height: 100vh;
  color: var(--qt-text) !important;
  background: var(--qt-bg) !important;
  font-family: "IBM Plex Sans", Arial, sans-serif !important;
}

.qs-public-root [style*="radial-gradient(ellipse"],
.qs-public-root [style*="top:-180px"][style*="pointer-events:none"],
.qs-public-root [style*="top: -180px"][style*="pointer-events: none"] {
  display: none !important;
}

.qs-public-nav {
  min-height: 68px;
  padding: 0 30px !important;
  color: var(--qt-text) !important;
  background: rgb(7 11 15 / 94%) !important;
  border-bottom: 1px solid var(--qt-line) !important;
  backdrop-filter: blur(14px) !important;
}

.qs-public-brand > :is(div,button) {
  color: var(--qt-text) !important;
  font-size: 17px !important;
}

.qs-public-links a,
.qs-public-links > :is(div,button) {
  color: var(--qt-text-soft) !important;
  text-decoration: none;
}

.qs-public-links a:hover,
.qs-public-links > :is(div,button):hover {
  color: var(--qt-text) !important;
}

.qs-public-links .qs-nav-cta {
  color: #061015 !important;
  background: var(--qt-cyan) !important;
  border: 1px solid var(--qt-cyan) !important;
  border-radius: 6px !important;
}

.qs-hero-layout {
  display: grid;
  grid-template-columns: minmax(420px, .85fr) minmax(620px, 1.15fr);
  gap: clamp(42px, 5vw, 90px);
  align-items: center;
  width: min(1680px, calc(100% - 64px));
  margin: 0 auto;
  padding: clamp(78px, 8vw, 128px) 0 80px;
}

.qs-public-hero {
  max-width: 720px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.qs-public-badge {
  margin-bottom: 24px !important;
  padding: 0 !important;
  color: var(--qt-cyan) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font: 600 11px "IBM Plex Mono", monospace !important;
  letter-spacing: .12em;
}

.qs-public-badge > :is(div,button) {
  width: 22px !important;
  height: 2px !important;
  background: var(--qt-cyan) !important;
  border-radius: 0 !important;
}

.qs-public-title {
  margin-bottom: 24px !important;
  color: var(--qt-text) !important;
  font-family: Inter, "Segoe UI", sans-serif !important;
  font-size: clamp(56px, 6vw, 92px) !important;
  font-weight: 650 !important;
  line-height: .94 !important;
  letter-spacing: -.06em !important;
}

.qs-public-copy {
  max-width: 650px !important;
  margin: 0 0 32px !important;
  color: var(--qt-text-soft) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

.qs-public-actions {
  justify-content: flex-start !important;
  gap: 10px !important;
}

.qs-public-actions > :is(div,button) {
  min-height: 46px;
  padding: 13px 20px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.qs-public-actions > :is(div,button):first-child {
  color: #061015 !important;
  background: var(--qt-cyan) !important;
  border: 1px solid var(--qt-cyan) !important;
}

.qs-public-actions > :is(div,button):last-child {
  color: var(--qt-text) !important;
  background: transparent !important;
  border: 1px solid var(--qt-line-strong) !important;
}

.qs-public-trust {
  color: var(--qt-muted) !important;
  font: 500 11px "IBM Plex Mono", monospace !important;
}

.qs-public-hero-visual {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.qs-public-hero-visual > :is(div,button) {
  padding: 22px 24px 16px !important;
  color: var(--qt-text) !important;
  background: #0b1218 !important;
  border: 1px solid var(--qt-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: var(--qt-shadow) !important;
}

.qs-public-chart-head [style*="font-size:40px"] {
  color: var(--qt-text) !important;
}

.qs-public-ranges {
  background: #080d12 !important;
  border-color: var(--qt-line) !important;
  border-radius: 6px !important;
}

.qs-public-section {
  max-width: 1480px !important;
}

.qs-public-section > :is(div,button)[style*="max-width:960px"] > :is(div,button) {
  background: var(--qt-panel) !important;
  border-color: var(--qt-line) !important;
  border-radius: 8px !important;
  box-shadow: none;
}

.qs-public-section > :is(div,button)[style*="max-width:960px"] > :is(div,button) > :is(div,button):last-child {
  color: var(--qt-text-soft) !important;
}

.qs-public-section [style*="font-size:40px"],
.qs-public-section [style*="font-size:38px"],
.qs-public-cta [style*="font-size:38px"] {
  color: var(--qt-text) !important;
  font-family: Inter, "Segoe UI", sans-serif !important;
  letter-spacing: -.035em !important;
}

.qs-eyebrow,
.qs-public-section [style*="letter-spacing:0.14em"] {
  color: var(--qt-cyan) !important;
}

#product-demo > :is(div,button):nth-child(2),
.qs-mode-grid,
.qs-analytics-shell,
.qs-terminal,
.qs-proof-list > :is(div,button),
#security > :is(div,button) {
  background: var(--qt-panel) !important;
  border-color: var(--qt-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--qt-shadow) !important;
}

.qs-mode-card,
.qs-analytics-head,
.qs-code-report > :is(div,button),
.qs-terminal [style*="background:oklch"] {
  background: var(--qt-panel) !important;
  border-color: var(--qt-line) !important;
}

.qs-mode-card:hover {
  background: var(--qt-panel-hover) !important;
}

.qs-public-cta > :is(div,button) {
  color: var(--qt-text) !important;
  background: var(--qt-panel-strong) !important;
  border: 1px solid var(--qt-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: var(--qt-shadow) !important;
}

.qs-public-footer {
  color: var(--qt-muted) !important;
  border-color: var(--qt-line) !important;
}

.qs-auth-screen,
.qs-pricing,
.qs-checkout,
.qs-connect {
  color: var(--qt-text) !important;
  background: var(--qt-bg) !important;
}

.qs-auth-card,
.qs-checkout-body,
.qs-connect-grid > :is(div,button),
.qs-pricing > :is(div,button) [style*="background:oklch(1"] {
  color: var(--qt-text) !important;
  background: var(--qt-panel) !important;
  border-color: var(--qt-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: var(--qt-shadow) !important;
}

.qs-auth-card input,
.qs-auth-card select,
.qs-checkout input,
.qs-connect input,
.qs-pricing input {
  min-height: 44px;
  color: var(--qt-text) !important;
  background: #080e13 !important;
  border: 1px solid var(--qt-line-strong) !important;
  border-radius: 6px !important;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
  .qs-hero-layout {
    grid-template-columns: 1fr;
    width: min(820px, calc(100% - 48px));
  }

  .qs-public-hero {
    max-width: 720px !important;
  }
}

@media (max-width: 760px) {
  /* overflow-x:hidden on BOTH html and body promotes body to the scroll
     container: window.scrollY sticks at 0, window scroll events never fire,
     documentElement.scrollHeight collapses to one viewport, and smooth scrolling
     on html stops applying. Constrain body only and let the viewport scroll. */
  html,
  body,
  .qs-public-root {
    width: 100%;
    max-width: 100%;
  }

  body,
  .qs-public-root {
    overflow-x: hidden;
  }

  :is(div,button)[style*="--panel-pad:"] {
    font-size: 13px;
  }

  .qs-topbar {
    min-height: 58px;
    padding: 8px 10px !important;
  }

  .qs-pulse {
    padding: 0 10px !important;
  }

  .qs-dashboard-switch {
    overflow-x: auto;
    padding: 10px 12px 0 !important;
  }

  .qs-dashboard-switch > :is(div,button) {
    width: max-content;
  }

  .qs-dashboard-switch > :is(div,button) > :is(div,button),
  .qs-dashboard-switch > :is(div,button) > button {
    min-width: 100px;
    padding: 9px 12px !important;
  }

  .qs-hero,
  .qs-intelligence,
  .qs-overview-equity,
  .qs-insights,
  .qs-card-grid {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .qs-hero {
    margin-top: 16px !important;
    padding: 20px !important;
  }

  .qs-intelligence {
    margin-top: 16px !important;
  }

  .qs-section-head {
    align-items: flex-end;
  }

  .qs-section-source {
    max-width: 150px;
    font-size: 8px;
  }

  .qs-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qs-kpi {
    min-height: 108px;
    padding: 17px;
  }

  .qs-kpi + .qs-kpi {
    border-left: 0;
  }

  .qs-kpi:nth-child(even) {
    border-left: 1px solid var(--qt-line);
  }

  .qs-kpi:nth-child(n + 3) {
    border-top: 1px solid var(--qt-line);
  }

  .qs-kpi-value {
    font-size: 20px;
  }

  .qs-kpi-value--text {
    font-size: 18px;
  }

  .qs-kpi-meta {
    white-space: normal;
  }

  .qs-intelligence-grid {
    grid-template-columns: 1fr;
  }

  .qs-intelligence-card--wide {
    grid-column: auto;
  }

  .qs-activity-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .qs-activity-row {
    min-width: 710px;
  }

  .qs-card-grid {
    grid-template-columns: 1fr !important;
  }

  .qs-focus-shell {
    margin: 18px 12px 28px !important;
    padding: 0 !important;
  }

  :is(div,button).qs-focus-card {
    padding: 0 !important;
  }

  .qs-focus-head {
    align-items: flex-start !important;
    padding: 18px !important;
  }

  .qs-focus-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .qs-focus-toolbar {
    align-items: stretch !important;
    flex-direction: column;
  }

  .qs-focus-toolbar > :is(div,button) {
    width: 100%;
  }

  .qs-focus-toolbar > :is(div,button):last-child {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .qs-focus-toolbar select {
    width: 100%;
  }

  .qs-performance-summary {
    grid-template-columns: 1fr !important;
  }

  .qs-performance-summary > :is(div,button) {
    min-height: 96px;
    padding: 20px;
  }

  .qs-performance-summary > :is(div,button) + :is(div,button) {
    border-top: 1px solid var(--qt-line);
    border-left: 0;
  }

  .qs-chart-toolbar {
    align-items: flex-start !important;
    flex-direction: column;
    padding: 14px 14px 10px;
  }

  .qs-performance-chart {
    height: 230px !important;
    padding: 0 10px;
  }

  .qs-allocation-grid {
    grid-template-columns: 1fr !important;
  }

  .qs-monthly-panel {
    padding: 12px;
  }

  .qs-monthly-panel .qs-card-head {
    flex-direction: column;
  }

  /* Twelve month buttons across a phone leaves ~24px each. Wrap to two rows
     and shrink the day cells so the seven-column grid still fits. */
  .qs-cal-year {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  /* frontend-qa.css floors every .qs-focus-shell button at 44px for touch, so
     the day cells cannot go below that anyway — size them for legibility. */
  .qs-cal-day {
    gap: 6px;
    min-height: 58px;
    padding: 6px 4px;
  }

  .qs-cal-daynum {
    font-size: 11px;
  }

  .qs-cal-dayvalue {
    min-height: 11px;
    font-size: 9.5px;
    letter-spacing: -.03em;
  }

  .qs-cal-weekdays,
  .qs-cal-grid {
    gap: 4px;
  }

  .qs-cal-monthbtn {
    padding: 9px 7px;
  }

  .qs-cal-monthvalue {
    font-size: 11px;
    letter-spacing: -.03em;
  }

  .qs-cal-weekday {
    font-size: 9px;
    letter-spacing: .02em;
  }

  .qs-cal-title {
    min-width: 0;
    flex: 1;
    font-size: 14px;
  }

  .qs-cal-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The title plus four arrows plus LATEST cannot share one 375px row, so the
     nav takes the row and LATEST tucks against the right edge below it. */
  .qs-cal-nav {
    flex: 1 1 100%;
  }

  .qs-cal-latest {
    margin-left: auto;
  }

  .qs-bt-shell {
    margin: 16px 12px 28px !important;
  }

  .qs-public-root .qs-public-nav {
    min-height: 58px;
    padding: 0 16px !important;
  }

  .qs-public-root .qs-public-links {
    position: absolute;
    right: 16px;
  }

  /* The section anchors collapse on small screens, but "Log in" must not: it was
     the only route into an existing account and there is no menu to fall back
     on, so signed-up users had no way in from a phone. */
  .qs-public-root .qs-public-links > * {
    display: none !important;
  }

  .qs-public-root .qs-public-links .qs-nav-cta,
  .qs-public-root .qs-public-links .qs-nav-login {
    display: block !important;
    padding: 8px 10px !important;
  }

  .qs-public-root .qs-public-links .qs-nav-login {
    min-height: 36px;
    padding: 9px 8px !important;
    color: var(--qt-text) !important;
    font-size: 13px !important;
    line-height: 18px;
  }

  .qs-public-root .qs-public-brand > :is(div,button) {
    display: block !important;
    color: var(--qt-text) !important;
    font-size: 15px !important;
  }

  .qs-public-root .qs-public-links {
    display: flex !important;
    width: auto !important;
  }

  .qs-public-root .qs-hero-layout {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    gap: 28px;
    padding: 62px 0 44px;
  }

  .qs-public-root .qs-hero-layout > *,
  .qs-public-root .qs-public-hero > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .qs-public-root .qs-public-hero {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .qs-public-root .qs-public-title {
    width: 100%;
    font-size: clamp(38px, 10.5vw, 42px) !important;
    line-height: .98 !important;
    overflow-wrap: normal;
  }

  /* Hiding the <br> ran the two sentences together with no separator at all —
     "Every account.One clear picture." Keep the break; at this clamp both lines
     fit a 390px viewport comfortably. */
  .qs-public-root .qs-public-title br {
    display: initial;
  }

  .qs-public-root .qs-public-copy {
    width: 100%;
    max-width: 100% !important;
    font-size: 16px !important;
    overflow-wrap: anywhere;
  }

  .qs-public-root .qs-public-actions {
    width: 100%;
    flex-direction: column;
  }

  .qs-public-root .qs-public-actions > :is(div,button) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .qs-public-root .qs-public-trust {
    max-width: 320px;
    white-space: normal !important;
    line-height: 1.5;
  }

  .qs-public-root .qs-public-hero-visual,
  .qs-public-root .qs-public-hero-visual > :is(div,button) {
    width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    overflow: hidden;
  }

  .qs-public-root .qs-public-hero-visual {
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .qs-public-root .qs-public-hero-visual > :is(div,button) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 16px 14px !important;
  }

  .qs-public-root .qs-public-chart-head [style*="font-size:40px"] {
    font-size: clamp(24px, 8vw, 30px) !important;
    letter-spacing: -.035em !important;
    overflow-wrap: anywhere;
  }

  .qs-public-root .qs-public-ranges {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100% !important;
    max-width: 100% !important;
  }

  .qs-public-root .qs-public-ranges > :is(div,button) {
    min-width: 0 !important;
    padding: 6px 0 !important;
    font-size: 9px !important;
    text-align: center;
  }
}

/* Grid children stretch to the tallest sibling by default, so the Concentration
   Watch note and the backtester's empty-report placeholder were padded out with
   a large block of dead space below their content. Let them size to content. */
.qs-public-root [style*="oklch(74% 0.15 60 / 0.08)"],
.qs-bt-panel[style*="min-height:520px"] {
  align-self: start;
}

.qs-bt-panel[style*="min-height:520px"] {
  min-height: 340px !important;
}

/* The public header is sticky at 68px, so fragment navigation parked each
   section flush with the viewport top and hid its eyebrow line behind the bar. */
#qs-main,
#product-demo,
#platform,
#backtester,
#analytics,
#features,
#security {
  scroll-margin-top: 84px;
}

/* The skip link needs a focusable target or activating it scrolls without
   moving focus, sending the next Tab back into the nav it just skipped. */
#qs-main:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body .qs-public-root *,
  body .qs-public-root *::before,
  body .qs-public-root *::after,
  body :is(div,button)[style*="--panel-pad"] *,
  body :is(div,button)[style*="--panel-pad"] *::before,
  body :is(div,button)[style*="--panel-pad"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}