.demo-banner{box-sizing:border-box;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 20px;background:#17372f;color:#eafff6;font:14px/1.5 sans-serif;border-bottom:1px solid #57ceaf;position:relative;z-index:20}.demo-banner a{color:#afffe1;font-weight:700;flex-shrink:0;text-decoration:underline}.demo-actions{padding:0 24px 20px}.demo-actions a{display:inline-block;padding:12px 18px;border-radius:8px;background:#daf9c4;color:#15251d;font-weight:700;text-decoration:none}.demo-mode .screen{height:calc(100dvh - 68px)}.demo-mode:has(#raceScreen.active) .demo-banner{display:none}.demo-mode #raceScreen{height:100dvh}@media(max-width:600px){.demo-banner{padding:10px 14px;flex-wrap:wrap;gap:5px;font-size:12px}.demo-mode .screen{height:calc(100dvh - 90px)}}

/* Let the setup fill the actual space below the wrapping banner and navigation. */
.race-page.demo-mode{display:flex;flex-direction:column;height:100dvh}.race-page.demo-mode>.site-header,.race-page.demo-mode>.demo-banner{flex-shrink:0}.race-page.demo-mode #setupScreen{height:auto;min-height:0;flex:1}