/* demos-stack: Live Demos cards that slide up over each other by themselves.
   Default (no JS / reduced motion) = swipeable row. */
html body .dmh .dmh-stackwrap { min-width: 0; }
html body .dmh .dmh-stack {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 0 14px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
html body .dmh .dmh-stack::-webkit-scrollbar { display: none; }
html body .dmh .dmh-slide { flex: 0 0 min(86%, 440px); scroll-snap-align: start; position: relative; }
html body .dmh .dmh-slide .dmh-card { height: 100%; }
html body .dmh .dmh-meter { display: none; }
html body .dmh .dm-card.soon { cursor: default; }
html body .dmh .dm-card.soon:hover { transform: none; border-color: rgba(26,158,114,.32); box-shadow: none; }

/* Auto-sliding stack (class added by demos-stack.js) */
html body .dmh.dmh-auto .dmh-stack {
  display: block; position: relative; overflow: visible; scroll-snap-type: none; padding: 0;
  height: var(--dmh-h, 520px);
}
html body .dmh.dmh-auto .dmh-slide {
  position: absolute; left: 0; right: 0; top: 30px; flex: none; transform-origin: 50% 0;
  transition: transform .75s cubic-bezier(.2,.8,.2,1), opacity .5s ease; will-change: transform, opacity;
}
html body .dmh.dmh-auto .dmh-slide::after {
  content: ''; position: absolute; inset: 0; background: #07110e; pointer-events: none;
  opacity: var(--dim, 0); transition: opacity .75s ease;
}
html body .dmh.dmh-auto .dmh-slide .dm-card { box-shadow: 0 34px 60px -34px rgba(0,0,0,.85); background: #0b1713; }
html body .dmh.dmh-auto .dmh-slide[data-rank="0"] { transform: none; opacity: 1; --dim: 0; }
html body .dmh.dmh-auto .dmh-slide[data-rank="1"] { transform: translateY(-14px) scale(.95); opacity: 1; --dim: .55; pointer-events: none; }
html body .dmh.dmh-auto .dmh-slide[data-rank="2"] { transform: translateY(-26px) scale(.9); opacity: 1; --dim: .78; pointer-events: none; }
html body .dmh.dmh-auto .dmh-slide[data-rank="3"],
html body .dmh.dmh-auto .dmh-slide[data-rank="4"],
html body .dmh.dmh-auto .dmh-slide[data-rank="5"],
html body .dmh.dmh-auto .dmh-slide[data-rank="6"],
html body .dmh.dmh-auto .dmh-slide[data-rank="7"],
html body .dmh.dmh-auto .dmh-slide[data-rank="8"],
html body .dmh.dmh-auto .dmh-slide[data-rank="9"] { transform: translateY(-26px) scale(.9); opacity: 0; --dim: .78; pointer-events: none; }
html body .dmh.dmh-auto .dmh-slide.dmh-enter { transform: translateY(105%) !important; opacity: 0 !important; transition: none !important; }

html body .dmh.dmh-auto .dmh-meter {
  display: flex; align-items: center; gap: 14px; margin-top: 20px;
  font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: .1em; color: #8fb0a3;
}
html body .dmh .dmh-num { color: #3ddba0; }
html body .dmh .dmh-bar { flex: 1; height: 2px; background: rgba(143,176,163,.25); position: relative; overflow: hidden; }
html body .dmh .dmh-bar i { position: absolute; inset: 0; background: #3ddba0; transform-origin: 0 50%; transform: scaleX(0); }
@keyframes dmhFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html body .dmh .dmh-nav {
  width: 34px; height: 34px; padding: 0; border: 1px solid rgba(61,219,160,.45); border-radius: 0; cursor: pointer;
  background: rgba(26,158,114,.08); color: #3ddba0; font: 500 15px/1 'IBM Plex Mono', monospace;
  transition: background .2s ease, border-color .2s ease;
}
html body .dmh .dmh-nav:hover { background: rgba(26,158,114,.22); border-color: #3ddba0; }
@media (prefers-reduced-motion: reduce) {
  html body .dmh.dmh-auto .dmh-slide, html body .dmh.dmh-auto .dmh-slide::after { transition: none; }
}