/* Screenshots gallery — layered on docs.css (shares its tokens: --ink, --muted,
   --line, --orange, --orange-dk, --dark, --paper, --paper-2). Generated page is
   built from demos/manifest.json by demos/build-page.mjs. */
.shots-hero{max-width:1160px;margin:0 auto;padding:52px 22px 8px;text-align:center}
.shots-hero h1{font-size:clamp(30px,4vw,44px);line-height:1.08;margin:0 0 12px;letter-spacing:-.5px;text-wrap:balance;color:var(--ink)}
.shots-hero h1 .g{color:var(--orange)}
.shots-hero .lede{max-width:64ch;margin:0 auto 26px;color:var(--muted);font-size:18px}
.demo{max-width:920px;margin:0 auto;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 50px -20px rgba(13,27,34,.45),0 2px 8px rgba(13,27,34,.08)}
.demo video,.demo img{display:block;width:100%}
.demo-cap{max-width:920px;margin:12px auto 0;color:var(--muted);font-size:13.5px;text-align:center}
.demo-cap code{font-size:12.5px}
.shots-main{max-width:1160px;margin:0 auto;padding:12px 22px 40px}
.cred-note{margin:8px 0 4px;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:10px;background:var(--paper-2);color:var(--muted);font-size:14px;line-height:1.6}
.cred-note .cred-label{display:block;color:var(--ink);font-weight:700;font-size:14.5px;margin-bottom:4px}
.cred-note code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;background:var(--dark);color:#e8eef0;padding:1px 6px;border-radius:5px}
.cmd-shot{padding:38px 0;border-top:1px solid var(--line)}
.cmd-shot:first-child{border-top:none}
.cmd-shot .head h2{margin:0 0 3px;font-size:15px}
.cmd-shot .head h2 code{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:19px;font-weight:700;color:var(--ink);background:none;padding:0;border:none}
.cmd-shot .head h2 code::before{content:"sluice ";color:var(--orange)}
.cmd-shot .head p{margin:0 0 20px;color:var(--muted);font-size:15.5px;max-width:72ch}
.grid{display:grid;gap:18px}
.grid.n3{grid-template-columns:repeat(3,1fr)}
.grid.n2{grid-template-columns:repeat(2,1fr)}
.grid.n1{grid-template-columns:minmax(0,860px)}
figure.shot{margin:0;display:flex;flex-direction:column;gap:9px}
.frame{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--dark);box-shadow:0 6px 20px -12px rgba(13,27,34,.3);transition:box-shadow .15s,transform .15s}
.frame:hover{box-shadow:0 10px 28px -12px rgba(243,88,21,.35);transform:translateY(-2px)}
.frame img{display:block;width:100%;cursor:zoom-in}
figcaption{font-size:13px;color:var(--muted);line-height:1.5}
figcaption .step{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--orange-dk);margin-bottom:2px}
.shots-foot{max-width:1160px;margin:0 auto;padding:22px 22px 60px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
/* click-to-enlarge lightbox */
.lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(8,16,20,.9);padding:28px;cursor:zoom-out}
.lb.open{display:flex}
.lb img{max-width:min(1400px,96vw);max-height:92vh;width:auto;height:auto;border-radius:10px;border:1px solid #2a3d45;box-shadow:0 30px 90px -20px rgba(0,0,0,.8)}
.lb-close{position:absolute;top:16px;right:22px;background:none;border:none;color:#cdd8dc;font-size:34px;line-height:1;cursor:pointer;padding:6px 12px;border-radius:8px}
.lb-close:hover,.lb-close:focus-visible{background:rgba(255,255,255,.08);color:#fff;outline:2px solid var(--orange)}
@media(max-width:860px){.grid.n3,.grid.n2{grid-template-columns:1fr}}
/* More-demos strip (animated GIFs) */
.demos-strip{padding:44px 0 10px;border-top:1px solid var(--line)}
.demos-strip h2{font-size:22px;margin:0 0 20px;color:var(--ink);letter-spacing:-.3px}
.demos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.demo-card{margin:0;display:flex;flex-direction:column;gap:10px}
/* Uniform video-row height so the captions below line up. The demos are
   recorded at slightly different aspect ratios; a fixed 16:9 frame + contain
   keeps every terminal fully visible (no crop of the command line / summary),
   and the frame background is the Catppuccin-Mocha terminal base so any
   letterbox blends into the recording's own padding. */
.demo-card .frame{aspect-ratio:16/9;background:#1d1c2d}
.demos-grid .demo-card:last-child:nth-child(odd){grid-column:1/-1}
.demo-card .frame video,.demo-card .frame img{display:block;width:100%;height:100%;object-fit:contain}
.demo-card figcaption{font-size:13.5px;color:var(--muted);line-height:1.5}
.demo-card figcaption .demo-title{display:block;color:var(--ink);font-size:14.5px;font-weight:700;margin-bottom:2px}
.demo-card figcaption .demo-desc{display:block}
@media(max-width:860px){.demos-grid{grid-template-columns:1fr}}