/* Chain Pulse — Durden-inspired editorial research theme (light default + dark). */

:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #fcfaf6;
  --bg2: #f4f0e7;
  --card: #ffffff;
  --card2: #faf8f2;
  --border: #e7e1d4;
  --border2: #d6cfbf;
  --txt: #1a1f26;
  --txt2: #454c56;
  --txt3: #71757c;
  --txt4: #a39d92;
  --muted: #8b949e;
  --accent: #c47a00;
  --accent-bright: #e8940a;
  --accent-dim: rgba(196, 122, 0, 0.12);
  --cyan: #00708a;
  --green: #0c7a3e;
  --red: #bf132f;
  --blue: #2979ff;
  --purple: #6a28c4;
  --amber: #8f6500;
  --masthead: rgba(252, 250, 246, 0.9);
  --card-shadow: 0 1px 2px rgba(60, 50, 30, 0.05), 0 1px 1px rgba(60, 50, 30, 0.03);
  --rule: rgba(40, 33, 20, 0.07);
  --maxw: 1120px;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --good: #0c7a3e;
  --bad: #bf132f;
  --chart-fg: #0b0e14;
  --chart-axis: #5a6472;
  --chart-grid: rgba(10, 14, 20, 0.08);
  --chart-btn: rgba(10, 14, 20, 0.05);
  --chart-hover-bg: rgba(255, 255, 255, 0.97);
  --chart-paper: #ffffff;
  --chart-price: #0b0e14;
  --chart-model: #0891b2;
  --chart-median: #c9a000;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #06090e;
  --bg2: #0a0f16;
  --card: #0d1117;
  --card2: #111824;
  --border: #1d2735;
  --border2: #2d3a4f;
  --txt: #e8eaed;
  --txt2: #c2c8d0;
  --txt3: #8b949e;
  --txt4: #6e7681;
  --muted: #8b949e;
  --accent: #ff9900;
  --accent-bright: #ffb347;
  --accent-dim: rgba(255, 153, 0, 0.14);
  --cyan: #00e5ff;
  --green: #00e676;
  --red: #ff2d4f;
  --blue: #60a5fa;
  --purple: #b14dff;
  --amber: #ffb000;
  --pink: #ff2d78;
  --masthead: rgba(13, 17, 23, 0.92);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --rule: rgba(255, 255, 255, 0.06);
  --good: #00c853;
  --bad: #ff1744;
  --chart-fg: #ffffff;
  --chart-axis: #8a8a8a;
  --chart-grid: rgba(255, 255, 255, 0.063);
  --chart-btn: rgba(255, 255, 255, 0.06);
  --chart-hover-bg: rgba(10, 10, 10, 0.94);
  --chart-paper: #000000;
  --chart-price: #ffffff;
  --chart-model: #22d3ee;
  --chart-median: #ffd400;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a {
  color: var(--cyan);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.cp-site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* —— Top nav —— */
.cp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--masthead);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.cp-nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.cp-brand {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--txt);
  text-decoration: none;
  white-space: nowrap;
}
.cp-brand:hover {
  text-decoration: none;
  color: var(--accent);
}
.cp-brand span {
  color: var(--accent);
}

.cp-nav-links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 1;
  flex-wrap: wrap;
}

.cp-nav-links a {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--txt2);
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  text-decoration: none;
}
.cp-nav-links a:hover {
  background: var(--accent-dim);
  color: var(--txt);
  text-decoration: none;
}
.cp-nav-links a[aria-current="page"] {
  color: var(--txt);
  background: var(--accent-dim);
  font-weight: 600;
}

.cp-nav-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-left: auto;
  min-width: 0;
}

.cp-nav-search {
  display: flex;
  align-items: center;
}
.cp-nav-search input {
  width: 9.5rem;
  max-width: 28vw;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 0.8rem;
  padding: 0.32rem 0.55rem;
  outline: none;
}
.cp-nav-search input:focus {
  border-color: var(--accent);
  width: 13rem;
}
@media (max-width: 820px) {
  .cp-nav-search {
    order: 20;
    width: 100%;
  }
  .cp-nav-search input {
    width: 100%;
    max-width: none;
  }
}

