/* Live demo embed: a window frame around /app-demo.html (the clickable
 * Kaptin replica with its guided tour). The demo styles itself. */
.app-frame {
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
}
.app-frame-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: var(--paper-soft);
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 600;
}
.app-frame-dots { display: inline-flex; gap: 6px; }
.app-frame-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); }
.app-frame-dots i:first-child { background: #ff6159; }
.app-frame-dots i:nth-child(2) { background: #ffbd2e; }
.app-frame-dots i:last-child { background: #28c941; }
.app-frame-title { opacity: 0.75; }
.app-frame-view {
  display: block;
  width: 100%;
  height: min(760px, calc(100vh - 140px));
  min-height: 560px;
  border: 0;
  background: var(--card);
}
.app-frame-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.app-frame-mobile { display: none; font-size: 0.9rem; opacity: 0.8; }

@media (max-width: 860px) {
  .app-frame-view { height: 620px; }
  .app-frame-mobile { display: inline; }
}