/* Lays out the command sections and their figures; each section opens with a command line. */

.cmd{padding:clamp(110px,14vw,180px) 0 0}
.cmdline{font:300 clamp(17px,1.9vw,22px) var(--mono);letter-spacing:-.01em;color:var(--tx);margin:0 0 44px;display:flex;align-items:center;gap:.55em;white-space:nowrap;min-width:0}
.cmdline .pth{color:var(--faint)}
.cmdline .dol{color:var(--dim);margin-right:.1em}
.cmdline .arg{color:var(--blue)}
.cmdline .cm{color:var(--faint);font-size:.7em;overflow:hidden;text-overflow:ellipsis}
.cmdline::after{content:"";flex:1;min-width:24px;height:1px;background:var(--line);margin-left:.6em}
@media (max-width:600px){.cmdline .pth,.cmdline .cm{display:none}}
.two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(48px,7vw,104px);align-items:start}
.two.rev{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.two.rev>.copyc{order:2}
.copyc h2{font:400 clamp(34px,4.2vw,54px)/1.08 var(--serif);letter-spacing:-.025em;margin:0 0 28px;text-wrap:balance}
.copyc h2 em{font-style:normal;color:var(--hi)}
.copyc p{margin:0 0 22px;color:var(--tx);max-width:44ch}
.copyc p.d{color:var(--dim)}
.copyc ul{list-style:none;margin:36px 0 0;padding:0;font:13px/1.6 var(--mono);color:var(--dim)}
.copyc li{padding:14px 0;border-top:1px solid var(--line)}
.copyc li b{color:var(--tx);font-weight:500}
@media (max-width:900px){.two,.two.rev{grid-template-columns:minmax(0,1fr);gap:28px}.two.rev>.copyc{order:0}}

/* Figures: recorded clips and live demos, with captions set like a paper's. */
figure{margin:0}
.fig{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--ink2)}
.fig+.fig{margin-top:18px}
.fig video{display:block;width:100%;height:auto}
figcaption{margin-top:18px;font:15px/1.5 var(--serif);color:var(--dim)}
figcaption b{font-style:normal;font-weight:500;color:var(--tx)}
.live{margin-top:72px}
.live [data-demo]{height:min(640px,80vh);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.clips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px);margin-top:80px}
@media (max-width:900px){.clips{grid-template-columns:minmax(0,1fr)}}