.cp-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--txt3);
}
.cp-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--txt4);
}
.cp-live[data-state="live"] .cp-live-dot {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(12, 122, 62, 0.2);
}
.cp-live[data-state="lag"] .cp-live-dot {
  background: var(--amber);
}
.cp-live[data-state="error"] .cp-live-dot {
  background: var(--red);
}
.cp-rail-price {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--txt);
}

.cp-theme-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card);
}
.cp-theme-toggle button {
  border: 0;
  background: transparent;
  color: var(--txt3);
  font-family: var(--mono);
  font-size: 0.65rem;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.cp-theme-toggle button.on {
  background: var(--accent-dim);
  color: var(--txt);
  font-weight: 700;
}

.cp-nav-burger {
  display: none;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  color: var(--txt);
  font-family: var(--mono);
  font-size: 0.7rem;
}

@media (max-width: 820px) {
  .cp-nav-burger {
    display: inline-flex;
  }
  .cp-nav-links {
    display: none;
    width: 100%;
    order: 10;
    flex-direction: column;
    align-items: stretch;
  }
  .cp-nav-links.is-open {
    display: flex;
  }
  .cp-live #cpLiveLabel {
    display: none;
  }
  .cp-nav-right {
    gap: 0.4rem;
  }
  .cp-theme-toggle button {
    padding: 0.38rem 0.6rem;
  }
}
@media (max-width: 420px) {
  .cp-rail-price {
    font-size: 0.72rem;
  }
  .cp-nav-inner {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    gap: 0.55rem;
  }
}

/* —— Page chrome —— */
.cp-main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.75rem 1.25rem 3.5rem;
}

.cp-kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt3);
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cp-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
}

.cp-h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.75rem, 5.5vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--txt);
  margin: 0 0 0.85rem;
}

/* —— Hero band with background wash —— */
.cp-hero-band {
  position: relative;
  margin: -1.75rem -1.25rem 1.75rem;
  padding: 2.5rem 1.25rem 2.25rem;
  overflow: hidden;
  isolation: isolate;
}
/* Hero must stay nested inside .cp-main — never on <main> itself, or
   margin shorthand steals horizontal auto-centering and content hugs the left edge. */
.cp-main.cp-hero-band {
  margin-left: auto;
  margin-right: auto;
}
.cp-hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hero-img, url("/images/hero-wash.svg"));
  background-size: cover;
  background-position: center 30%;
  opacity: 0.9;
}
.cp-hero-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg) 20%, transparent) 0%,
      color-mix(in srgb, var(--bg) 72%, transparent) 55%,
      var(--bg) 100%
    ),
    linear-gradient(
      90deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 55%, transparent) 45%,
      transparent 78%
    );
}
.cp-hero-band > * {
  position: relative;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}
.cp-hero-band .cp-lede {
  max-width: 40rem;
}
html[data-theme="dark"] .cp-hero-band {
  --hero-img: url("/images/hero-wash-dark.svg");
}

.cp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1.25rem 0 0;
}
.cp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.cp-btn:hover {
  text-decoration: none;
}
.cp-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.cp-btn-primary:hover {
  filter: brightness(1.05);
  color: #fff;
}
.cp-btn-ghost {
  background: var(--card);
  color: var(--txt);
  border-color: var(--border);
}
.cp-btn-ghost:hover {
  border-color: var(--accent);
  color: var(--txt);
}

.cp-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--accent);
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  padding: 0.4rem 0.85rem !important;
}
.cp-nav-cta:hover {
  filter: brightness(1.06);
  background: var(--accent) !important;
  color: #fff !important;
}

.cp-intro-note {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin: 0 0 1.75rem;
  box-shadow: var(--card-shadow);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--txt2);
}
.cp-intro-note p {
  margin: 0;
}

.cp-path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
  margin: 0 0 2rem;
}
.cp-path-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem 1.25rem;
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
  border-top: 3px solid var(--path-accent, var(--accent));
  transition: transform 0.15s, border-color 0.15s;
}
.cp-path-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  border-color: var(--path-accent, var(--accent));
}
.cp-path-card .eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--path-accent, var(--accent));
  margin: 0 0 0.45rem;
}
.cp-path-card h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  margin: 0 0 0.45rem;
  color: var(--txt);
}
.cp-path-card p {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--txt3);
}
.cp-path-card .more {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cyan);
}

