.demo-bar {
  position: relative; z-index: 60;
  display: flex; align-items: center; gap: 6px 18px;
  min-height: 44px; padding: 0 max(8px, env(safe-area-inset-left, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));
  background: #0d1220; color: #dfe6f5;
  font: 500 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.demo-bar p { margin: 0; flex: 1; min-width: 0; color: #b9c3d8; }
.demo-bar a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; color: #fff; text-decoration: none; white-space: nowrap; border-radius: 6px; }
.demo-bar a:hover { background: rgb(255 255 255 / .08); }
.demo-bar a:focus-visible { outline: 2px solid #8fb4ff; outline-offset: -2px; }
.demo-bar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.demo-bar .db-cta { text-decoration: underline; text-underline-offset: 3px; }
.demo-bar .db-nav { display: inline-flex; gap: 2px; }
.demo-bar .db-short { display: none; }
@media (max-width: 760px) {   
  .demo-bar { gap: 4px; }
  .demo-bar .db-long, .demo-bar .db-cta { display: none; }
  .demo-bar .db-short { display: inline; }
  .demo-bar p { text-align: center; }
  .demo-bar .db-nav a { min-width: 44px; justify-content: center; }
}
.in-frame .demo-bar { display: none; }   


.js [data-lines] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.js [data-lines] .wi { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1.05s cubic-bezier(.19, .72, .12, 1) var(--d, 0s); }
.js [data-lines].in .wi { transform: none; }


.js [data-curtain] { position: relative; overflow: hidden; }
.js [data-curtain]::after { content: ""; position: absolute; inset: 0; background: var(--curtain, #fff); transform-origin: 50% 0; transition: transform 1.15s cubic-bezier(.77, 0, .18, 1); z-index: 2; pointer-events: none; }
.js [data-curtain].in::after { transform: scaleY(0); }
.js [data-curtain] img { transform: scale(1.16); transition: transform 1.9s cubic-bezier(.19, .72, .12, 1); }
.js [data-curtain].in img { transform: none; }


.js [data-rise] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s ease, transform 1.1s cubic-bezier(.19, .72, .12, 1); }
.js [data-rise].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-lines] .wi, .js [data-curtain] img, .js [data-rise] { transform: none !important; opacity: 1 !important; transition: none !important; }
  .js [data-curtain]::after { display: none; }
}
@media print { .demo-bar { display: none; } }