/* Shared demonstration ribbon — static band, never sticky, never covers content.
   Uses the host page's tokens when present; the fallbacks give a plain light band.
   The band's height is reserved here, in CSS that loads with the page, and the
   band itself is taken out of the flow: when the script lands it, nothing below
   it moves (no layout shift). One row above 900px; two text lines plus the
   link row below it. */
:root { --demo-ribbon-reserve: 44px; }
@media (max-width: 900px) { :root { --demo-ribbon-reserve: 86px; } }
html body { padding-top: var(--demo-ribbon-reserve); }
@media (scripting: none) { html body { padding-top: 0; } }
.demo-ribbon {
  --_bg: var(--surface, #fff);
  --_fg: var(--text, #111);
  --_line: var(--line, #ddd);
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 120;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.6rem;
  row-gap: 0;
  height: var(--demo-ribbon-reserve);
  overflow: hidden;
  padding: 0 1rem;
  border-bottom: 1px solid var(--_line);
  background: var(--_bg);
  color: var(--_fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", Arial, sans-serif; /* system stack: no webfont swap, no layout shift */
  font-size: max(0.78rem, 12px);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.demo-ribbon__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.demo-ribbon__text { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ux m5 — the highest-intent click in the whole portfolio was 18px tall. */
.demo-ribbon__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  padding-block: 0.15rem;
  padding-inline: 8px;
  border-radius: 6px;
}
.demo-ribbon__link:hover { text-decoration-thickness: 2px; }
.demo-ribbon__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.demo-ribbon__link::before { content: "·"; margin-inline-end: 0.6rem; opacity: 0.55; text-decoration: none; }
@media (max-width: 900px) {
  .demo-ribbon { padding-inline: 0.75rem; align-content: center; }
  /* The two-line text takes the full width here, so the dot would wrap onto a row of its own. */
  .demo-ribbon__dot { display: none; }
  .demo-ribbon__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-overflow: clip; }
  .demo-ribbon__link::before { content: none; }
  .demo-ribbon__link { flex-basis: 100%; justify-content: center; min-height: 40px; padding-block: 0; }
}
@media (max-width: 480px) {
  .demo-ribbon { font-size: max(0.72rem, 12px); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-ribbon, .demo-ribbon__link { transition: none; }
}