.cp-section-label {
  font-family: var(--serif);
  font-size: 1.65rem;
  margin: 2rem 0 0.35rem;
  color: var(--txt);
}
.cp-section-sub {
  color: var(--txt3);
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.cp-lede {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--txt2);
  max-width: 42rem;
  margin: 0 0 1.5rem;
}

/* Durden-style dateline: soft bar · labeled facts · FREE/LIVE badges */
.cp-dateline,
.cp-meta-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.85rem;
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 86%, #7eb8c9 14%);
  box-shadow: var(--card-shadow);
}
[data-theme="dark"] .cp-dateline,
[data-theme="dark"] .cp-meta-pills {
  background: color-mix(in srgb, var(--card) 90%, var(--cyan) 10%);
}
.cp-dateline-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.cp-pill {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--txt3);
  padding: 0.15rem 0.7rem 0.15rem 0;
  margin-right: 0.7rem;
  border-right: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  text-transform: uppercase;
}
.cp-dateline-main > .cp-pill:last-of-type,
.cp-dateline-main > [data-chart-dyn-pills]:last-child .cp-pill:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}
.cp-pill strong {
  color: var(--txt);
  font-weight: 600;
  margin-left: 0.3rem;
  text-transform: none;
  letter-spacing: 0;
}
[data-chart-dyn-pills] {
  display: contents;
}
.cp-dateline-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.cp-badge {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.34rem 0.72rem;
  border-radius: 8px;
  border: none;
  color: #fff;
  line-height: 1.2;
}
.cp-badge.free {
  background: #0e7490;
}
.cp-badge.live {
  background: #92700c;
}
[data-theme="dark"] .cp-badge.free {
  background: #155e75;
}
[data-theme="dark"] .cp-badge.live {
  background: #a16207;
}

.cp-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--txt3);
  margin: 0 0 1.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg2);
  border-radius: 8px;
}
.cp-crumbs a {
  color: var(--txt2);
}
.cp-crumbs span {
  color: var(--txt4);
}

