/* Outer educational surfaces only. Load after the V8 styles; semantic samples keep their own paints. */
:root{--atlas-demo-surface:#f1f1ed}
.detail-layout .demo-panel>.motion-demo,.compare-grid .compare-host.motion-demo{background:var(--atlas-demo-surface)}
.detail-layout .motion-demo>.motion-view-label,.compare-grid .motion-demo>.motion-view-label{background:var(--atlas-demo-surface)}
.detail-layout .motion-demo .motion-stage,.compare-grid .motion-demo .motion-stage,.detail-layout .motion-demo .motion-canvas,.compare-grid .motion-demo .motion-canvas{background:var(--atlas-demo-surface)}
.detail-layout .motion-demo .motion-plan-area,.compare-grid .motion-demo .motion-plan-area,.detail-layout .motion-demo .motion-plan-canvas,.compare-grid .motion-demo .motion-plan-canvas{background:var(--atlas-demo-surface)}
/* A loading or static replacement uses the same plane before/without Canvas painting. */
.detail-layout .demo-panel>.example-stage,.detail-layout .example-stage>.static-demo,.detail-layout .example-stage>.editorial-art,.detail-layout .example-stage>.ui-example{background:var(--atlas-demo-surface)}
.detail-layout .example-stage>svg,.detail-layout .example-stage>.static-demo>svg{background:var(--atlas-demo-surface)}
.detail-layout .example-stage>svg>rect:first-child[width="360"][height="220"],.detail-layout .example-stage>.static-demo>svg>rect:first-child[width="360"][height="220"]{fill:var(--atlas-demo-surface)}
/* Color science keeps its internal comparison whites, checkerboards, gamut and RGB/P3 paints. */
.detail-layout .example-stage>.color-example-v5{background:var(--atlas-demo-surface)}