/* demo.css — the loud "this is a simulation" layer + chapter chrome. Additive only. */
:root { --demo-banner-h: 40px; }
body { padding-top: var(--demo-banner-h) !important; }

.demo-banner {
  position: fixed; top: 0; left: 0; right: 0; height: var(--demo-banner-h); z-index: 9000;
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  font: 600 12px/1 system-ui, -apple-system, sans-serif; color: #3a2a05;
  background: repeating-linear-gradient(135deg, #fbbf24 0 22px, #f6b913 22px 44px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.28); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}
.demo-banner b { font-weight: 800; letter-spacing: 0.3px; }
.demo-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #7a1f1f;
  box-shadow: 0 0 0 3px rgba(122, 31, 31, 0.22); animation: demo-blink 1.8s ease infinite; flex: none;
}
@keyframes demo-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.32; } }
.demo-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-grow { flex: 1 1 auto; }
.demo-chip {
  font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.13); white-space: nowrap;
}
.demo-btn {
  font: 700 11px/1 system-ui; color: #3a2a05; background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.28); border-radius: 999px; padding: 5px 11px; cursor: pointer;
}
.demo-btn:hover { background: rgba(255, 255, 255, 0.9); }

/* chapter-picker chip (a button) + its dropdown */
.demo-chip-btn { cursor: pointer; border: 1px solid rgba(0, 0, 0, 0.28); }
.demo-chip-btn:hover { background: rgba(0, 0, 0, 0.2); }

.demo-menu {
  position: fixed; z-index: 9500; display: none; width: 300px; max-width: 92vw;
  background: #0e2a23; color: #e8f4ee; border: 1px solid rgba(216, 189, 138, 0.42);
  border-radius: 12px; box-shadow: 0 18px 50px rgba(2, 14, 11, 0.6); overflow: hidden;
  font: 500 13px/1.4 system-ui, -apple-system, sans-serif;
}
.demo-menu.open { display: block; }
.demo-menu-head {
  padding: 9px 14px; font-weight: 800; font-size: 10.5px; letter-spacing: 0.7px;
  text-transform: uppercase; color: #8fb9ab; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.demo-menu-item { display: flex; gap: 11px; align-items: flex-start; padding: 10px 14px; text-decoration: none; color: inherit; cursor: pointer; }
.demo-menu-item:hover { background: rgba(45, 212, 191, 0.1); }
.demo-menu-item.current { background: rgba(45, 212, 191, 0.16); }
.demo-menu-item.disabled { opacity: 0.5; cursor: default; }
.demo-menu-item.disabled:hover { background: none; }
.demo-menu-num {
  flex: 0 0 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.09);
  display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #cfe7df; margin-top: 1px;
}
.demo-menu-item.current .demo-menu-num { background: #2dd4bf; color: #06231c; }
.demo-menu-body { display: flex; flex-direction: column; gap: 1px; }
.demo-menu-name { font-weight: 700; }
.demo-menu-name em { font-weight: 600; font-style: normal; opacity: 0.7; font-size: 11px; }
.demo-menu-desc { font-size: 11.5px; opacity: 0.72; line-height: 1.35; }

@media (max-width: 720px) { .demo-text { display: none; } }