.demo-card{min-width:0}.demo-player{margin-top:18px;min-width:0}.demo-stage{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:stretch;min-width:0;border:1px solid var(--line);border-radius:6px;background:#080909;overflow:hidden;min-height:320px}.demo-media{width:100%;height:100%;min-width:0;display:flex;align-items:center;justify-content:center}.demo-media img,.demo-media video{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;background:#080909}.demo-nav{align-self:end;justify-self:center;width:34px;height:54px;margin-bottom:12px;border:1px solid var(--line);border-radius:4px;background:rgba(8,9,9,.82);color:var(--text);font:400 30px/1 var(--heading);cursor:pointer;z-index:2}.demo-nav:hover{border-color:var(--accent);color:var(--accent)}.demo-nav[hidden]{display:none}.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}.demo-dots{display:flex;align-items:center;gap:6px}.demo-dot{width:8px;height:8px;padding:0;border:1px solid var(--muted);border-radius:50%;background:transparent;cursor:pointer}.demo-dot[aria-current="true"]{background:var(--accent);border-color:var(--accent)}.demo-counter{font:500 8px var(--mono);text-transform:uppercase;color:var(--muted)}.demo-caption{margin-top:14px}.demo-caption strong,.demo-caption span{display:block}.demo-caption strong{font:600 10px var(--mono);text-transform:uppercase;color:var(--accent)}.demo-caption span{margin-top:4px;color:#d0d3d5;font-size:11px;line-height:1.5}@media(max-width:760px){.demo-stage{grid-template-columns:36px minmax(0,1fr) 36px;min-height:240px}.demo-nav{width:30px;height:46px;font-size:26px;margin-bottom:8px}.demo-caption span{font-size:10px}}