/* ===== Pelositracker · Liquid Glass token system ===== */
:root {
  --pli-deepest:   #0A0C10;  /* container floor */
  --pli-surface:   #161B22;
  --pli-elevated:  #1A1F26;
  --pli-hairline:  #30363D;
  --pli-muted:     #8B949E;
  --pli-secondary: #C9D1D9;
  --pli-primary:   #E6E8EB;
  --pli-amber:     #D4A574;  /* the only signal color in the system */

  --pli-curve: cubic-bezier(0.32, 0.72, 0, 1);   /* iOS smooth-out */
  --pli-hover-ms: 160ms;
  --pli-state-ms: 220ms;
}

/* ===== Reset / base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
*, *::before, *::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-feature-settings: "ss01", "kern";
  letter-spacing: -0.01em;
  background: #000;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
}
button, input, select, textarea, .window-body {
  font-family: "Satoshi", -apple-system, sans-serif;
}
body {
  perspective: 1500px;
  perspective-origin: 50% 50%;
}
button { font-family: inherit; }

/* ===== Background (parallax + hover blur) ===== */
.background-wrap {
  position: fixed;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transform-style: preserve-3d;
  /* Parallax transform now lives on the wrap so BOTH inner layers (.background
     and .background-lift) ride it together as a single plane. */
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter   0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, filter;
}
.background {
  position: absolute;
  inset: 0;
  background-image: url("background.jpg");
  background-size: cover;
  background-position: center;
  /* Default exposure: -10% brightness */
  filter: brightness(0.9);
}
.background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* ===== Cursor reveal — alternate-image glow =====
   A second image (the orange-jumpsuit variant) lives behind a soft circular
   mask that follows the cursor. Where the cursor is over the figure, the
   orange suit faintly bleeds through; where it's over the gray wall, both
   images match so nothing shows. Hidden when the cursor is over an icon /
   dock button / open popup so the effect doesn't fight the UI. */
.background-lift {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("background-alt.jpg");
  background-size: cover;
  background-position: center;
  filter: brightness(0.9);   /* match base exposure */
  /* Flat 100% plateau out to 30% radius (≈3× larger 100% area), then the same
     smooth ease-out falloff in the remaining 70% — original stops 0/12/25/45/
     70/88 mapped to 30/38/47/61/79/91 of total radius. */
  -webkit-mask-image: radial-gradient(
    circle 390px at var(--mx, 50%) var(--my, 50%),
    rgba(0, 0, 0, 1)    0%,
    rgba(0, 0, 0, 1)    30%,
    rgba(0, 0, 0, 0.82) 38%,
    rgba(0, 0, 0, 0.55) 47%,
    rgba(0, 0, 0, 0.30) 61%,
    rgba(0, 0, 0, 0.12) 79%,
    rgba(0, 0, 0, 0.04) 91%,
    rgba(0, 0, 0, 0)   100%
  );
          mask-image: radial-gradient(
    circle 390px at var(--mx, 50%) var(--my, 50%),
    rgba(0, 0, 0, 1)    0%,
    rgba(0, 0, 0, 1)    30%,
    rgba(0, 0, 0, 0.82) 38%,
    rgba(0, 0, 0, 0.55) 47%,
    rgba(0, 0, 0, 0.30) 61%,
    rgba(0, 0, 0, 0.12) 79%,
    rgba(0, 0, 0, 0.04) 91%,
    rgba(0, 0, 0, 0)   100%
  );
  opacity: 1;
  transition: opacity 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform, mask-image, -webkit-mask-image, opacity;
}
/* --- TEMPORARILY DISABLED: jumpsuit reveal effect ---
   Remove this rule to re-enable the hover/tap reveal. */
.background-lift { display: none; }

/* Suppress the reveal when the cursor is engaged with UI surfaces */
body:has(.project-icon:hover, .dock-btn:hover) .background-lift,
body:has(.window:not([hidden])) .background-lift {
  opacity: 0;
}


body:has(.project-icon:hover, .dock-btn:hover) .background-wrap {
  filter: blur(5.25px);
}
body:has(.project-icon:hover) .project-icon:not(:hover) {
  filter: blur(2px);
  opacity: 0.55;
  transition: filter 0.45s ease, opacity 0.45s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================================================
   GRAIN — true B&W, multiply only (never brightens),
   finer pattern, slow motion.
===================================================== */
/* Film grain — single overlay layer, animates background-position so the
   element itself never moves (no edge artifacts). Grayscale noise via
   feColorMatrix saturate 0 ensures both light AND dark grains, so overlay
   blend nets to ~0 brightness change but still reads as visible texture. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.7;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2' stitchTiles='stitch' seed='5'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  background-repeat: repeat;
  animation: grainShift 2.6s steps(4) infinite;
}
@media (min-resolution: 2dppx) {
  .grain { opacity: 0.85; }
}
@keyframes grainShift {
  0%   { background-position:   0px   0px; }
  25%  { background-position:  12px  -8px; }
  50%  { background-position: -10px  14px; }
  75%  { background-position:  15px   6px; }
  100% { background-position:   0px   0px; }
}

/* ===== Canvas ===== */
.canvas {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 2;
}

/* ===== Top-left Widgets =====
   Layout: brand bar (top) → two squares (middle) → CTA bar (bottom).
   Glass matched to dock intensity. pointer-events: none on the group
   so icons underneath remain clickable; each widget re-enables. */
.widgets-group {
  position: absolute;
  top: 100px;
  left: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
  pointer-events: none;
  animation: widgetsFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.15s;
}
@keyframes widgetsFadeIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.widget {
  border-radius: 16px;
  background: rgba(115, 118, 124, 0.38);
  backdrop-filter: blur(60px) saturate(200%) brightness(1.3);
  -webkit-backdrop-filter: blur(60px) saturate(200%) brightness(1.3);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    inset 0 0 0 0.5px rgba(255,255,255,0.10),
    0 16px 40px rgba(0,0,0,0.40),
    0 4px 12px rgba(0,0,0,0.25);
  color: #f5f5f7;
  overflow: hidden;
  pointer-events: auto;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.28s ease;
}

/* --- Squares row --- */
.widgets-row {
  display: flex;
  gap: 6px;
}

/* --- Performance square --- */
.widget-perf {
  width: 126px;
  height: 126px;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 8px;
  cursor: pointer;
  background:
    linear-gradient(165deg, rgba(74,222,128,0.08) 0%, rgba(74,222,128,0) 50%),
    rgba(115, 118, 124, 0.38);
}
.widget-perf:hover,
.widget-aum:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 22px 50px rgba(0,0,0,0.48),
    0 6px 16px rgba(0,0,0,0.30);
}
.widget-perf-label {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.40);
  margin-bottom: 4px;
}
.widget-perf-value {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #4ade80;
  line-height: 1;
  margin-bottom: 4px;
}
.widget-perf-chart {
  width: 100%;
  flex: 1;
  min-height: 0;
}
.widget-perf-chart {
  position: relative;
}
.widget-perf-chart svg {
  width: 100%;
  height: 100%;
  display: block;
}
.widget-perf-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(50%, 50%);
  opacity: 0.9;
  pointer-events: none;
}