/* —— Chart card —— */
.cp-chart-card {
  background: var(--chart-paper, var(--card));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 1rem 1rem 0.75rem;
  margin-bottom: 1.75rem;
}
html[data-theme="dark"] .cp-chart-card {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.cp-chart-meta {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--txt2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1.1rem;
  margin-bottom: 0.65rem;
  min-height: 1.2em;
}
.cp-chart-meta .hi {
  color: var(--green);
  font-weight: 600;
}
.cp-chart-meta .lo {
  color: var(--red);
  font-weight: 600;
}
.cp-chart-meta .mid {
  color: var(--amber);
  font-weight: 600;
}
.cp-chart-meta .cp-meta-regime {
  font-size: 0.95rem;
  font-weight: 600;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.cp-zone-pill {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0a0e12;
  background: var(--zone, #9aa4ad);
  vertical-align: middle;
}

/* Below-chart zone / prediction strip (Durden-style chrome) */
.cp-chart-extra {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.cp-chart-extra[hidden] {
  display: none !important;
}
.cp-scale-fit-ramp {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--txt3, #71767b);
  letter-spacing: 0.02em;
}
.cp-scale-fit-ramp > span:not(.cp-scale-fit-bar) {
  white-space: nowrap;
}
.cp-scale-fit-bar {
  flex: 1;
  height: 6px;
  border-radius: 0;
  background: linear-gradient(90deg, #464646, #a07830, #ff9900, #ffdca0);
}
.cp-scale-fit-note {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: var(--txt3, #71767b);
  line-height: 1.4;
}
.cp-zone-strip h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
  color: var(--txt);
}
.cp-zone-sub {
  font-size: 0.82rem;
  color: var(--txt3);
  margin: 0 0 0.85rem;
  line-height: 1.45;
}
.cp-zone-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cp-zone-row {
  display: grid;
  grid-template-columns: minmax(110px, 140px) 1fr minmax(160px, 220px);
  gap: 0.55rem 0.75rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--txt2);
  padding: 0.28rem 0.35rem;
  border-radius: 8px;
}
.cp-zone-row.is-you {
  outline: 1px solid color-mix(in srgb, var(--zone, #4ecdc4) 55%, transparent);
  background: color-mix(in srgb, var(--zone, #4ecdc4) 10%, transparent);
}
.cp-zone-name {
  color: var(--zone, var(--txt));
  font-weight: 600;
}
.cp-zone-name em {
  font-style: normal;
  color: #4ecdc4;
  margin-left: 0.25rem;
  font-size: 0.68rem;
}
.cp-zone-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
  overflow: hidden;
}
.cp-zone-track::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--txt4);
}
.cp-zone-bar {
  position: absolute;
  top: 1px;
  bottom: 1px;
  border-radius: 999px;
  background: var(--zone, var(--accent));
  max-width: 50%;
}
.cp-zone-bar.pos {
  left: 50%;
}
.cp-zone-bar.neg {
  right: 50%;
}
.cp-zone-stats {
  text-align: right;
  white-space: nowrap;
}
.cp-zone-stats strong {
  color: var(--txt);
}
@media (max-width: 720px) {
  .cp-zone-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .cp-zone-stats {
    text-align: left;
  }
}

.cp-fwd-chart {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.28rem 0.6rem 0.22rem;
  overflow: hidden;
}
.cp-fwd-row,
.cp-fwd-axis {
  display: grid;
  grid-template-columns: 8.4rem 1fr;
  gap: 0.2rem 0.55rem;
  align-items: center;
  min-height: 1.05rem;
}
.cp-fwd-row {
  padding: 0;
}
.cp-fwd-row.is-you .cp-fwd-name {
  outline: 1px solid color-mix(in srgb, var(--zone, #4ecdc4) 55%, transparent);
  background: color-mix(in srgb, var(--zone, #4ecdc4) 10%, transparent);
  border-radius: 6px;
  padding: 0.12rem 0.35rem;
}
.cp-fwd-name {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--zone, var(--txt));
  text-align: right;
  line-height: 1.2;
  white-space: nowrap;
}
.cp-fwd-name em {
  font-style: normal;
  color: #4ecdc4;
  font-size: 0.62rem;
  margin-left: 0.15rem;
}
.cp-fwd-track {
  position: relative;
  height: 14px;
  border-radius: 2px;
  background: transparent;
}
.cp-fwd-zero {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--txt3);
  z-index: 1;
}
.cp-fwd-bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 2px;
  background: var(--zone, var(--accent));
  display: flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
  z-index: 2;
}
.cp-fwd-bar.pos.is-in {
  justify-content: flex-end;
  padding-right: 0.4rem;
  color: #081018;
}
.cp-fwd-bar.neg.is-in {
  justify-content: flex-start;
  padding-left: 0.4rem;
  color: #fff;
}
.cp-fwd-out {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--zone, var(--txt));
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;
}
.cp-fwd-out.pos {
  transform: translateX(8px);
}
.cp-fwd-out.neg {
  transform: translateX(calc(-100% - 8px));
}
.cp-fwd-stat {
  display: none;
}
.cp-fwd-axis {
  min-height: 1.05rem;
  margin-top: 0.15rem;
}
.cp-fwd-axis-track {
  height: 1.05rem;
  background: transparent;
}
.cp-fwd-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--txt3);
}
.cp-fwd-axis-label {
  margin: 0.1rem 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--txt3);
}
@media (max-width: 720px) {
  .cp-fwd-row,
  .cp-fwd-axis {
    grid-template-columns: 5.8rem 1fr;
    gap: 0.3rem 0.4rem;
  }
  .cp-fwd-name {
    font-size: 0.6rem;
    white-space: normal;
    text-align: left;
  }
  .cp-fwd-name em {
    display: none;
  }
  .cp-fwd-stat {
    display: block;
    font-size: 0.56rem;
    font-weight: 700;
    color: var(--zone, var(--txt));
    margin-top: 0.1rem;
  }
  .cp-fwd-bar,
  .cp-fwd-out {
    font-size: 0;
    color: transparent;
  }
}

.cp-chart-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.7rem;
  margin-bottom: 0.45rem;
}
.cp-chart-tools-grow {
  flex: 1 1 8px;
  min-width: 8px;
}
.cp-scale-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}
.cp-zoom-hint {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt4);
  user-select: none;
}
.cp-chart-tool {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--txt3);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
}
.cp-chart-tool:hover {
  border-color: color-mix(in srgb, var(--txt) 28%, transparent);
  color: var(--txt);
}
.cp-chart-tool.cp-scale {
  border: 0;
  background: transparent;
  letter-spacing: 0.16em;
  padding: 0.22rem 0.55rem;
}
.cp-chart-tool.cp-scale.is-on {
  background: var(--chart-model);
  color: #000;
  font-weight: 700;
  border-color: transparent;
}
html[data-theme="light"] .cp-chart-tool.cp-scale.is-on {
  color: #fff;
}
.cp-chart-tool.is-on:not(.cp-scale) {
  border-color: var(--chart-model);
  color: var(--txt);
}

