/* Shared integration only. Each Canvas owns its palette, layout and typography
   in canvas-<name>.css; no common content template is imposed here. */
:root[data-demo] {
  --lm-canvas-content-width: var(--lm-page-inner-width);
}
/* Focus mode may give diagrams more room, without stretching prose indefinitely. */
:root.reading-focus[data-demo] {
  --lm-canvas-content-width: 80rem;
}
.demo-page :is(.content, .main, .shell, .hero-grid > *, .hero-inner > *, .arch-col,
  .core, .timeline-wrap > *, .plugin-layout > *, .stage-detail, .memory-detail > *,
  .scenario > *, .masthead > *, .section-inner, .wrap) { min-width: 0; }
.demo-page :is(.timeline, .memory-map, .flow, .table-wrap) { scrollbar-width: thin; }
.demo-page :is(.atlas-nav, .nav-wrap) { top: var(--lm-chrome-offset); }

/* Only the shared blog navigation is glass. Chapter bars and trace panels
   retain the work's own opaque paper so diagrams stay crisp beneath them. */
.demo-page :is(.atlas-nav, .nav-wrap, .rail) {
  background: var(--bg, var(--paper));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-demo="claude-code-harness"] .demo-page :is(section, .hero),
[data-demo="deepseek-harness"] .demo-page :is(.section, .hero),
[data-demo="ai-talent-after-harness"] .demo-page .section {
  scroll-margin-top: calc(var(--header-height) + 82px);
}
.reading-focus[data-demo="claude-code-harness"] .demo-page :is(section, .hero),
.reading-focus[data-demo="deepseek-harness"] .demo-page :is(.section, .hero) {
  scroll-margin-top: calc(var(--header-height) + 24px);
}
@media (prefers-reduced-motion: reduce) {
  .demo-page *, .demo-page *::before, .demo-page *::after { animation: none !important; transition: none !important; }
}