/* --- AUM square --- */
.widget-aum {
  width: 126px;
  height: 126px;
  display: flex;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  background:
    linear-gradient(165deg, rgba(74,222,128,0.08) 0%, rgba(74,222,128,0) 50%),
    rgba(115, 118, 124, 0.38);
}
.widget-aum-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.widget-aum-label {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.40);
}
.widget-aum-badge {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #4ade80;
  background: rgba(74,222,128,0.12);
  padding: 2px 5px 2px 4px;
  border-radius: 4px;
  border: 0.5px solid rgba(74,222,128,0.18);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 3px;
}
.widget-aum-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  animation: aumPulse 2s ease-in-out infinite;
}
@keyframes aumPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.widget-aum-value {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #4ade80;
  line-height: 1;
}
.widget-aum-sub {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.01em;
}

/* --- CTA bar (bottom) --- */
.widget-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.widget-cta:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 22px 50px rgba(0,0,0,0.48),
    0 6px 16px rgba(0,0,0,0.30);
}
.widget-cta-logo {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.30);
}
.widget-cta-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.widget-cta-title {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.005em;
}
.widget-cta-sub {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
}
.widget-cta-arrow {
  font-size: 14px;
  color: rgba(255,255,255,0.30);
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}
.widget-cta:hover .widget-cta-arrow {
  transform: translateX(2px);
  color: rgba(255,255,255,0.60);
}

/* --- Mobile --- */
@media (max-width: 600px) {
  .watermark-logo { top: 14px; left: 14px; font-size: 36px; }
  .widgets-group { top: 68px; left: 12px; gap: 5px; }
  .widgets-row { gap: 5px; }
  .widget-perf, .widget-aum { width: 108px; height: 108px; padding: 11px; }
  .widget-perf-value { font-size: 22px; }
  .widget-aum-value { font-size: 20px; }
  .widget-cta { padding: 8px 12px; }
  .widget-cta-logo { width: 26px; height: 26px; }
  .widget-cta-title { font-size: 11px; }
}

/* ===== Floating icons ===== */
.project-icon {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  text-decoration: none;
  color: inherit;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), filter 0.45s ease, opacity 0.45s ease;
  -webkit-tap-highlight-color: transparent;
}
.project-icon:hover {
  transform: translate(-50%, calc(-50% - 5px)) scale(1.06);
  z-index: 5;
}
.project-icon:active {
  transform: translate(-50%, -50%) scale(0.97);
}
.project-icon:focus-visible { outline: none; }

/* ===== Icon material — CSS-driven Liquid Glass per reference handoff =====
   Layered radial + linear gradients on the .thumb itself give us the squircle
   sphere look without any SVG defs. Multi-layer box-shadow does the drop +
   inset highlights. Border-radius 22px ≈ 28% of 76px (squircle approximation).
*/
.thumb {
  width: 76px;
  height: 76px;
  position: relative;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 65% 38% at 50% 0%, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 65%),
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.30) 100%),
    radial-gradient(circle at 50% 35%, #20262E 0%, #0A0C10 92%);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.50),
    0 3px 6px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 0.5px rgba(255,255,255,0.05);
  overflow: hidden;
  transition:
    transform 220ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 220ms ease;
}
.project-icon:hover .thumb {
  box-shadow:
    0 22px 40px rgba(0,0,0,0.55),
    0 4px 8px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 0.5px rgba(255,255,255,0.08);
}
.thumb svg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Merch icon — real shirt image with text overlay */
.merch-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
}
.merch-shirt {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  object-fit: contain;
  filter: invert(1) brightness(0.85);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.9;
}
.merch-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 6px;
  font-family: "Permanent Marker", cursive;
  font-size: 4.3px;
  color: #E6E8EB;
  line-height: 1.3;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.project-icon:focus-visible {
  outline: none;
}
.project-icon:focus-visible .thumb {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 4px;
}

.label {
  color: #f5f5f7;
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

/* ===== Per-icon animations — ported verbatim from the reference handoff ===== */

/* Performance */
@keyframes perf-pulse {
  0%   { r: 4;  opacity: 0.65; }
  100% { r: 22; opacity: 0;    }
}
.perf-pulse {
  animation: perf-pulse 2.4s ease-out infinite;
  transform-origin: center;
}
.perf-fill {
  opacity: 0;
  transition: opacity 320ms ease 80ms;
}
.project-icon:hover .perf-fill { opacity: 1; }
.perf-trace {
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
  transition: stroke-dashoffset 480ms cubic-bezier(0.32, 0.72, 0, 1);
}
.project-icon:hover .perf-trace { stroke-dashoffset: 0; }

/* Live Feed */
@keyframes amber {
  0%, 100% { opacity: 1;    }
  50%      { opacity: 0.55; }
}
.amber-dot { animation: amber 1.6s ease-in-out infinite; }
@keyframes sonar {
  0%   { r: 4;  opacity: 0.7; }
  100% { r: 18; opacity: 0;   }
}
.sonar { animation: sonar 1.8s ease-out infinite; transform-origin: center; }
.row { transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), opacity 320ms ease; }
.row-new { opacity: 0; }
.project-icon:hover .row-new { opacity: 1; }
.project-icon:hover .row-1,
.project-icon:hover .row-2,
.project-icon:hover .row-3 { transform: translateY(14px); }
.project-icon:hover .row-4 { transform: translateY(14px); opacity: 0; }
.amber-overlay { transition: opacity 280ms ease; }
.project-icon:hover .amber-overlay { opacity: 0; }
.feed-line-new {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  transition: stroke-dashoffset 380ms cubic-bezier(0.32, 0.72, 0, 1) 120ms;
}
.project-icon:hover .feed-line-new { stroke-dashoffset: 0; }

