.bww-reviewed-demo {margin: 2rem 0; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line, #d9ddd9); border-radius: 16px; background: var(--surface, #f5f5ee);}
.bww-reviewed-demo p {max-width: 72ch;}
.bww-reviewed-demo .demo-stage, .bww-reviewed-demo .demo-gate {position: static; min-height: 0; padding: 1rem; background: transparent; color: inherit;}
.bww-reviewed-demo .demo-frame {min-height: 0; background: transparent; color: inherit;}
.bww-reviewed-demo .demo-viewport {min-height: 0; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #131923;}
.bww-reviewed-demo .demo-viewport iframe {width: 100%; height: 100%; border: 0; position: absolute; inset: 0;}
.bww-reviewed-demo .demo-viewport[data-external-launch] {aspect-ratio: auto; padding: 1rem; background: transparent;}
.bww-reviewed-demo .demo-toolbar {flex-wrap: wrap; color: inherit; background: transparent;}
.bww-reviewed-demo button, .bww-reviewed-demo a.button, .bww-demo-card-action a {white-space: normal; max-width: 100%;}
.bww-demo-card-action {margin: .75rem 0 1.5rem;}
.bww-demo-card-action small {display: block; margin-top: .4rem;}
.a-detail-heading > .a-text-link + .a-text-link {margin-left: 1rem;}
/* This stylesheet loads after ui-recovery.css: keep the portrait breakpoint here. */
@media (max-width: 600px) {
  .bww-reviewed-demo .demo-viewport {aspect-ratio: 4/5;}
}
html.bww-demo-view-open {overflow: hidden;}
.bww-reviewed-demo .demo-frame.bww-demo-expanded,
.bww-reviewed-demo .demo-frame:fullscreen {
  display: flex; flex-direction: column; gap: .5rem;
  box-sizing: border-box; min-width: 0; min-height: 0;
  padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
  background: var(--surface, #f5f5ee); color: var(--text, #171b22); overflow: auto;
}
.bww-reviewed-demo .demo-frame.bww-demo-expanded {
  position: fixed; inset: 0; z-index: 10020; width: 100%; height: 100vh; height: 100dvh;
}
.bww-reviewed-demo .demo-frame:fullscreen {width: 100vw; height: 100vh; height: 100dvh;}
.bww-reviewed-demo .demo-frame.bww-demo-expanded .demo-viewport,
.bww-reviewed-demo .demo-frame:fullscreen .demo-viewport {flex: 1 1 auto; aspect-ratio: auto; min-height: 6rem;}
.bww-reviewed-demo .demo-frame.bww-demo-expanded .demo-toolbar,
.bww-reviewed-demo .demo-frame:fullscreen .demo-toolbar {flex: 0 0 auto; margin: 0; padding: .5rem 0;}
.bww-reviewed-demo .bww-demo-view-exit {flex: 0 0 auto; align-self: flex-start;}