* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { display: flex; flex-direction: column; font: 14px/1.5 system-ui, sans-serif; background: #171717; color: #eee; }
.component-host { flex: 1; min-height: 0; width: 100%; height: auto; aspect-ratio: auto; }
.component-host[data-kind=dither] { height: auto; aspect-ratio: auto; }
.demo-controls { min-height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid #353535; }
.demo-controls p { margin: 0; font-size: 12px; color: #ccc; }
.demo-controls button { border: 1px solid #555; border-radius: 8px; background: transparent; color: #eee; font: inherit; min-height: 44px; padding: 0 12px; cursor: pointer; }
.demo-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.demo-controls button:disabled { opacity: .45; cursor: default; }
.flat-gallery img { flex-basis: 95px; width: 95px; height: 120px; }
.demo-unavailable { padding: 30px; color: #334d7a; }
noscript { padding: 16px; }