/* Congressional Trades */
.bar { transition: width 320ms cubic-bezier(0.32, 0.72, 0, 1); }
.project-icon:hover .bar-1 { width: 56px; }
.project-icon:hover .bar-2 { width: 42px; }
.project-icon:hover .bar-3 { width: 28px; }
.redact {
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), opacity 240ms;
}
.project-icon:hover .redact-1 { transform: translateX(40px); opacity: 0; }
.project-icon:hover .redact-2 { transform: translateX(40px); opacity: 0; transition-delay: 60ms; }
.reveal { opacity: 0; transition: opacity 240ms ease 220ms; }
.project-icon:hover .reveal { opacity: 1; }
.doc-frame { transition: stroke 240ms ease; }
.project-icon:hover .doc-frame { stroke: #FFFFFF; }

/* Current Holdings — isometric cube-stack flow.
   Three cubes loop on a 9s cycle, staggered -3s and -6s, so two are always
   visible: one at the upper slot, one at the lower slot (perfectly seamed
   together iso-style). On arrival at the upper slot, the top face flashes
   white. Hover speeds the cycle up to 5.4s.
   Cube paths use the source design's native size (radius 18 in a 100x100
   viewBox); the cube spacing of 18 (= half cube height of 36) makes the
   upper-cube bottom face exactly meet the lower-cube top face on the iso
   seam. */
@keyframes stack-flow {
  0%      { transform: translate(50px, -5px); opacity: 0; }
  11.1%   { transform: translate(50px, 23px); opacity: 1; }
  22.2%   { transform: translate(50px, 41px); opacity: 1; }
  44.4%   { transform: translate(50px, 41px); opacity: 1; }
  55.5%   { transform: translate(50px, 59px); opacity: 1; }
  77.7%   { transform: translate(50px, 59px); opacity: 1; }
  88.8%   { transform: translate(50px, 95px); opacity: 0; }
  100%    { transform: translate(50px, 95px); opacity: 0; }
}
@keyframes top-flash {
  0%, 8%    { fill: rgba(201, 209, 217, 0.7); }
  11.1%     { fill: rgba(255, 255, 255, 1); }
  22%, 100% { fill: rgba(201, 209, 217, 0.7); }
}
.cube-instance {
  transform-box: view-box;
  animation: stack-flow 9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  will-change: transform, opacity;
}
.cube-instance .cube-top-face {
  animation: top-flash 9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.cube-1, .cube-1 .cube-top-face { animation-delay:  0s; }
.cube-2, .cube-2 .cube-top-face { animation-delay: -3s; }
.cube-3, .cube-3 .cube-top-face { animation-delay: -6s; }
.project-icon:hover .cube-instance,
.project-icon:hover .cube-instance .cube-top-face {
  animation-duration: 5.4s;
}

/* Coming Soon popup */
.coming-soon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  gap: 0;
  padding: 56px 32px 48px;
  text-align: center;
}
.coming-soon-glyph  { margin-bottom: 24px; }
.coming-soon-line   { margin-bottom: 20px; }
.coming-soon-title  { margin-bottom: 10px; }
.coming-soon-glyph {
  width: 72px;
  height: 72px;
  opacity: 0;
  animation: csGlyphIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}
.coming-soon-glyph .cs-p-stroke {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: csDrawP 1.8s cubic-bezier(0.4, 0, 0.15, 1) 0.4s forwards;
}
@keyframes csDrawP {
  to { stroke-dashoffset: 0; }
}
@keyframes csGlyphIn {
  from { opacity: 0; transform: scale(0.6) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.coming-soon-title {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f5f5f7;
  opacity: 0;
  animation: csFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}
.coming-soon-sub {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(245, 245, 247, 0.5);
  line-height: 1.5;
  max-width: 300px;
  opacity: 0;
  animation: csFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}
.coming-soon-line {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 245, 247, 0.25), transparent);
  opacity: 0;
  animation: csFadeUp 0.6s ease 0.9s forwards;
}
@keyframes csFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cube-instance, .cube-instance .cube-top-face { animation: none; }
  .widgets-group { animation: none !important; opacity: 1 !important; transform: none !important; }
  .widget-aum-dot { animation: none; opacity: 1; }
  .coming-soon-glyph, .coming-soon-title, .coming-soon-sub, .coming-soon-line { animation: none !important; opacity: 1 !important; transform: none !important; }
  .coming-soon-glyph .cs-p-stroke { animation: none !important; stroke-dashoffset: 0; }
  .grain { animation: none; }
  .window { animation: none !important; opacity: 1 !important; transform: none !important; }
  .trade-row { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ps-cell::before { animation: none !important; }
  .thumb, .thumb *, .thumb *::before, .thumb *::after,
  .perf-pulse, .perf-trace, .amber-dot, .sonar,
  .bar, .redact, .reveal, .doc-frame {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .project-icon:hover { transform: translate(-50%, -50%); }
  .row-new   { opacity: 1; }
  .project-icon:hover .row-4 { opacity: 1; transform: none; }
  .perf-fill { opacity: 1; }
  .perf-trace { stroke-dashoffset: 0; }
}


/* ===== PelosiTracker logo — top-left, free-floating on the background.
   Same typography + size as the original bottom-right watermark, just
   repositioned. Blurs when icons/dock are hovered so the UI pops. */
.watermark-logo {
  position: fixed;
  top: 28px;
  left: 28px;
  z-index: 3;
  pointer-events: none;
  font-size: 56px;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.02em;
  opacity: 0.9;
  transition:
    filter 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
body:has(.project-icon:hover, .dock-btn:hover) .watermark-logo,
body:has(.window:not([hidden])) .watermark-logo {
  filter: blur(2.5px);
  opacity: 0.55;
}
.wm-script {
  font-family: "Pinyon Script", cursive;
  font-style: italic;
  font-weight: 400;
  margin-right: 6px;
}
.wm-sans {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-weight: 700;
}

/* ===== macOS Dock — Liquid Glass at full strength ===== */
.dock {
  position: fixed;
  bottom: calc(5% + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  background: rgba(115, 118, 124, 0.44);
  backdrop-filter: blur(60px) saturate(200%) brightness(1.35);
  -webkit-backdrop-filter: blur(60px) saturate(200%) brightness(1.35);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.12),
    0 22px 50px rgba(0, 0, 0, 0.50),
    0 8px 20px rgba(0, 0, 0, 0.32);
  z-index: 10;
}

.dock-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dock-btn:hover { transform: translateY(-1px); }
.dock-btn:active { transform: translateY(0) scale(0.96); }
.dock-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
  border-radius: 14px;
}

.dock-btn::before {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(40, 40, 42, 0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #fff;
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  border: 0.5px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  z-index: 30;
}
.dock-btn::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border: 5px solid transparent;
  border-top-color: rgba(40, 40, 42, 0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 30;
}
.dock-btn:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.dock-btn:hover::after { opacity: 1; }

.dock-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: block;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 6px 14px rgba(0, 0, 0, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.dock-icon svg { width: 100%; height: 100%; display: block; }
.dock-icon img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  /* +100% saturation / brightness vs. their natural sRGB. The reference dock
     image (memoji + IG + X + Behance) shows fully saturated, bright icons. */
  filter: saturate(2) brightness(1.3) contrast(1.05);
}
/* Instagram is naturally a hot gradient — dial it back ~10% so it doesn't
   blow out next to the more subdued X / autopilot tiles. */
.dock-btn[aria-label="Instagram"] .dock-icon img {
  filter: saturate(1.7) brightness(1.1) contrast(1.05);
}
/* Emitter glyph — concentric pulse rings */
@keyframes b4-emit {
  0%   { r: 6;  opacity: 0.7; }
  100% { r: 28; opacity: 0;   }
}
.b4-r1 { animation: b4-emit 2.4s ease-out infinite;       transform-origin: center; }
.b4-r2 { animation: b4-emit 2.4s ease-out infinite 0.8s;  transform-origin: center; }
.b4-r3 { animation: b4-emit 2.4s ease-out infinite 1.6s;  transform-origin: center; }
.dock-btn:hover .b4-r1,
.dock-btn:hover .b4-r2,
.dock-btn:hover .b4-r3,
.project-icon:hover .b4-r1,
.project-icon:hover .b4-r2,
.project-icon:hover .b4-r3 { animation-duration: 1.2s; }
.b4-core { transition: fill 280ms ease; }
.dock-btn:hover .b4-core,
.project-icon:hover .b4-core { fill: #FFFFFF; }
@media (prefers-reduced-motion: reduce) {
  .b4-r1, .b4-r2, .b4-r3 { animation: none; opacity: 0.3; }
}

.dock-divider {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.38);
  margin: 0 4px;
}

/* ===== Popup window ===== */
@keyframes windowIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.window {
  position: fixed;
  width: 760px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 80px);
  background: rgba(248, 248, 250, 0.78);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.4),
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  z-index: 100;
  animation: windowIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
  transition: opacity 0.15s ease;
}
.window[hidden] { display: none; }
.window.dragging {
  opacity: 0.65;
  cursor: grabbing;
  transition: none;
}

.titlebar {
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(245, 245, 247, 0.55);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  position: relative;
  flex-shrink: 0;
  cursor: grab;
}
.titlebar:active { cursor: grabbing; }

.traffic-lights { display: flex; gap: 8px; align-items: center; z-index: 2; }
.tl {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.18);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: filter 0.1s;
}
.tl-close { background: #ff5f57; }
.tl-min   { background: #febc2e; }
.tl-max   { background: #28c840; }
.tl-min, .tl-max { cursor: default; opacity: 0.95; }
.titlebar:hover .tl-close::before {
  content: "";
  position: absolute;
  inset: 3px;
  background:
    linear-gradient(45deg, transparent 45%, rgba(0,0,0,0.55) 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, rgba(0,0,0,0.55) 45% 55%, transparent 55%);
}
.titlebar-title {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.78);
  letter-spacing: -0.01em;
  pointer-events: none;
}

.window-body {
  padding: 36px 36px 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  user-select: text;
  -webkit-user-select: text;
  flex: 1;
  color: #111;
}

/* Headlines */
.window-body h1 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 18px;
  color: #0a0a0a;
}
.window-body .lead {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(40, 40, 40, 0.75);
  margin-bottom: 20px;
}

/* ===== Performance card ===== */
.perf-card {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  padding: 22px 22px 18px;
  margin-bottom: 16px;
}
.chart-wrap {
  position: relative;
  cursor: crosshair;
  margin-bottom: 14px;
}
/* While the sweep-reveal is running, ignore hover so the crosshair doesn't
   move ahead of the line being drawn. The class is removed in JS at the
   visual-completion point (~2.0s into the 3s sweep). */
.chart-wrap.revealing { cursor: default; }
.chart-wrap.revealing svg { pointer-events: none; }

/* Cursor markers — already positioned at the FINAL data point in the SVG
   markup so they appear in the right spot. We fade them in starting at 1.95s
   so they're fully visible at 2.35s — right as the line lands at its endpoint
   (eased=0.96 of the 3s ease-out cubic ≈ t=0.67 ≈ 2.0s). No dead-time pause
   between line-done and dot-appears. */
#perfChart #cursorLine,
#perfChart #cursorPelosi,
#perfChart #cursorSpx {
  opacity: 0;
}
#perfChart #cursorPelosi,
#perfChart #cursorSpx {
  animation: perfCursorIn 0.4s 1.95s forwards ease-out;
}
#perfChart #cursorLine {
  animation: perfCursorLineIn 0.4s 1.95s forwards ease-out;
}
@keyframes perfCursorIn     { to { opacity: 1;   } }
@keyframes perfCursorLineIn { to { opacity: 0.5; } }

