:root { --frame-bg: #0F1324; --frame-fg: #F6F7FA; }
/* A demo shown inside the portfolio: the portfolio's colors and name wrap the demo, so it
   reads as a window inside the portfolio. --frame-bg and --frame-fg are set above by the build.
   Loaded only on demos embedded under /work/. */
html { background: var(--frame-bg); --frame-pad: clamp(8px, 2vw, 24px); }
body.framed { margin: 0 var(--frame-pad) var(--frame-pad); border-radius: 0 0 16px 16px; }
.framed > footer { border-radius: 0 0 16px 16px; }
.frame-bar { position: sticky; top: 0; z-index: 30; margin-inline: calc(-1 * var(--frame-pad)); background: var(--frame-bg); color: var(--frame-fg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.85rem; }
.frame-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 10px calc(var(--frame-pad) + 8px); }
.frame-mark { display: grid; color: var(--frame-fg); text-decoration: none; font-weight: 700; font-size: 1rem; line-height: 1.2; }
.frame-mark small { font-weight: 500; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.frame-note { flex: 1; opacity: 0.85; }
.frame-bar .demo-back { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--frame-fg); color: var(--frame-bg); font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.frame-bar .demo-back:hover { text-decoration: underline; }
.frame-bar a:focus-visible { outline-color: var(--frame-fg); }
html:has(.frame-bar) [id] { scroll-margin-top: 80px; }
@media (max-width: 560px) { .frame-bar .demo-more, .frame-mark small { display: none; } .frame-bar .demo-back { min-height: 36px; padding: 0 14px; font-size: 0.88rem; } }
/* Opening from the portfolio: its screenshot grows into this window (see portfolio.css). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  body.framed { view-transition-name: demo-window; }
  ::view-transition-group(demo-window) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
}
@media print { .frame-bar { display: none; } html { background: none; } body.framed { margin: 0; } }