/* Copyright (c) 2024-2026 Kilotronic LLC. All rights reserved. */
/* Device frames + layout for the live demo (see demo.js). The frames'
   CONTENT is styled by the vendored app CSS inside each shadow root; this
   file styles only the marketing-page side: bezels, arrangement, and the
   document-level font faces shadow content needs (@font-face is inert
   inside shadow roots). Inter + Bricolage are already declared by
   styles.css; the demo additionally needs the prompt-hero card face (Averia)
   and the host glyph faces (Material Symbols, both fills) so any host icon
   renders instead of tofu. */

@font-face {
  font-family: "Averia Serif Libre";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/demo/vendor/third-party/averia-serif-libre-700.woff2")
    format("woff2");
}
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("/demo/vendor/third-party/MaterialSymbolsRounded-Filled.woff2")
    format("woff2");
}
@font-face {
  font-family: "Material Symbols Rounded Outline";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("/demo/vendor/third-party/MaterialSymbolsRounded-Outline.woff2")
    format("woff2");
}

/* ─── Hero demo: two equal portrait frames side by side ───────────────────── */

.hero-demo {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  margin: 2.5rem auto 0;
  max-width: 40rem;
  text-align: initial;
}

.demo-frame {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: #101014;
  border: 3px solid rgba(0, 0, 0, 0.55);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Both hero frames share one portrait shape (sized by demo.js) and split the
   row evenly, so they read as a matched pair. */
.hero-demo .demo-frame {
  flex: 1 1 0;
  min-width: 0;
}

/* ─── Games demo (in "The games" band) ────────────────────────────────────── */
/* Two frames in the same portrait shape as the hero pair: a guided guessing
   turn and a Blanks deck, side by side. */

.games-demo {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  margin: 1.75rem auto 0;
  max-width: 40rem;
}

.games-demo .demo-frame {
  flex: 1 1 0;
  min-width: 0;
}

.demo-caption {
  font-size: 0.8rem;
  opacity: 0.75;
  text-align: center;
  margin-top: 0.75rem;
}