/* Fill area — washes in from a desaturated, brightened tint to full green
   over the same 3s sweep window. */
#perfChart .perf-fill-area {
  opacity: 0;
  filter: saturate(0.2) brightness(1.55);
  animation: perfFillIntensify 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes perfFillIntensify {
  to {
    opacity: 1;
    filter: saturate(1) brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #perfChart .perf-fill-area,
  #perfChart #cursorLine,
  #perfChart #cursorPelosi,
  #perfChart #cursorSpx {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  #perfChart #cursorLine { opacity: 0.5 !important; }
}
.chart-wrap .legend-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  color: #0a0a0a;
}
.chart-wrap .legend-current { display: flex; flex-direction: column; }
.chart-wrap .legend-current .legend-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(60, 60, 60, 0.55);
  margin-bottom: 4px;
  font-weight: 600;
}
.chart-wrap .legend-current .legend-amount {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0a0a0a;
}
.chart-wrap .legend-current .legend-amount .delta {
  font-size: 14px;
  font-weight: 600;
  color: #00C805;
  margin-left: 8px;
  letter-spacing: -0.01em;
}
.chart-wrap .legend-current .legend-date {
  font-size: 11px;
  color: rgba(60, 60, 60, 0.55);
  margin-top: 2px;
}
.chart-wrap .legend-spx {
  text-align: right;
  font-size: 12px;
  color: rgba(60, 60, 60, 0.6);
}
.chart-wrap .legend-spx strong { color: #0a0a0a; font-weight: 600; }
.chart-wrap .legend-spx .spx-delta { margin-left: 4px; font-size: 11px; opacity: 0.7; }
.chart-wrap svg { width: 100%; display: block; }
.spx-summary {
  display: none;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(60, 60, 60, 0.6);
  padding: 8px 0 0;
}
.spx-summary .spx-delta { margin-left: 2px; opacity: 0.7; }

/* LIVE pill in the legend label, shown when live numbers are loaded. */
.legend-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 1px 7px 1px 6px;
  border-radius: 999px;
  background: rgba(0, 200, 5, 0.12);
  color: #00a005;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.legend-live .hb-dot {
  background: #00C805;
  width: 5px;
  height: 5px;
  /* Sharper blink than the default hbPulse — more obvious "data is live" signal.
     Quick on-off cycle with a subtle ring halo for depth. */
  animation: liveBlink 1.1s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(0, 200, 5, 0.55);
}
@keyframes liveBlink {
  0%, 60%  { opacity: 1;   transform: scale(1);    box-shadow: 0 0 0 0   rgba(0, 200, 5, 0.55); }
  75%      { opacity: 0.25; transform: scale(0.7); box-shadow: 0 0 0 4px rgba(0, 200, 5, 0);   }
  100%     { opacity: 1;   transform: scale(1);    box-shadow: 0 0 0 0   rgba(0, 200, 5, 0);   }
}
@media (prefers-reduced-motion: reduce) {
  .legend-live .hb-dot { animation: none; }
}

/* ===== Performance — live stats footer ===== */
.perf-stats {
  margin-bottom: 12px;
}
.ps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ps-cell {
  background: rgba(255, 255, 255, 0.65);
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.ps-cell::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0%;
  background: linear-gradient(
    to top,
    rgba(22, 163, 74, 0.13) 0%,
    rgba(22, 163, 74, 0.06) 60%,
    rgba(22, 163, 74, 0) 100%
  );
  border-radius: 0 0 12px 12px;
  z-index: -1;
  animation: ps-fill-rise 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--fill-delay, 0.3s);
}
@keyframes ps-fill-rise {
  to { height: var(--fill, 40%); }
}
.ps-cell-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(60, 60, 60, 0.55);
}
.ps-cell-value {
  font-size: 22px;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: -0.025em;
  font-feature-settings: "tnum";
  line-height: 1.05;
}
.ps-cell-sub {
  font-size: 11px;
  color: rgba(60, 60, 60, 0.55);
  font-weight: 500;
}

