/* The banner on each demo page. Loads after the page's own sheet and uses its tokens. */
body.demo-page { display: flex; flex-direction: column; }
.demo-banner { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; padding: 6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px)); background: var(--deck-2); border-bottom: 1px solid var(--edge); color: var(--sand); font-size: 13px; line-height: 1.4; text-align: center; }
.demo-banner a { color: var(--sky); }
body.demo-page > .split { flex: 1 0 auto; min-height: 0; }
body.demo-page > .shell { flex: 1 1 0%; min-height: 0; height: auto; }
.demo-say { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; margin: 0; max-width: calc(100% - 32px); padding: 9px 14px; border-radius: 9px; background: var(--deck-2); border: 1px solid var(--edge); color: var(--cream); font-size: 13.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }