/* Separate white-background preview, using the main website's brand tokens. */
.demos-page--light {
  --demo-surface: #ffffff;
  --demo-border: #e0e5eb;
  --demo-muted: #5f6873;
  --demo-blue: #0074bd;
  color-scheme: light;
}

.demos-page--light .demo-stage {
  color: var(--text);
  background: radial-gradient(ellipse at 86% 3%, #edf5fb 0, transparent 36%), var(--bg);
}
.demos-page--light .demo-stage :focus-visible { outline-color: var(--accent-ink); }
.demos-page--light .demo-eyebrow { color: var(--accent-ink); }
.demos-page--light .status-dot { background: #15803d; }
.demos-page--light .demo-eyebrow .status-dot { box-shadow: 0 0 0 4px rgb(21 128 61 / 8%); }
.demos-page--light .demo-hero h1 span {
  color: var(--accent-ink);
  background-image: linear-gradient(115deg, #0074bd, #0069a8);
}
.demos-page--light .hero-description { color: var(--text-soft); }
.demos-page--light .hero-aside { color: var(--text-faint); }
.demos-page--light .featured-demo {
  color: #fff;
  border-color: #d0d9e3;
  box-shadow: 0 20px 50px rgb(20 40 70 / 14%);
}

.demos-page--light .demo-proof { color: var(--text-soft); }
.demos-page--light .demo-proof svg { stroke: var(--accent-ink); }
.demos-page--light .demo-stage .section-kicker { color: var(--accent-ink); }
.demos-page--light .channel-link { color: var(--text-soft); }
.demos-page--light .channel-link:hover { color: var(--accent-dark); }
.demos-page--light .channel-link > span[aria-hidden] { color: var(--accent-ink); }

.demos-page--light .library-tools { background: #f5f7fa; }
.demos-page--light .demo-search svg { stroke: var(--text-faint); }
.demos-page--light .demo-search input,
.demos-page--light .demo-sort select {
  background: #fff;
  color: var(--text);
  border-color: #a3aebd;
  color-scheme: light;
}
.demos-page--light .demo-search input::placeholder { color: var(--text-faint); }
.demos-page--light .filter-button { color: var(--text-soft); }
.demos-page--light .filter-button:hover { background: #e6ebf1; }
.demos-page--light .filter-button[aria-pressed="true"] {
  background: #e1effa;
  border-color: #9bbfdb;
  color: #005c95;
}
.demos-page--light .filter-count { opacity: 1; }
.demos-page--light .demo-sort > svg { color: var(--text-faint); }
.demos-page--light .library-status { color: var(--text-faint); }

.demos-page--light .demo-card { box-shadow: 0 3px 14px rgb(16 18 22 / 4%); }
.demos-page--light .game-genre { color: var(--accent-ink); }
.demos-page--light .demo-card h3 { color: var(--text); }
.demos-page--light .game-hardware { color: var(--text-soft); }
.demos-page--light .card-bottom { border-color: var(--border); }
.demos-page--light .card-bottom time { color: var(--text-faint); }
.demos-page--light .watch-label { color: var(--accent-ink); }
.demos-page--light .empty-state { border-color: #a3aebd; background: #f8fafc; }
.demos-page--light .empty-state > svg { stroke: var(--accent-ink); }
.demos-page--light .load-more { background: #eaf3fa; border-color: #9bbfdb; color: #005c95; }
.demos-page--light .load-more:hover { background: #dcecf8; }
.demos-page--light .page-links a { color: var(--accent-ink); }
.demos-page--light .recording-note,
.demos-page--light .noscript-note { color: var(--text-faint); }

@media (hover: hover) {
  .demos-page--light .demo-card:hover { border-color: #70b0e0; box-shadow: 0 14px 32px rgb(16 45 75 / 12%); }
  .demos-page--light .featured-demo:hover { border-color: var(--accent-ink); }
}