/* Timeframe pills */
.timeframe-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 14px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
}
.tf-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.tf-btn:hover { background: rgba(0, 0, 0, 0.04); color: #0a0a0a; }
/* Active timeframe pill: background matches the soft fill wash UNDER the
   performance line (#16a34a at 18% — same `rgba(22,163,74,0.18)` as the
   gradient stop), border matches the line stroke itself (#16a34a). Inset
   box-shadow instead of `border` so adding a stroke doesn't shift padding. */
.tf-btn.active {
  background: rgba(22, 163, 74, 0.18);
  color: #15803d;
  box-shadow: inset 0 0 0 1px #16a34a;
}
.tf-btn.active:hover {
  background: rgba(22, 163, 74, 0.24);
  color: #14532d;
}


.window-body .meta-grid {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin-bottom: 16px;
}
.window-body .meta-grid .meta-cell label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(60, 60, 60, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.window-body .meta-grid .meta-cell .val {
  font-size: 14px;
  color: #0a0a0a;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.window-body .link-row {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.window-body .link-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  background: rgba(255,255,255,0.6);
  border: 0.5px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  color: #111;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.window-body .link-btn:hover { background: rgba(255,255,255,0.9); }
.window-body .link-btn.primary {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #fff;
}
.window-body .link-btn.primary:hover { background: #1f1f1f; }

/* ===== Trades feed — two-column buy/sell layout =====
   Left column = Buys, Right column = Sells. Each column has its own header,
   legend, and rows. Rows animate in staggered and lift on hover. */

.trades-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.trades-col {
  background: rgba(244, 244, 244, 0.50);
  border-radius: 14px;
  padding: 0 6px 6px;
  min-width: 0;
}
.trades-col-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 10px 6px;
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0a0a0a;
}
.trades-col-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.trades-col-dot.buy  { background: #00a005; box-shadow: 0 0 6px rgba(0, 160, 5, 0.4); }
.trades-col-dot.sell { background: #dc2626; box-shadow: 0 0 6px rgba(220, 38, 38, 0.4); }

.trade-legend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 6px 10px 5px;
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(60, 60, 60, 0.58);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.trade-legend span:nth-child(2) { justify-self: end; }

.trade-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 8px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s ease,
              background 0.28s ease;
  animation: tradeRowIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--rank, 0) * 0.06s + 0.15s);
}
@keyframes tradeRowIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.trade-row:last-child { border-bottom: none; }
.trade-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.trade-row-buy:hover  { background: rgba(0, 160, 5, 0.06); }
.trade-row-sell:hover { background: rgba(220, 38, 38, 0.05); }
.trades-empty-col {
  padding: 24px 10px;
  text-align: center;
  font-size: 13px;
  color: rgba(60, 60, 60, 0.45);
}

/* Keep single-column feed for loading skeleton */
.trades-feed {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  background: rgba(244, 244, 244, 0.55);
  border-radius: 14px;
  padding: 4px 8px;
}
.trade-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}
.trade-avatar {
  position: relative;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 12px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  overflow: hidden;
  /* Subtle inner ring to integrate the photo with the colored backdrop. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
              0 1px 2px rgba(0, 0, 0, 0.08);
}
/* Initials sit at the base; the photo covers them when it loads. If the
   photo 404s, JS removes the <img> and the initials fade back through. */
.trade-avatar .trade-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.trade-avatar .trade-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%; /* shift down so foreheads don't dominate */
  z-index: 2;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: inherit;
}
.trade-avatar .trade-photo.loaded { opacity: 1; }
.trade-info { min-width: 0; overflow: hidden; }
.trade-info .pol-name {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-info .pol-party {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 10px;
  color: rgba(60, 60, 60, 0.50);
  margin-top: 1px;
  white-space: nowrap;
}
/* Right side of each trade row — ticker + company stacked above amount · date. */
.trade-detail {
  justify-self: end;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.trade-ticker-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
}
.trade-detail .trade-action-ticker {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.trade-row-buy  .trade-action-ticker { color: #00a005; }
.trade-row-sell .trade-action-ticker { color: #dc2626; }
.trade-detail .trade-company {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(60, 60, 60, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}
.trade-detail .trade-amt-line {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(60, 60, 60, 0.62);
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* Skeleton placeholders while the live trades fetch is in flight. */
.trade-row-skeleton {
  pointer-events: none;
}
.trade-skel-bone {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.10) 50%,
    rgba(0, 0, 0, 0.05) 100%);
  background-size: 220% 100%;
  border-radius: 6px;
  animation: tradeSkelShimmer 1.6s linear infinite;
}
.trade-skel-line { height: 12px; }
.trade-skel-line.w-20 { width: 20%; }
.trade-skel-line.w-40 { width: 40%; }
.trade-skel-line.w-action { width: 64px; height: 18px; }
.trade-skel-line.w-amount { width: 110px; height: 14px; }
@keyframes tradeSkelShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .trade-skel-bone { animation: none; }
}

.trades-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: rgba(60, 60, 60, 0.6);
}

/* (trade-amount removed — replaced by .trade-detail in the two-column layout) */

/* ===== Holdings — error banner ===== */
.holdings-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 0.5px solid transparent;
}
.holdings-banner-error {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.18);
}
/* Pulsing red dot used by the perf chart's LIVE pill (`.legend-live`). */
.hb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #0a0a0a;
  display: inline-block;
  animation: hbPulse 1.2s ease-in-out infinite;
}
@keyframes hbPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hb-dot { animation: none; }
}

/* ===== Per-position detail list (Holdings) — compact 2-line row =====
   Each holding is a single horizontal pill: [mark] [ticker · name + range] [%].
   Sub-line beneath holds Opened · Cost · Last filing as muted inline meta.
   Spacing bumped ~40% for breathing room. Entrance staggered off --rank with
   a slide-from-left + overshoot; the colored mark pops and the % counts up. */
