/* A project's live demo in the Projects terminal (.term in style.css, which also styles its lines, buttons
   and gutter): the .demo-screen holds the live part and its controls, and the .docs open in place (demo.js).
   What's specific to one demo lives in its own stylesheet, scoped to its own class (.hc, .rl). */
.demo{--codebg:#141414;--codeink:#cfcfcf}

/* the screen bleeds to the terminal's edges. While the documentation is open it sticks to the top of the
   window (demo.js sets --demo-top below the header), so the live part stays in view while you read. */
.demo-screen{margin:0 calc(-1 * var(--padr)) 0 calc(-1 * var(--gw));padding:0 var(--padr) 2px var(--gw);background:var(--bg)}
.demo.open .demo-screen{position:sticky;top:var(--demo-top,0px);z-index:2;border-bottom:1px solid var(--rule)}
/* once stuck, black out the documentation scrolling up between the screen and the top of the window */
.demo.stuck .demo-screen::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:var(--demo-top,0px);background:var(--bg)}

/* opened fully, once the terminal has moved left (.term.max in style.css): the screen keeps the column's
   width and sticks, and the documentation takes the space the terminal freed, beside it, with its own gutter */
.term.max .demo{display:grid;grid-template-columns:minmax(0,var(--c1)) minmax(0,1fr);align-items:start}
.term.max .demo-screen{margin-right:0;padding-right:16px}
.term.max .demo.open .demo-screen{border-bottom:0}
.term.max .demo.stuck .demo-screen::before{right:calc(var(--c1) - 100cqw - var(--padr))}
.term.max .docs{grid-column:2;padding-left:var(--gw);border-left:1px solid var(--rule);animation:demo-in .35s ease}
@keyframes demo-in{from{opacity:0}}

/* code excerpts: verbatim lines from the source, on a lighter band; marked lines print in reverse video */
.demo .code{--pad:14px;padding:0 14px;background:var(--codebg)}
.demo .ch{color:var(--muted);box-shadow:inset 0 -1px var(--rule)}
.demo .cl{display:block;font-size:11.5px;color:var(--codeink);white-space:pre-wrap;overflow-wrap:anywhere;padding-left:2ch;text-indent:-2ch}
.demo .cl code{font:inherit}
.demo .cl .kw,.demo .cl .nu,.demo .cl .st{color:#fff}
.demo .cl .cm{color:var(--muted)}
.demo .mk code{background:var(--ink);color:var(--bg);padding:4px 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.demo .mk code .kw,.demo .mk code .nu,.demo .mk code .st,.demo .mk code .cm{color:inherit}
.demo .el code{color:var(--muted)}

/* live panels: outlined, so they read apart from the code */
.demo .panel{--pad:13px;padding:0 12px;border:1px solid #333;border-radius:3px}
.demo .th{color:var(--muted)}

/* where the home page stacks, the curve banner lets go of the top while a demo's documentation is open,
   and the demo's screen takes its place */
@media (max-width:860px),(max-width:1180px) and (max-aspect-ratio:4/5){
  .demo .cl{font-size:10.5px}
  html.demo-open .stage{position:relative}
}