.demo [hidden] { display: none !important; }
.demo { color: #171717; --demo-line: #bcb9ad; --demo-bg: #efede6; }
.demo, .demo * { box-sizing: border-box; }
.demo button { font: inherit; min-height: 44px; padding: .45rem .95rem; border: 1px solid #777; border-radius: 100px; background: #fff; color: #181818; cursor: pointer; }
.demo button:hover:not(:disabled) { background: #dedbd0; }
.demo button[aria-pressed=true] { background: #181818; color: #fff; }
.demo button:disabled { opacity: .45; cursor: default; }
.demo :is(button,a,[tabindex]):focus-visible { outline: 2px solid #a91648; outline-offset: 4px; }
.demo-head, .demo-controls, .demo-actions, .demo-thumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.demo-head { justify-content: space-between; margin-bottom: 1rem; }
.demo-head h2 { margin: 0; }
.demo-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(91%, 740px); gap: 1rem; padding: .25rem .25rem 1.1rem; margin: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; }
.demo-rail::after { content: ""; min-width: 0; width: max(0px, calc(100cqw - 740px - 2rem)); }
.demo { container-type: inline-size; }
.demo-rail li { min-width: 0; scroll-snap-align: start; border: 1px solid var(--demo-line); background: var(--demo-bg); }
.demo-card { padding: 1rem; }
.demo-card h3 { margin: 0 0 .6rem; }
.demo-card p { margin: .6rem 0; min-height: 1.25em; font-size: .9rem; }
.demo-media { position: relative; width: 100%; aspect-ratio: 16/10; background: #e1dfd8; }
.demo-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.demo-stage { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 36%, #7c8187, #30363d); }
.demo-canvas, .demo-canvas canvas { display: block; width: 100%; height: 100%; }
.demo-rotate { position: absolute; bottom: .5rem; left: .5rem; display: flex; gap: .4rem; }
.demo-rotate button { font-size: .82rem; padding-inline: .6rem; }
.demo-gallery figure { margin: 0 0 1rem; }
.demo-gallery figure a { display: block; background: var(--demo-bg); }
.demo-gallery figure img { display: block; max-width: 100%; width: 100%; aspect-ratio: 16/10; object-fit: contain; }
.demo-gallery figcaption { margin-top: .6rem; color: #53514c; }
.demo-thumbs { margin-top: 1rem; }
.demo-dialog { border: 1px solid #aaa; width: min(940px,calc(100% - 20px)); max-height: 92dvh; padding: clamp(10px,3vw,30px); background: #f7f6f2; color: #171717; margin: auto; overscroll-behavior: contain; }
.demo-dialog::backdrop { background: rgb(10 10 10 / .76); }
.demo-dialog figure { touch-action: pan-y; }
.demo-dialog figure img { max-height: 62dvh; }
.demo-dialog .demo-controls { justify-content: space-between; }
@media (max-width: 650px) {
  .demo-rail { grid-auto-columns: 91%; }
  .demo-rail::after { width: 7cqw; }
  .demo-card { padding: .75rem; }
  .demo-dialog .demo-controls { justify-content: flex-start; }
}