/* Showcase blocks filled by bin/showcase-blocks.py: hero film, live demos, real parts.
   Works on the dark .night pages and the light Twinton pages: colours follow currentColor. */
.sc-reel{margin:0;border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb,currentColor 16%,transparent);background:var(--color-paper-2,#f1f3f6);color:inherit}
.sc-reel video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--color-paper-2,#f1f3f6)}
.sc-reel figcaption{font-size:13px;line-height:1.45;opacity:.75;padding:10px 14px;background:color-mix(in srgb,currentColor 4%,transparent)}
.night .sc-reel figcaption{color:var(--night-muted,#aab4c4);opacity:1}
.sc-demos,.sc-made{margin-block:56px}
.sc-demos>p{max-width:62ch;opacity:.8;margin:6px 0 18px}
.sc-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.sc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.sc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sc-demo{display:flex;flex-direction:column;gap:6px;padding:0 0 14px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:14px;overflow:hidden;text-decoration:none!important;color:inherit;transition:border-color .15s,transform .15s}
.sc-demo:hover{border-color:var(--color-accent,#2d4fd6);transform:translateY(-2px)}
.sc-demo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--color-paper-2,#f1f3f6)}
.sc-demo b,.sc-demo span,.sc-demo i{padding:0 14px}
.sc-demo b{font:600 17px 'Space Grotesk',var(--font-display,sans-serif);margin-top:6px}
.sc-demo span{font-size:14px;line-height:1.45;opacity:.78}
.sc-demo i{font-style:normal;font-size:14px;font-weight:600;color:var(--color-accent,#2d4fd6);margin-top:auto}
.sc-strip{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.sc-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sc-made figure{margin:0}
.sc-made img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#fff}
.sc-made figcaption{font-size:14px;margin-top:6px;opacity:.8}