.cp-chart-plot {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.cp-chart-loading,
.cp-chart-error {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--txt3);
  padding: 3rem 1rem;
  text-align: center;
}
.cp-chart-error {
  color: var(--red);
}

.cp-attrib {
  font-size: 0.78rem;
  color: var(--txt4);
  margin: 0.35rem 0 0;
}

/* —— Prose cards —— */
.cp-prose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.cp-prose-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--card-shadow);
}
.cp-prose-card h2 {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0 0 0.65rem;
  color: var(--txt);
}
.cp-prose-card p,
.cp-prose-card li {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--txt2);
  margin: 0 0 0.65rem;
}
.cp-prose-card ul {
  margin: 0;
  padding-left: 1.1rem;
}
.cp-prose-card li {
  margin-bottom: 0.4rem;
}

.cp-related {
  margin-top: 1.5rem;
}
.cp-related h2 {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt4);
  margin: 0 0 0.75rem;
}
.cp-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cp-related-list a {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
  color: var(--txt2);
  text-decoration: none;
}
.cp-related-list a:hover {
  border-color: var(--accent);
  color: var(--txt);
}

/* —— Library index —— */
.cp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
}
.cp-stat {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  min-width: 110px;
  box-shadow: var(--card-shadow);
}
.cp-stat .k {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--txt4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cp-stat .v {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--txt);
  margin-top: 0.15rem;
}

.cp-tier {
  margin: 2rem 0 1rem;
}
.cp-tier h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin: 0 0 0.35rem;
}
.cp-tier p {
  color: var(--txt3);
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.cp-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
@media (min-width: 1100px) {
  .cp-chart-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.cp-chart-tile {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.cp-chart-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(60, 50, 30, 0.08);
  text-decoration: none;
}
html[data-theme="dark"] .cp-chart-tile:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.cp-chart-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--card2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
html[data-theme="dark"] .cp-chart-thumb {
  background: #0d1117;
}
.cp-chart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cp-chart-thumb .cp-thumb-dark {
  display: none;
}
html[data-theme="dark"] .cp-chart-thumb .cp-thumb-light {
  display: none;
}
html[data-theme="dark"] .cp-chart-thumb .cp-thumb-dark {
  display: block;
}
.cp-chart-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(10, 14, 20, 0.12) 100%
  );
  pointer-events: none;
}
html[data-theme="dark"] .cp-chart-thumb::after {
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(13, 17, 23, 0.35) 100%
  );
}
.cp-chart-tile-body {
  padding: 0.85rem 0.95rem 1.05rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cp-chart-tile h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
  color: var(--txt);
}
.cp-chart-tile p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--txt3);
}
.cp-chart-tile .tier-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.cp-tier-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt2);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  margin: 0 0 0.65rem;
}
.cp-tier h2 {
  font-family: var(--serif);
  font-size: 1.55rem;
  margin: 0 0 0.25rem;
}
.cp-tier > p {
  color: var(--txt3);
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
}
.cp-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.85rem 0 0;
}
.cp-status-pill {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--txt2);
}
.cp-status-pill.live {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 35%, var(--border));
  background: color-mix(in srgb, var(--green) 10%, var(--card));
}
.cp-status-pill.free {
  color: var(--cyan);
  border-color: color-mix(in srgb, var(--cyan) 35%, var(--border));
}

