:root{
  --ciab-animation-radius:12px;
  --ciab-animation-border:var(--line-strong,rgba(255,255,255,.14));
}

/* Every walkthrough has one consistent embedded frame. The stronger edge makes the
   recreated app legible in both console themes without adding video-style controls. */
.ciab-animation-surface{
  border:1px solid var(--ciab-animation-border) !important;
  border-radius:var(--ciab-animation-radius) !important;
  overflow:hidden !important;
  cursor:zoom-in !important;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.ciab-animation-surface:hover{
  border-color:var(--accent-line,rgba(91,141,239,.44)) !important;
  box-shadow:0 0 0 1px var(--accent-dim,rgba(91,141,239,.10)),0 14px 34px rgba(0,0,0,.18);
}
.ciab-animation-surface:focus-visible{
  outline:2px solid var(--accent,#5b8def) !important;
  outline-offset:3px !important;
}
.animation-preview.ciab-animation-surface{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 5px 16px rgba(0,0,0,.22),0 18px 42px rgba(0,0,0,.2);
}
.wg-stage.ciab-animation-surface .wg-fx{
  border:0 !important;
  border-radius:0 !important;
}

html.ciab-animation-focus-open,
html.ciab-animation-focus-open body{
  overflow:hidden !important;
  overscroll-behavior:none;
}
.ciab-animation-focus{
  position:fixed;
  inset:0;
  z-index:10000;
  overflow:hidden;
  background:#000;
  opacity:0;
  touch-action:none;
  isolation:isolate;
}
.ciab-animation-focus-stage{
  position:absolute;
  left:0;
  top:0;
  margin:0 !important;
  overflow:hidden;
  border:0 !important;
  border-radius:0 !important;
  background:#000;
  transform-origin:0 0;
  will-change:transform;
  box-shadow:none !important;
}
.ciab-animation-focus-content{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  cursor:default !important;
  transform:none !important;
}
.ciab-animation-focus-content.wg-stage .wg-fx,
.ciab-animation-focus-content.pa-anim{
  width:100%;
  height:100%;
  border:0 !important;
  border-radius:0 !important;
}
.ciab-animation-focus-close{
  position:fixed;
  top:max(14px,env(safe-area-inset-top));
  right:max(14px,env(safe-area-inset-right));
  z-index:2;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(8,8,10,.78);
  color:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.42);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  opacity:0;
  transition:background .16s,border-color .16s,transform .16s;
  -webkit-tap-highlight-color:transparent;
}
.ciab-animation-focus-close:hover{
  background:rgba(30,30,34,.9);
  border-color:rgba(255,255,255,.38);
}
.ciab-animation-focus-close:active{ transform:scale(.94); }
.ciab-animation-focus-close:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
.ciab-animation-focus-close-icon{
  width:19px;
  height:19px;
  background:currentColor;
  -webkit-mask:url("/icons/lucide-x.svg") center/contain no-repeat;
  mask:url("/icons/lucide-x.svg") center/contain no-repeat;
}
.ciab-animation-placeholder{ visibility:hidden !important; pointer-events:none !important; }

@media (prefers-reduced-motion:reduce){
  .ciab-animation-surface,.ciab-animation-focus-close{ transition:none !important; }
}