.ds-lb {
  --lb-w: 360px;
  border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh;
  color: #fff; overflow: hidden;
  background: radial-gradient(70% 55% at 50% 36%, rgba(42, 108, 192, .42), rgba(42, 108, 192, 0) 72%),
              radial-gradient(45% 35% at 82% 92%, rgba(124, 230, 176, .1), rgba(124, 230, 176, 0) 70%),
              linear-gradient(180deg, #0c2352 0%, #081733 55%, #060f24 100%);
}
.ds-lb::backdrop { background: rgba(6, 15, 36, .92); }
.ds-lb[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.ds-lb__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ds-lb__bg img { position: absolute; left: 50%; top: 42%; width: 140%; height: 140%; object-fit: cover; transform: translate(-50%, -50%) scale(1.05); filter: blur(56px) saturate(1.3); opacity: 0; transition: opacity .6s ease; }
.ds-lb__bg img.is-on { opacity: .38; }
.ds-lb__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 40%, rgba(8, 23, 51, 0) 0, rgba(8, 23, 51, .55) 70%, rgba(6, 15, 36, .85) 100%); }
.ds-lb__stage { position: relative; z-index: 1; min-height: 0; display: grid; place-items: center; box-sizing: border-box; padding: 64px 16px 8px; }
.ds-lb__frame {
  position: relative; width: var(--lb-w); max-width: 100%; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: #050b18;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 80px -24px rgba(0, 0, 0, .7), 0 0 90px -20px rgba(42, 108, 192, .55);
}
.ds-lb__v { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; border-radius: 0; outline: none; }
@media (min-width: 720px) { .ds-lb__stage { padding: 76px 96px 10px; } }
.ds-lb__buf { position: absolute; left: 0; right: 0; top: 0; height: 3px; overflow: hidden; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 2; }
.ds-lb__buf.is-on { opacity: 1; }
.ds-lb__buf::after { content: ''; position: absolute; top: 0; bottom: 0; width: 34%; background: linear-gradient(90deg, transparent, #B4DCFF, transparent); animation: ds-lb-buf 1.1s linear infinite; }
@keyframes ds-lb-buf { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
.ds-lb-tiho .ds-lb__buf::after { animation: none; left: 0; width: 100%; opacity: .6; }
.ds-lb-tiho .ds-lb__bg img { transition: none; }
.ds-lb__x, .ds-lb__nav {
  z-index: 3; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; padding: 0;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .2s;
}
.ds-lb__x:hover, .ds-lb__nav:hover { background: rgba(255, 255, 255, .2); }
.ds-lb__x { position: absolute; top: 10px; right: 12px; }
@media (min-width: 720px) { .ds-lb__x { top: 18px; right: 22px; } }
.ds-lb__x svg, .ds-lb__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ds-lb__nav[hidden] { visibility: hidden; display: grid; }
.ds-lb__x:focus-visible, .ds-lb__nav:focus-visible, .ds-lb__ig:focus-visible { outline: 3px solid #B4DCFF; outline-offset: 2px; }
.ds-lb__foot {
  position: relative; z-index: 1; box-sizing: border-box; width: min(calc(100% - 32px), max(var(--lb-w), 320px)); margin: 0 auto;
  padding: 12px 0 calc(14px + env(safe-area-inset-bottom));
}
.ds-lb__cap { margin: 0; font: 700 15px/1.4 var(--ds-font, 'Open Sans', 'Open Sans Fallback', system-ui, sans-serif); color: #fff; text-wrap: pretty; }
.ds-lb__cap:empty, .ds-lb__meta:empty { display: none; }
.ds-lb__meta { margin: 4px 0 0; font: 400 12.5px/1.4 var(--ds-font, 'Open Sans', 'Open Sans Fallback', system-ui, sans-serif); color: rgba(255, 255, 255, .66); }
.ds-lb__acts { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ds-lb__mid { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.ds-lb__ig {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  font: 600 13px/1.2 var(--ds-font, 'Open Sans', 'Open Sans Fallback', system-ui, sans-serif); color: #fff; text-decoration: none; white-space: nowrap;
}
.ds-lb__ig:hover { background: rgba(255, 255, 255, .18); }
.ds-lb__ig[hidden] { display: none; }
.ds-lb__go { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.ds-lb__go[hidden] { display: none; }
@media (min-width: 720px) {
  .ds-lb__cap { font-size: 16px; }
  .ds-lb__meta { font-size: 13px; }
  .ds-lb__foot { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}
html.ds-lb-open { overflow: hidden; }