/* salaiptv.com/demo: the app in a frame scaled to the window, a slim bar
   with the keys below it. The frame is the TV's 1920x1080 and the page
   scales the frame itself (demo.js), so inside it the app's own rect maths
   stays right; dismissed, the bar leaves the frame the whole window.
   Tokens and type from the site's styles.css. */
html, body.demo-page { height: 100%; }
body.demo-page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--black);
}

.demo-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.demo-app {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  border: 0;
  background: var(--black);
  transform-origin: 0 0;
}
.demo-app:focus { outline: none; }

.demo-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem var(--gutter);
  border-top: 1px solid var(--line);
  background: var(--raised);
  color: var(--paper-2);
  font-size: 0.9rem;
  line-height: 1.4;
}
.demo-keys { flex: 1; min-width: 0; }
.demo-back {
  flex: none;
  color: var(--paper);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.demo-back:hover { color: var(--violet); }
.demo-dismiss {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--paper-2);
  cursor: pointer;
}
.demo-dismiss:hover { color: var(--paper); border-color: var(--paper-2); }
body.bar-hidden .demo-bar { display: none; }

/* A phone has no arrow keys; the bar makes room for the words anyway. */
@media (max-width: 560px) {
  .demo-bar { flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.85rem; }
  .demo-keys { flex-basis: 100%; }
}