.position-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 16px;
}
.position-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.72);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  opacity: 0;
  transform: translate3d(-18px, 0, 0) scale(0.97);
  animation: positionRowIn 0.7s calc(var(--rank, 0) * 110ms + 240ms) forwards cubic-bezier(0.34, 1.3, 0.5, 1);
}
@keyframes positionRowIn {
  0%   { opacity: 0; transform: translate3d(-18px, 0, 0) scale(0.97); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.position-mark {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: -apple-system, "Satoshi", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  letter-spacing: -0.01em;
  overflow: hidden;
  transform-origin: center;
  animation: positionMarkPop 0.65s calc(var(--rank, 0) * 110ms + 380ms) backwards cubic-bezier(0.34, 1.7, 0.5, 1);
}
/* Layered: monogram is the base layer (always rendered), real company logo
   covers it when available. Logo fades in on load; if the URL 404s the JS
   onerror removes the <img> and the monogram shows through. */
.position-mark .position-mark-mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.position-mark .position-mark-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.position-mark .position-mark-logo.loaded { opacity: 1; }
@keyframes positionMarkPop {
  0%   { transform: scale(0.3) rotate(-120deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1)   rotate(0);       opacity: 1; }
}
.position-body { min-width: 0; }
.position-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  line-height: 1.15;
}
.position-ticker {
  font-size: 16px;
  font-weight: 700;
  color: #0a0a0a;
  font-family: "Satoshi", -apple-system, sans-serif;
  letter-spacing: -0.01em;
}
.position-name {
  font-size: 13.5px;
  color: rgba(60, 60, 60, 0.7);
  font-weight: 500;
  font-family: "Satoshi", -apple-system, sans-serif;
  letter-spacing: -0.005em;
}
.position-meta {
  margin-top: 6px;
  font-size: 11.5px;
  color: rgba(60, 60, 60, 0.6);
  font-family: "Satoshi", -apple-system, sans-serif;
  font-weight: 500;
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.35;
  font-feature-settings: "tnum";
}
.position-meta .pm-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 9.5px;
  font-family: "Satoshi", -apple-system, sans-serif;
  font-weight: 700;
  color: rgba(60, 60, 60, 0.45);
  margin-right: 3px;
}
.position-meta .pm-dot { color: rgba(60, 60, 60, 0.3); }
.position-meta .pm-filing { color: rgba(60, 60, 60, 0.55); }
.position-meta .pm-pl-up   { color: #00a005; }
.position-meta .pm-pl-up   .pm-label { color: rgba(0, 160, 5, 0.7); }
.position-meta .pm-pl-down { color: #dc2626; }
.position-meta .pm-pl-down .pm-label { color: rgba(220, 38, 38, 0.7); }
.position-pct {
  font-size: 22px;
  font-weight: 700;
  color: #0a0a0a;
  font-family: "Satoshi", -apple-system, sans-serif;
  letter-spacing: -0.025em;
  font-feature-settings: "tnum";
  line-height: 1;
}
.position-pct-symbol {
  font-size: 12px;
  color: rgba(60, 60, 60, 0.5);
  font-family: "Satoshi", -apple-system, sans-serif;
  font-weight: 500;
  margin-left: 2px;
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  .position-row, .position-mark {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== Holdings 3D bar chart ===== */
.bars-wrap {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  padding: 22px 18px 22px;
  margin-bottom: 16px;
  overflow: hidden;
}
.bars-svg { width: 100%; display: block; }
.bars-svg .bar3d {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scaleY(0);
  /* Frictioned single-trip rise. Strong acceleration off the floor (the
     ease-out curve is most aggressive at the start), decelerates as if
     pushing against friction, then a single ~1.5% overshoot at the top
     before settling. No back-and-forth bouncing — energy bleeds off into
     the deceleration instead of a second oscillation. */
  animation: barGrow 1.25s calc(var(--rank, 0) * 130ms) forwards cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes barGrow {
  0%   { transform: scaleY(0);     }
  78%  { transform: scaleY(1.015); }
  100% { transform: scaleY(1);     }
}
.bars-svg .bar-extras {
  opacity: 0;
  animation: fadeBarText 0.55s calc(var(--rank, 0) * 130ms + 750ms) forwards cubic-bezier(0.34, 1.4, 0.6, 1);
}
@keyframes fadeBarText {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ===== Bar hover-to-color =====
   At rest, every bar is dark gray-black (3 shades for the iso-3D effect:
   right=darkest, front=mid, top=lightest). The company logo on top is
   desaturated to grayscale and the monogram + circle stroke are gray too,
   so the whole bar reads monochrome. Hovering swaps everything to that
   ticker's brand colors via the --brand-* CSS variables set inline on
   each .bar-group. */
.bars-svg .bar-face {
  /* No fill transition — emanation effect handles the visual via radial
     gradients. CSS can't interpolate solid↔url() fills cleanly. */
}
.bars-svg .bar-face-right { fill: #15171b; }   /* near-black */
.bars-svg .bar-face-front { fill: #2a2d33; }   /* mid graphite */
.bars-svg .bar-face-top   { fill: #4a4f57; }   /* lighter slate */

.bars-svg .bar-mark-rect {
  stroke: rgba(0, 0, 0, 0.10);
  transition: stroke 0.32s ease;
  animation: logoColorRect 0.7s calc(var(--rank, 0) * 130ms + 800ms) forwards ease-out;
}
.bars-svg .bar-mark-mono {
  fill: #1a1a1a;
  transition: fill 0.32s ease;
  animation: logoColorMono 0.7s calc(var(--rank, 0) * 130ms + 800ms) forwards ease-out;
}
.bars-svg .bar-mark-logo {
  opacity: 0;
  filter: grayscale(1) brightness(0.3);
  transition: filter 0.32s ease;
  animation: logoColorImg 0.9s calc(var(--rank, 0) * 130ms + 800ms) forwards ease-out;
}
.bars-svg .bar-mark-logo.loaded { opacity: 1; }

@keyframes logoColorRect {
  0%   { stroke: rgba(0, 0, 0, 0.10); }
  100% { stroke: var(--brand-front); }
}
@keyframes logoColorMono {
  0%   { fill: #1a1a1a; }
  100% { fill: var(--brand-front); }
}
@keyframes logoColorImg {
  0%   { filter: grayscale(1) brightness(0.3); }
  60%  { filter: grayscale(0.3) brightness(0.7); }
  100% { filter: grayscale(0) brightness(1); }
}

.bars-svg .bar-group { cursor: default; }
.bars-svg .bar-group:hover .bar-mark-rect { stroke: var(--brand-front); }
.bars-svg .bar-group:hover .bar-mark-mono { fill: var(--brand-front); }
.bars-svg .bar-group:hover .bar-mark-logo { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .bars-svg .bar-mark-rect,
  .bars-svg .bar-mark-mono,
  .bars-svg .bar-mark-logo { transition: none; animation: none !important; filter: none; }
  .bars-svg .bar-mark-mono { fill: var(--brand-front); }
  .bars-svg .bar-mark-rect { stroke: var(--brand-front); }
}

/* ===== Holdings chart frame — full box + dithering gridlines =====
   Layered decoration choreography (after bars settle at ~2.16s):
     2.40s → Y axis grows up + X axis grows right (from bottom-left corner)
     2.95s → Top edge grows right + Right edge grows up (closing the box)
     3.40s → Horizontal gridlines + tick labels fade in
   Everything is drawn with restrained stroke weight + opacity so the bars
   stay the protagonist. */
.bars-svg .box-edge {
  stroke: rgba(0, 0, 0, 0.22);
  stroke-width: 0.7;
  stroke-linecap: round;
}
.bars-svg .axis-tick {
  stroke: rgba(0, 0, 0, 0.22);
  stroke-width: 0.7;
}
.bars-svg .axis-tick-label {
  font-family: "Satoshi", -apple-system, sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  fill: rgba(60, 60, 60, 0.55);
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}
.bars-svg .grid-h {
  stroke: rgba(0, 0, 0, 0.12);
  stroke-width: 0.5;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
  animation: gridDither 4s calc(var(--gi, 0) * 1.8s) ease-in-out infinite alternate;
}
@keyframes gridDither {
  0%   { stroke-dashoffset: 0; opacity: 0.7; }
  50%  { opacity: 1; }
  100% { stroke-dashoffset: 14; opacity: 0.7; }
}

/* Box reveal — Y + X first (from bottom-left), Top + Right close the box. */
.bars-svg .box-y {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  animation: axisGrowY 0.55s 2.4s forwards cubic-bezier(0.22, 1, 0.36, 1);
}
.bars-svg .box-x {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  transform: scaleX(0);
  animation: axisGrowX 0.55s 2.4s forwards cubic-bezier(0.22, 1, 0.36, 1);
}
.bars-svg .box-top {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  transform: scaleX(0);
  animation: axisGrowX 0.45s 2.95s forwards cubic-bezier(0.22, 1, 0.36, 1);
}
.bars-svg .box-right {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  animation: axisGrowY 0.45s 2.95s forwards cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes axisGrowY { to { transform: scaleY(1); } }
@keyframes axisGrowX { to { transform: scaleX(1); } }

/* Gridlines + tick labels fade in after the box closes. */
.bars-svg .grid-h-group,
.bars-svg .axis-ticks {
  opacity: 0;
  animation: fadeAxisTicks 0.5s 3.4s forwards ease-out;
}
@keyframes fadeAxisTicks { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .bars-svg .box-edge,
  .bars-svg .grid-h-group,
  .bars-svg .grid-h,
  .bars-svg .axis-ticks {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ===== X / Twitter embed card ===== */
.tw-embed-card {
  background: rgba(255, 255, 255, 0.78);
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.tw-embed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 100%);
}
.tw-embed-handle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.tw-embed-logo {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #0a0a0a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
}
.tw-embed-logo svg { width: 16px; height: 16px; display: block; }
.tw-embed-handle-text { min-width: 0; line-height: 1.15; }
.tw-embed-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: -0.01em;
}
.tw-embed-sub {
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(60, 60, 60, 0.62);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.tw-embed-live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #00C805;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(0, 200, 5, 0.55);
  animation: twPulse 1.6s ease-out infinite;
}
@keyframes twPulse {
  0%   { box-shadow: 0 0 0 0   rgba(0, 200, 5, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 200, 5, 0); }
  100% { box-shadow: 0 0 0 0   rgba(0, 200, 5, 0); }
}
.tw-embed-follow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  background: #0a0a0a;
  color: #fff;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: background 0.15s ease, transform 0.15s ease;
}
.tw-embed-follow:hover { background: #1f1f1f; transform: translateY(-1px); }
.tw-embed-follow:active { transform: translateY(0); }

.tw-embed-frame {
  position: relative;
  min-height: 200px;
  background: #fff;
}

/* ===== Native tweet cards ===== */
.tw-feed {
  display: flex;
  flex-direction: column;
}
.tw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 20px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.07);
  background: #fff;
  opacity: 0;
  transform: translate3d(-10px, 6px, 0);
  animation: twCardIn 0.55s calc(var(--rank, 0) * 60ms + 60ms) forwards cubic-bezier(0.32, 0.72, 0, 1);
}
.tw-pinned {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(60, 60, 60, 0.55);
  margin-left: 46px;
  margin-bottom: -2px;
}
.tw-card:last-child { border-bottom: none; }
.tw-card:hover { background: rgba(0, 0, 0, 0.015); }
@keyframes twCardIn {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tw-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.tw-card-head {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: flex-start;
}
.tw-avatar-link {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}
.tw-avatar {
  width: 36px; height: 36px;
  display: block;
  object-fit: cover;
}
.tw-avatar-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  background: #0a0a0a;
}
.tw-author { min-width: 0; line-height: 1.2; }
.tw-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tw-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: -0.01em;
}
.tw-verified-mark {
  display: inline-block;
  width: 14px; height: 14px;
  background: #1d9bf0;
  flex-shrink: 0;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81-1.01 1.01-1.27 2.52-.81 3.91-1.31.67-2.19 1.91-2.19 3.34s.88 2.67 2.19 3.34c-.46 1.39-.2 2.9.81 3.91s2.52 1.27 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.67-.88 3.34-2.19c1.39.46 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81-1.01 1.01-1.27 2.52-.81 3.91-1.31.67-2.19 1.91-2.19 3.34s.88 2.67 2.19 3.34c-.46 1.39-.2 2.9.81 3.91s2.52 1.27 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.67-.88 3.34-2.19c1.39.46 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z'/></svg>") center/contain no-repeat;
}
.tw-meta-row {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 12.5px;
  color: rgba(60, 60, 60, 0.62);
  margin-top: 2px;
}
.tw-handle { color: rgba(60, 60, 60, 0.62); }
.tw-dot { color: rgba(60, 60, 60, 0.4); }
.tw-time {
  color: rgba(60, 60, 60, 0.62);
  text-decoration: none;
}
.tw-time:hover { text-decoration: underline; }

.tw-text {
  margin-left: 46px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #0a0a0a;
  letter-spacing: -0.005em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.tw-link {
  color: #1d9bf0;
  text-decoration: none;
}
.tw-link:hover { text-decoration: underline; }

.tw-media {
  margin-left: 46px;
  display: grid;
  gap: 3px;
  border-radius: 14px;
  overflow: hidden;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
}
.tw-media-1 { grid-template-columns: 1fr; }
.tw-media-2 { grid-template-columns: 1fr 1fr; }
.tw-media-3 { grid-template-columns: 2fr 1fr; }
.tw-media-3 a:first-child { grid-row: span 2; }
.tw-media-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tw-media a { display: block; height: 100%; }
.tw-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.05);
}

.tw-stats {
  margin-left: 46px;
  display: flex;
  gap: 28px;
  font-size: 12.5px;
  color: rgba(60, 60, 60, 0.55);
  font-feature-settings: "tnum";
}
.tw-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tw-empty, .tw-error {
  padding: 40px 24px;
  text-align: center;
  font-size: 13px;
  color: rgba(60, 60, 60, 0.6);
}
.tw-error a { color: #1d9bf0; text-decoration: none; font-weight: 600; }

/* Skeleton — three placeholder tweets with shimmering bones. Visible
   immediately; fades out 0.4s after .tw-loaded is set on the card. */
.tw-embed-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.tw-loaded .tw-embed-skeleton { opacity: 0; }
.tw-skel { display: flex; gap: 14px; }
.tw-skel-av {
  width: 42px; height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tw-skel-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.tw-skel-line { height: 10px; border-radius: 6px; }
.tw-skel-line.w-30 { width: 30%; }
.tw-skel-line.w-50 { width: 50%; }
.tw-skel-line.w-75 { width: 75%; }
.tw-skel-line.w-90 { width: 90%; }

.tw-skel-av,
.tw-skel-line {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.10) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
  background-size: 220% 100%;
  animation: twShimmer 1.6s linear infinite;
}
@keyframes twShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tw-embed-live, .tw-skel-av, .tw-skel-line { animation: none; }
}

/* ===== Mobile / narrow viewport breakpoints ===== */
@media (max-width: 600px) {
  .ps-grid { grid-template-columns: repeat(2, 1fr); }
  .trades-columns { grid-template-columns: 1fr; }
  .dock {
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 8px);
    border-radius: 18px 18px 0 0;
  }
}

/* ===== RESPONSIVE BREAKPOINTS =====
   Appended after all base styles. Desktop (>1024px) untouched.
   Each @media block is self-contained per the verified plan. */

/* ----- Tablet landscape: 769–1024px ----- */
@media (max-width: 1024px) {
  /* Phase 0: GPU perf — intermediate blur reduction */
  .widget-perf, .widget-aum, .widget-cta,
  .dock, .window {
    backdrop-filter: blur(40px) saturate(190%);
    -webkit-backdrop-filter: blur(40px) saturate(190%);
  }
  /* Phase 2: Icons */
  .thumb { width: 64px; height: 64px; border-radius: 18px; }
  .project-icon { gap: 9px; }
  .label { font-size: 11px; }
  .project-icon:hover { transform: translate(-50%, calc(-50% - 4px)) scale(1.04); }
  .project-icon[data-id="trades"] { --y: 73% !important; }
  .project-icon[data-id="articles"] { --y: 68% !important; }
  /* Phase 3: Widgets */
  .watermark-logo { font-size: 48px; top: 22px; left: 22px; }
  .widgets-group { top: 88px; left: 22px; }
  .widget-perf, .widget-aum { width: 116px; height: 116px; }
  /* Phase 4: Popup */
  .window { width: 680px; }
  .window-body { padding: 28px 28px 32px; }
  /* Phase 5: Dock */
  .dock-icon { width: 44px; height: 44px; border-radius: 10px; }
  .dock { gap: 6px; padding-top: 6px; padding-left: 8px; padding-right: 8px; }
  .dock-divider { height: 28px; }
  /* Phase 9: Typography */
  .window-body h1 { font-size: 34px; }
}

/* ----- Tablet portrait: 601–768px ----- */
@media (max-width: 768px) {
  /* Phase 2: Icons — reposition to 2-column grid */
  .thumb { width: 58px; height: 58px; border-radius: 16px; }
  .label { font-size: 10px; }
  .project-icon[data-id="chart"] { --x: 42% !important; --y: 44% !important; }
  .project-icon[data-id="tweets"] { --x: 72% !important; --y: 40% !important; }
  .project-icon[data-id="merch"] { --x: 28% !important; --y: 52% !important; }
  .project-icon[data-id="trades"] { --x: 28% !important; --y: 70% !important; }
  .project-icon[data-id="holdings"] { --x: 72% !important; --y: 60% !important; }
  .project-icon[data-id="articles"] { --x: 72% !important; --y: 78% !important; }
  /* Phase 3: Widgets */
  .watermark-logo { font-size: 40px; top: 18px; left: 16px; }
  .widgets-group { top: 72px; left: 16px; gap: 5px; }
  .widgets-row { gap: 5px; }
  .widget-perf, .widget-aum { width: 104px; height: 104px; padding: 10px; }
  .widget-perf-value { font-size: 21px; }
  .widget-aum-value { font-size: 19px; }
  /* Phase 4: Popup */
  .window { width: 92vw; max-height: 85vh; }
  .window-body { padding: 24px 20px 28px; }
  /* Phase 9: Typography */
  .window-body h1 { font-size: 30px; }
  .chart-wrap .legend-current .legend-amount { font-size: 28px; }
}

/* ----- Mobile: 0–600px ----- */
@media (max-width: 600px) {
  /* Phase 0: GPU perf — aggressive blur + shadow reduction */
  .widget-perf, .widget-aum, .widget-cta {
    backdrop-filter: blur(20px) saturate(180%) brightness(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.3);
  }
  .dock {
    backdrop-filter: blur(20px) saturate(180%) brightness(1.35);
    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.35);
  }
  .window {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
  .grain { opacity: 0.4; animation-duration: 2.8s; }
  .thumb { box-shadow: 0 8px 18px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.2); }
  .dock { box-shadow: 0 8px 28px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.15); }

  /* Phase 2: Icons — tighter 2-column grid for small screens */
  .thumb { width: 52px; height: 52px; border-radius: 15px; }
  .project-icon { gap: 8px; }
  .label { font-size: 9.5px; }
  .project-icon:hover { transform: translate(-50%, calc(-50% - 3px)) scale(1.03); }
  .project-icon[data-id="chart"] { --x: 30% !important; --y: 48% !important; }
  .project-icon[data-id="tweets"] { --x: 70% !important; --y: 48% !important; }
  .project-icon[data-id="merch"] { --x: 30% !important; --y: 55% !important; }
  .project-icon[data-id="holdings"] { --x: 70% !important; --y: 65% !important; }
  .project-icon[data-id="trades"] { --x: 30% !important; --y: 72% !important; }
  .project-icon[data-id="articles"] { --x: 70% !important; --y: 82% !important; }

  /* Phase 3: Widgets — restate mobile sizes (override 768px block) */
  .watermark-logo { top: 14px; left: 14px; font-size: 36px; }
  .widgets-group { top: 68px; left: 12px; gap: 5px; }
  .widget-perf, .widget-aum { width: 108px; height: 108px; padding: 11px; }
  .widget-perf-value { font-size: 22px; }
  .widget-aum-value { font-size: 20px; }
  .widget-cta { padding: 8px 12px; }
  .widget-cta-logo { width: 26px; height: 26px; }
  .widget-cta-title { font-size: 11px; }
  .widget-cta-sub { font-size: 8px; }

  /* Phase 4: Popup — centered modal with even margin on all sides.
     Uses inset shorthand so no inline left/top/bottom can interfere. */
  .window {
    width: 92vw !important;
    max-width: 92vw !important;
    max-height: 85vh;
    left: 4vw !important;
    right: 4vw !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    border-radius: 18px;
    animation: none;
    box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 6px 16px rgba(0,0,0,0.2);
  }
  .window.sheet-in {
    animation: windowInMobile 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes windowInMobile {
    from { transform: translateY(-50%) scale(0.92); opacity: 0; }
    to   { transform: translateY(-50%) scale(1); opacity: 1; }
  }
  .window-body { padding: 20px 16px 24px; }
  .titlebar { cursor: default; }
  .titlebar::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
  }
  .window-body .meta-grid { grid-template-columns: 1fr; }

  /* Phase 5: Dock */
  .dock-icon { width: 40px; height: 40px; border-radius: 10px; }
  .dock { gap: 5px; padding-top: 5px; padding-left: 7px; padding-right: 7px; }
  .dock-divider { height: 24px; }

  /* Phase 6: Performance chart content */
  .perf-card { padding: 14px 12px 12px; }
  .chart-wrap .legend-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 0;
  }
  .chart-wrap .legend-spx { display: none; }
  .chart-wrap .legend-current .legend-label {
    font-size: 8.5px;
    letter-spacing: 0.03em;
  }
  .chart-wrap .legend-current .legend-amount { font-size: 22px; }
  .chart-wrap .legend-current .legend-amount .delta { font-size: 11px; }
  .chart-wrap .legend-current .legend-date { display: none; }
  .legend-live { margin-left: 4px; font-size: 8px; padding: 1px 5px; }
  .spx-summary { display: block; }
  .ps-cell { padding: 8px 10px; }
  .ps-cell-value { font-size: 16px; }
  .ps-cell-label { font-size: 9px; }
  .ps-cell-sub { font-size: 10px; }
  .tf-btn { padding: 5px 10px; font-size: 11px; }
  .window-body .link-row { justify-content: center; }
  .window-body .link-btn.primary {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
  }

  /* Phase 6: Holdings — Chain 2 (mark 30px → grid 30px) */
  .position-row { grid-template-columns: 30px 1fr auto; gap: 10px; padding: 10px 14px; }
  .position-mark { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
  .position-mark .position-mark-logo { border-radius: 8px; padding: 3px; }
  .position-ticker { font-size: 14px; }
  .position-name { font-size: 12px; }
  .position-pct { font-size: 18px; }
  .position-meta { font-size: 10.5px; }
  .bars-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 14px 12px; }
  .bars-svg { min-width: 500px; }

  /* Phase 6: Trades */
  .trade-avatar { width: 24px; height: 24px; font-size: 10px; }
  .trade-detail .trade-action-ticker { font-size: 12px; }
  .trade-detail .trade-company { max-width: 70px; font-size: 10px; }

  /* Phase 6: Tweets — Chain 1 (avatar 30px + gap 8px = 38px indent) */
  .tw-card { padding: 10px 14px; }
  .tw-card-head { grid-template-columns: 30px 1fr; gap: 8px; }
  .tw-avatar-link, .tw-avatar { width: 30px; height: 30px; }
  .tw-text { margin-left: 38px; font-size: 13px; }
  .tw-media { margin-left: 38px; }
  .tw-media img { max-height: 240px; }
  .tw-stats { margin-left: 38px; gap: 16px; font-size: 11.5px; }
  .tw-pinned { margin-left: 38px; }
  .tw-name { font-size: 13px; }
  .tw-embed-header { padding: 10px 14px; }
  .tw-embed-logo { width: 28px; height: 28px; }
  .tw-embed-follow { padding: 6px 12px; font-size: 11.5px; }

  /* Phase 6: Coming Soon */
  .coming-soon-wrap { padding: 40px 20px 36px; min-height: 240px; }
  .coming-soon-title { font-size: 22px; }
  .coming-soon-sub { font-size: 13px; }

  /* Phase 7: Background — match desktop reveal intensity */
  .background-lift { opacity: 1; }

  /* Phase 9: Typography */
  .window-body h1 { font-size: 26px; margin-bottom: 14px; }
  .window-body .lead { font-size: 14px; }
  .window-body .link-btn { font-size: 12px; padding: 8px 14px; }
}

/* ----- Touch-only devices ----- */
@media (hover: none) and (pointer: coarse) {
  .dock-btn::before,
  .dock-btn::after { display: none; }
  .dock-btn:hover { transform: none; }
}