/* —— Home —— */
.cp-hero {
  padding: 1rem 0 2rem;
}
.cp-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.cp-feature {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: var(--card-shadow);
}
.cp-feature h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}
.cp-feature p {
  color: var(--txt2);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 0.85rem;
}
.cp-feature a {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
}

.cp-home-note {
  margin: 2rem 0 0;
  font-size: 0.9rem;
  color: var(--txt3);
}

.cp-note-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 1.35rem;
  box-shadow: var(--card-shadow);
}
.cp-note-card p {
  margin: 0 0 0.85rem;
  color: var(--txt2);
  line-height: 1.55;
}
.cp-note-card a {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
}

.cp-table-wrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}
.cp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.75rem;
}
.cp-table th,
.cp-table td {
  padding: 0.55rem 0.7rem;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  color: var(--txt);
}
.cp-table th {
  font-weight: 600;
  color: var(--txt3);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.65rem;
}
.cp-table th:first-child,
.cp-table td:first-child {
  text-align: left;
}
.cp-table tbody tr:last-child td {
  border-bottom: none;
}
.cp-table .sub {
  display: block;
  color: var(--txt3);
  font-size: 0.65rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.cp-table .is-good { color: var(--green, #00c853); }
.cp-table .is-bad { color: var(--red, #ff1744); }
.cp-table .is-control td { color: var(--txt3); }
.cp-table a { font-weight: 600; }
.cp-table .cp-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.28rem;
}
.cp-table .flag {
  display: inline-block;
  padding: 0.08rem 0.32rem;
  border-radius: 4px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255, 23, 68, 0.14);
  color: var(--red, #ff1744);
}
.cp-table .flag.is-warn {
  background: rgba(255, 171, 0, 0.16);
  color: var(--amber, #d4a017);
}
.cp-table tr.is-incomplete td { opacity: 0.72; }

/* —— Footer —— */
.cp-footer {
  border-top: 1px solid var(--border);
  background: var(--bg2);
  margin-top: auto;
}
.cp-footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--txt3);
}
.cp-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}
.cp-footer-links a {
  color: var(--txt2);
}
.cp-footer-mark {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--txt4);
}

/* Plotly overrides */
.js-plotly-plot .plotly .modebar {
  display: none !important;
}
.cp-chart-plot > .plot-container,
.cp-chart-plot .svg-container {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* —— Valuation composite —— */
.cp-snap {
  --snap-bg: #ffffff;
  --snap-fg: var(--txt);
  --snap-muted: var(--txt3);
  --snap-faint: var(--txt4);
  --snap-line: var(--border);
  --snap-low: #2979ff;
  --snap-mid: #c9a000;
  --snap-high: #d85a1a;
  --snap-panel: rgba(26, 31, 38, 0.035);
  --snap-hover: var(--txt);
  --snap-border: var(--border);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 1.75rem;
  padding: 0;
  border-radius: 16px;
  background: var(--snap-bg);
  color: var(--snap-fg);
  border: 1px solid var(--snap-border);
}
html[data-theme="dark"] .cp-snap {
  --snap-bg: #070b12;
  --snap-fg: #f4f6f8;
  --snap-muted: rgba(244, 246, 248, 0.55);
  --snap-faint: rgba(244, 246, 248, 0.32);
  --snap-line: rgba(244, 246, 248, 0.12);
  --snap-low: #3b9eff;
  --snap-mid: #e8c547;
  --snap-high: #ff7a3d;
  --snap-panel: rgba(255, 255, 255, 0.04);
  --snap-hover: #fff;
  --snap-border: rgba(255, 255, 255, 0.08);
}
.cp-sw-page .cp-snap {
  margin: 0 0 2.5rem;
}
.cp-snap-tools {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 3;
  display: flex;
  gap: 0.35rem;
}
.cp-snap-art {
  padding: 1.2rem 1.4rem 1rem;
}
.cp-snap-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-right: 8.5rem;
}
.cp-snap-brand {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}
.cp-snap-brand span {
  color: var(--snap-faint);
  font-weight: 500;
}
.cp-snap-top time {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--snap-muted);
  letter-spacing: 0.04em;
}
.cp-snap-kicker {
  margin: 1.15rem 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--snap-faint);
}
.cp-snap-word {
  margin: 0.15rem 0 0;
  text-align: center;
  font-family: var(--sans);
  font-size: clamp(3.4rem, 10vw, 5.6rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 0.92;
}
.cp-snap[data-stage="buy"] .cp-snap-word,
.cp-snap[data-stage="leverage-buy"] .cp-snap-word {
  color: var(--snap-low);
}
.cp-snap[data-stage="sell"] .cp-snap-word,
.cp-snap[data-stage="take-profits"] .cp-snap-word {
  color: var(--snap-high);
}
.cp-snap-sub {
  margin: 0.45rem 0 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--snap-muted);
}
.cp-snap-meter {
  display: grid;
  grid-template-columns: auto minmax(0, 28rem) auto;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin: 1.15rem auto 0;
  max-width: 36rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--snap-faint);
}
.cp-snap-track {
  position: relative;
  height: 2px;
  background: var(--snap-line);
}
.cp-snap-track i {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: 0;
  border-radius: 50%;
  background: var(--snap-fg);
  border: 2px solid var(--snap-bg);
  transform: translate(-50%, -50%);
}
.cp-snap[data-stage="buy"] .cp-snap-track i,
.cp-snap[data-stage="leverage-buy"] .cp-snap-track i {
  background: var(--snap-low);
}
.cp-snap[data-stage="sell"] .cp-snap-track i,
.cp-snap[data-stage="take-profits"] .cp-snap-track i {
  background: var(--snap-high);
}
.cp-snap-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--snap-line);
  text-align: center;
}
.cp-snap-stats strong {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cp-snap-stats span {
  display: block;
  margin-top: 0.28rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--snap-faint);
}
.cp-snap[data-stage="buy"] .cp-snap-stats div:first-child strong,
.cp-snap[data-stage="leverage-buy"] .cp-snap-stats div:first-child strong {
  color: var(--snap-low);
}
.cp-snap[data-stage="sell"] .cp-snap-stats div:first-child strong,
.cp-snap[data-stage="take-profits"] .cp-snap-stats div:first-child strong {
  color: var(--snap-high);
}
.cp-snap-plates {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 1.05rem 0 0;
}
.cp-snap-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.55rem 0.2rem 0.45rem;
  border-radius: 8px;
  background: var(--snap-panel);
  border-top: 2px solid var(--snap-mid);
  text-decoration: none;
  color: inherit;
  text-align: center;
}
.cp-snap-plate:hover {
  text-decoration: none;
  color: var(--snap-hover);
}
.cp-snap-plate[data-band="low"] { border-top-color: var(--snap-low); }
.cp-snap-plate[data-band="high"] { border-top-color: var(--snap-high); }
.cp-snap-plate strong {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cp-snap-plate em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.cp-snap-plate[data-band="low"] em { color: var(--snap-low); }
.cp-snap-plate[data-band="mid"] em { color: var(--snap-mid); }
.cp-snap-plate[data-band="high"] em { color: var(--snap-high); }
.cp-snap-plate span {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--snap-faint);
}
.cp-snap-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--snap-line);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--snap-faint);
}
.cp-snap a { color: inherit; }

@media (max-width: 820px) {
  .cp-snap-top { padding-right: 0; padding-top: 2.1rem; }
  .cp-snap-word { font-size: 3.2rem; }
  .cp-snap-foot { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .cp-snap-art { padding: 1rem 0.85rem 0.9rem; }
  .cp-snap-stats strong { font-size: 1.05rem; }
  .cp-snap-plates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-snap-foot { flex-direction: column; align-items: flex-start; }
}