@font-face {
  font-family: "Voyager Geist";
  src: url("/landing/voyager/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
html:root {
  --font-geist-sans: "Voyager Geist";
  --font-sans: "Voyager Geist", system-ui, sans-serif;
}
html:root,
html:root body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: auto;
  font-family: "Voyager Geist", system-ui, sans-serif;
  font-feature-settings: "ss01", "ss02", "cv01";
}
.demo-app {
  height: 100dvh;
  display: flex;
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
}
.demo-sidebar {
  flex-shrink: 0;
  height: 100%;
}
/* Center the collapsed rail's artwork, toggle and hit areas on one axis.
   The expanded rail retains Voyager's original dimensions and label spacing. */
.demo-sidebar .sidebar-content[data-collapsed="true"] .sidebar-brand {
  width: 100%;
  margin-left: 0;
  justify-content: center;
}
.demo-sidebar .sidebar-content[data-collapsed="true"] .sidebar-toggle {
  left: calc(50% - 16px);
  right: auto;
}
.demo-sidebar .sidebar-content[data-collapsed="true"] .sidebar-nav-link {
  padding-right: 0;
}
.demo-sidebar .sidebar-content[data-collapsed="true"] .sidebar-icon-slot {
  flex-basis: 100%;
}
.demo-sidebar .sidebar-content[data-collapsed="true"] .sidebar-label {
  display: none;
}
.demo-main {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.demo-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.demo-app[data-tour] .demo-content { animation: product-tour-enter 450ms cubic-bezier(.22, 1, .36, 1) both; }
.demo-app[data-tour="create"] .create-trader-intro { animation: product-tour-enter 450ms ease-out both; }
@keyframes product-tour-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .demo-app[data-tour] .demo-content, .demo-app[data-tour="create"] .create-trader-intro { animation: none; }
}
.demo-profile-chart .trader-chart {
  min-height: 0;
}
/* Only the row's arrow buttons move its cards. Hidden overflow blocks native
   horizontal scrolling while preserving the buttons' programmatic scrollBy. */
.demo-content .discover-trader-rail {
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}

.demo-content[data-discover="true"] {
  padding-top: 32px;
}
@media (min-width: 768px) {
  .demo-content[data-discover="true"] {
    padding-top: 40px;
  }
}

.demo-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

@font-face { font-family: "Trader Inter"; src: url("/landing/voyager/inter-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Trader Inter"; src: url("/landing/voyager/inter-medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
.demo-content[data-create="true"] { display: flex; flex-direction: column; padding: 32px 20px 40px; }
@media (min-width: 768px) { .demo-content[data-create="true"] { padding: 40px; } }

/* Profile content scrolls vertically within the device; trader rails stay
   arrow-driven. These use the deployed Voyager profile grid and tokens. */
.demo-content[data-profile="true"] { overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; }
.demo-trader-profile { min-height:100%; --profile-header-height:0px; --profile-actions-height:0px; }
.demo-trader-profile .trader-profile-header { position:relative; top:auto; }
.demo-trader-profile .trader-feed-tabs { top:0; }
.demo-profile-topbar { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:56px; padding:8px 24px; border-bottom:1px solid var(--border); }
.demo-profile-topbar>div:first-child { display:flex; align-items:center; gap:12px; }
.demo-profile-status { display:flex; align-items:center; gap:8px; color:var(--muted-foreground); font-size:12px; }
.demo-profile-status i { width:6px; height:6px; border-radius:50%; background:var(--gain); }
.demo-profile-byline { display:flex; align-items:center; gap:8px; margin-top:5px; font-size:14px; }
.demo-profile-byline>span:first-child { color:var(--muted-foreground); }
.demo-creator-avatar { display:grid; place-items:center; flex-shrink:0; width:22px; height:22px; overflow:hidden; border-radius:50%; background:var(--muted); font-size:10px; color:var(--muted-foreground); }
.demo-creator-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.demo-brokerage { width:224px; }
.demo-section-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.demo-section-title h2 { font-size:20px; font-weight:500; letter-spacing:-.4px; }
.demo-section-title>span { font-size:14px; color:var(--muted-foreground); white-space:nowrap; }
.demo-allocation-label { display:flex; justify-content:space-between; margin-top:24px; font-size:14px; }
.demo-allocation-label>span:first-child { color:var(--muted-foreground); }
.demo-allocation { height:6px; margin-top:8px; border-radius:6px; background:var(--muted); overflow:hidden; }
.demo-allocation>div { height:100%; border-radius:inherit; background:var(--foreground); opacity:.7; }
.demo-holdings,.demo-universe { list-style:none; margin:16px -8px 0; padding:0; }
.demo-row-main { display:flex; flex-direction:column; flex:1; min-width:0; gap:4px; font-size:14px; }
.demo-row-main b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.demo-row-value { display:flex; flex-direction:column; gap:4px; flex-shrink:0; font-size:14px; text-align:right; font-variant-numeric:tabular-nums; }
.demo-row-main small,.demo-row-value small { font-size:12px; color:var(--muted-foreground); }
.demo-row-value small.text-gain { color:var(--gain); } .demo-row-value small.text-loss { color:var(--loss); }
.demo-cash { display:flex; align-items:center; gap:12px; padding:12px 8px; }
.demo-cash-icon { display:grid; place-items:center; width:32px; height:32px; background:var(--muted); border-radius:50%; }
.demo-note { margin-top:16px; font-size:12px; line-height:1.6; color:var(--muted-foreground); }
.demo-universe .trader-holding-row { padding-block:16px; border-bottom:1px solid var(--border); }
.demo-stat-list { display:flex; flex-direction:column; gap:20px; margin-top:20px; font-size:14px; }
.demo-stat-list dt { color:var(--muted-foreground); } .demo-stat-list dd { margin-top:4px; font-size:16px; font-variant-numeric:tabular-nums; }
.demo-run-list { display:flex; flex-direction:column; gap:16px; margin-top:24px; }
.demo-decision { padding-block:12px; border-bottom:1px solid var(--border); }
.demo-decision h3 { font-size:15px; font-weight:500; } .demo-decision h3 span { margin-left:8px; font-size:12px; color:var(--muted-foreground); }
.demo-decision p { margin-top:10px; font-size:14px; line-height:1.7; color:var(--muted-foreground); overflow-wrap:anywhere; }
.demo-trade { display:flex; align-items:center; gap:12px; font-size:14px; } .demo-trade b { margin-left:auto; font-weight:500; }
.demo-stock-detail { display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:14px; } .demo-stock-detail dt { color:var(--muted-foreground); } .demo-stock-detail dd { text-align:right; }
@media(max-width:639px) { .demo-profile-topbar { padding:8px 12px; } .demo-profile-status { font-size:11px; } .demo-profile-topbar>div:first-child { gap:4px; } .demo-brokerage { width:100%; } }