/* Website demo: banner and guided tour (the app's own styles do the rest). */
.demo-bar { position: sticky; top: 0; z-index: 70; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  padding: 8px 18px; font-size: 14px; color: #031522; background: linear-gradient(90deg, #3fd0ff, #b48cff); }
.demo-bar b { font-weight: 800; }
.demo-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.demo-btn { font: inherit; font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 0; cursor: pointer;
  background: #031522; color: #eef3ff; text-decoration: none; }
.demo-btn.ghost { background: rgba(3, 21, 34, .12); color: #031522; border: 1px solid rgba(3, 21, 34, .4); }
.demo-link { color: #031522; font-weight: 600; text-decoration: none; }
.demo-btn:focus-visible, .demo-link:focus-visible { outline: 2px solid #031522; outline-offset: 2px; }
body.night .demo-bar { background: #300; color: #ff7070; }
body.night .demo-bar .demo-btn { background: #600; color: #ffb0b0; } body.night .demo-link { color: #ff7070; }

.tour-ov { position: fixed; inset: 0; z-index: 90; display: none; }
.tour-ov.on { display: block; }
.tour-hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(2, 4, 12, .72); outline: 2px solid #3fd0ff;
  transition: left .25s, top .25s, width .25s, height .25s; pointer-events: none; }
.tour-card { position: fixed; z-index: 91; display: none; width: 380px; box-sizing: border-box; padding: 18px 18px 14px; border-radius: 16px;
  background: #0d1633; color: #eef3ff; border: 1px solid #3fd0ff; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); transition: opacity .2s; }
.tour-card.on { display: block; }
.tour-step { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #3fd0ff; font-weight: 700; }
.tour-card h3 { margin: 6px 0 8px; font-size: 20px; }
.tour-card p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: #c9d2ef; }
.tour-btns { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tour-btns > span { display: flex; gap: 8px; }
.tour-x { background: none; border: 0; color: #8d9ac0; font: inherit; font-size: 13px; cursor: pointer; padding: 6px 2px; }
.tour-b, .tour-n { font: inherit; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 10px; cursor: pointer; text-decoration: none; }
.tour-b { background: transparent; color: #eef3ff; border: 1px solid rgba(84, 196, 255, .4); }
.tour-n { background: #3fd0ff; color: #031522; border: 0; }
.tour-card button:focus-visible, .tour-card a:focus-visible { outline: 2px solid #eef3ff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-card { transition: none; } }
@media (max-width: 700px) {
  .demo-bar { padding: 6px 12px; font-size: 12.5px; gap: 6px 10px; }
  .demo-bar > span:first-child { flex-basis: 100%; }
  .demo-btn { font-size: 12px; padding: 5px 10px; }
}
/* windows (picture viewer, Enhance, settings) open above the demo banner */
.modal { z-index: 80; } .modal.enh { z-index: 81; }
#supportCard { display: none !important; }      /* the website demo has no log to save */